mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-03 11:23:24 +08:00
docs(alert): add javascript and angular example docs
This commit is contained in:
Brandy Carney
@ -20,21 +20,6 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a `
|
||||
Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text"" inputs can be mixed, such as `url`, `email`, `text`, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
|
||||
|
||||
|
||||
```javascript
|
||||
async function presentAlert() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
title: 'Alert',
|
||||
subTitle: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK']
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
|
||||
240
core/src/components/alert/usage/angular.md
Normal file
240
core/src/components/alert/usage/angular.md
Normal file
@ -0,0 +1,240 @@
|
||||
```javascript
|
||||
import { Component } from '@angular/core';
|
||||
import { AlertController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'alert-example',
|
||||
templateUrl: 'alert-example.html',
|
||||
styleUrls: ['./alert-example.css'],
|
||||
})
|
||||
export class AlertExample {
|
||||
|
||||
constructor(public alertController: AlertController) {}
|
||||
|
||||
presentAlert() {
|
||||
const alert = this.alertController.create({
|
||||
title: 'Alert',
|
||||
subTitle: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK']
|
||||
});
|
||||
|
||||
alert.present();
|
||||
}
|
||||
|
||||
presentAlertMultipleButtons() {
|
||||
const alert = this.alertController.create({
|
||||
title: 'Alert',
|
||||
subTitle: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['Cancel', 'Open Modal', 'Delete']
|
||||
});
|
||||
|
||||
alert.present();
|
||||
}
|
||||
|
||||
presentAlertConfirm() {
|
||||
const alert = this.alertController.create({
|
||||
title: 'Confirm!',
|
||||
message: 'Message <strong>text</strong>!!!',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: (blah) => {
|
||||
console.log('Confirm Cancel: blah');
|
||||
}
|
||||
}, {
|
||||
text: 'Okay',
|
||||
handler: () => {
|
||||
console.log('Confirm Okay')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
alert.present();
|
||||
}
|
||||
|
||||
presentAlertPrompt() {
|
||||
const alert = this.alertController.create({
|
||||
title: 'Prompt!',
|
||||
inputs: [
|
||||
{
|
||||
placeholder: 'Placeholder 1'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
id: 'name2-id',
|
||||
value: 'hello',
|
||||
placeholder: 'Placeholder 2'
|
||||
},
|
||||
{
|
||||
name: 'name3',
|
||||
value: 'http://ionicframework.com',
|
||||
type: 'url',
|
||||
placeholder: 'Favorite site ever'
|
||||
},
|
||||
// input date with min & max
|
||||
{
|
||||
name: 'name4',
|
||||
type: 'date',
|
||||
min: '2017-03-01',
|
||||
max: '2018-01-12'
|
||||
},
|
||||
// input date without min nor max
|
||||
{
|
||||
name: 'name5',
|
||||
type: 'date'
|
||||
},
|
||||
{
|
||||
name: 'name6',
|
||||
type: 'number',
|
||||
min: -5,
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: 'name7',
|
||||
type: 'number'
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: () => {
|
||||
console.log('Confirm Cancel')
|
||||
}
|
||||
}, {
|
||||
text: 'Ok',
|
||||
handler: () => {
|
||||
console.log('Confirm Ok')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
alert.present();
|
||||
}
|
||||
|
||||
presentAlertRadio() {
|
||||
const alert = this.alertController.create({
|
||||
title: 'Radio',
|
||||
inputs: [
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 2',
|
||||
value: 'value2'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 3',
|
||||
value: 'value3'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 4',
|
||||
value: 'value4'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 5',
|
||||
value: 'value5'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
|
||||
value: 'value6'
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: () => {
|
||||
console.log('Confirm Cancel')
|
||||
}
|
||||
}, {
|
||||
text: 'Ok',
|
||||
handler: () => {
|
||||
console.log('Confirm Ok')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
alert.present();
|
||||
}
|
||||
|
||||
presentAlertCheckbox() {
|
||||
const alert = this.alertController.create({
|
||||
title: 'Checkbox',
|
||||
inputs: [
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 2',
|
||||
value: 'value2'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 3',
|
||||
value: 'value3'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 4',
|
||||
value: 'value4'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 5',
|
||||
value: 'value5'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
|
||||
value: 'value6'
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: () => {
|
||||
console.log('Confirm Cancel')
|
||||
}
|
||||
}, {
|
||||
text: 'Ok',
|
||||
handler: () => {
|
||||
console.log('Confirm Ok')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
alert.present();
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
238
core/src/components/alert/usage/javascript.md
Normal file
238
core/src/components/alert/usage/javascript.md
Normal file
@ -0,0 +1,238 @@
|
||||
```javascript
|
||||
async function presentAlert() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
title: 'Alert',
|
||||
subTitle: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK']
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
|
||||
async function presentAlertMultipleButtons() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
title: 'Alert',
|
||||
subTitle: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['Cancel', 'Open Modal', 'Delete']
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
|
||||
async function presentAlertConfirm() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
title: 'Confirm!',
|
||||
message: 'Message <strong>text</strong>!!!',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: (blah) => {
|
||||
console.log('Confirm Cancel: blah');
|
||||
}
|
||||
}, {
|
||||
text: 'Okay',
|
||||
handler: () => {
|
||||
console.log('Confirm Okay')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
|
||||
async function presentAlertPrompt() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
title: 'Prompt!',
|
||||
inputs: [
|
||||
{
|
||||
placeholder: 'Placeholder 1'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
id: 'name2-id',
|
||||
value: 'hello',
|
||||
placeholder: 'Placeholder 2'
|
||||
},
|
||||
{
|
||||
name: 'name3',
|
||||
value: 'http://ionicframework.com',
|
||||
type: 'url',
|
||||
placeholder: 'Favorite site ever'
|
||||
},
|
||||
// input date with min & max
|
||||
{
|
||||
name: 'name4',
|
||||
type: 'date',
|
||||
min: '2017-03-01',
|
||||
max: '2018-01-12'
|
||||
},
|
||||
// input date without min nor max
|
||||
{
|
||||
name: 'name5',
|
||||
type: 'date'
|
||||
},
|
||||
{
|
||||
name: 'name6',
|
||||
type: 'number',
|
||||
min: -5,
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: 'name7',
|
||||
type: 'number'
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: () => {
|
||||
console.log('Confirm Cancel')
|
||||
}
|
||||
}, {
|
||||
text: 'Ok',
|
||||
handler: () => {
|
||||
console.log('Confirm Ok')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
|
||||
async function presentAlertRadio() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
title: 'Radio',
|
||||
inputs: [
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 2',
|
||||
value: 'value2'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 3',
|
||||
value: 'value3'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 4',
|
||||
value: 'value4'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 5',
|
||||
value: 'value5'
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
|
||||
value: 'value6'
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: () => {
|
||||
console.log('Confirm Cancel')
|
||||
}
|
||||
}, {
|
||||
text: 'Ok',
|
||||
handler: () => {
|
||||
console.log('Confirm Ok')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
|
||||
async function presentAlertCheckbox() {
|
||||
const alertController = document.querySelector('ion-alert-controller');
|
||||
await alertController.componentOnReady();
|
||||
|
||||
const alert = await alertController.create({
|
||||
title: 'Checkbox',
|
||||
inputs: [
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 2',
|
||||
value: 'value2'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 3',
|
||||
value: 'value3'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 4',
|
||||
value: 'value4'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 5',
|
||||
value: 'value5'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
|
||||
value: 'value6'
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
cssClass: 'secondary',
|
||||
handler: () => {
|
||||
console.log('Confirm Cancel')
|
||||
}
|
||||
}, {
|
||||
text: 'Ok',
|
||||
handler: () => {
|
||||
console.log('Confirm Ok')
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
return await alert.present();
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user