mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(stencil): add stencil usage to components (#21261)
This commit is contained in:
Brandy Carney
@@ -779,6 +779,282 @@ export default AlertExample;
|
||||
```
|
||||
|
||||
|
||||
### Stencil
|
||||
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
import { alertController } from '@ionic/core';
|
||||
|
||||
@Component({
|
||||
tag: 'alert-example',
|
||||
styleUrl: 'alert-example.css'
|
||||
})
|
||||
export class AlertExample {
|
||||
async presentAlert() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Alert',
|
||||
subHeader: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK']
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertMultipleButtons() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Alert',
|
||||
subHeader: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['Cancel', 'Open Modal', 'Delete']
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertConfirm() {
|
||||
const alert = await alertController.create({
|
||||
header: '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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertPrompt() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Prompt!',
|
||||
inputs: [
|
||||
{
|
||||
name: 'name1',
|
||||
type: 'text',
|
||||
placeholder: 'Placeholder 1'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
type: 'text',
|
||||
id: 'name2-id',
|
||||
value: 'hello',
|
||||
placeholder: 'Placeholder 2'
|
||||
},
|
||||
// multiline input.
|
||||
{
|
||||
name: 'paragraph',
|
||||
id: 'paragraph',
|
||||
type: 'textarea',
|
||||
placeholder: 'Placeholder 3'
|
||||
},
|
||||
{
|
||||
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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertRadio() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Radio',
|
||||
inputs: [
|
||||
{
|
||||
name: 'radio1',
|
||||
type: 'radio',
|
||||
label: 'Radio 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: 'radio2',
|
||||
type: 'radio',
|
||||
label: 'Radio 2',
|
||||
value: 'value2'
|
||||
},
|
||||
{
|
||||
name: 'radio3',
|
||||
type: 'radio',
|
||||
label: 'Radio 3',
|
||||
value: 'value3'
|
||||
},
|
||||
{
|
||||
name: 'radio4',
|
||||
type: 'radio',
|
||||
label: 'Radio 4',
|
||||
value: 'value4'
|
||||
},
|
||||
{
|
||||
name: 'radio5',
|
||||
type: 'radio',
|
||||
label: 'Radio 5',
|
||||
value: 'value5'
|
||||
},
|
||||
{
|
||||
name: 'radio6',
|
||||
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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertCheckbox() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Checkbox',
|
||||
inputs: [
|
||||
{
|
||||
name: 'checkbox1',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox2',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 2',
|
||||
value: 'value2'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox3',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 3',
|
||||
value: 'value3'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox4',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 4',
|
||||
value: 'value4'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox5',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 5',
|
||||
value: 'value5'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox6',
|
||||
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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-content>
|
||||
<ion-button onClick={() => this.presentAlert()}>Present Alert</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertConfirm()}>Present Alert: Confirm</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertPrompt()}>Present Alert: Prompt</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertRadio()}>Present Alert: Radio</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertCheckbox()}>Present Alert: Checkbox</ion-button>
|
||||
</ion-content>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
|
||||
272
core/src/components/alert/usage/stencil.md
Normal file
272
core/src/components/alert/usage/stencil.md
Normal file
@@ -0,0 +1,272 @@
|
||||
```tsx
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
import { alertController } from '@ionic/core';
|
||||
|
||||
@Component({
|
||||
tag: 'alert-example',
|
||||
styleUrl: 'alert-example.css'
|
||||
})
|
||||
export class AlertExample {
|
||||
async presentAlert() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Alert',
|
||||
subHeader: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['OK']
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertMultipleButtons() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Alert',
|
||||
subHeader: 'Subtitle',
|
||||
message: 'This is an alert message.',
|
||||
buttons: ['Cancel', 'Open Modal', 'Delete']
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertConfirm() {
|
||||
const alert = await alertController.create({
|
||||
header: '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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertPrompt() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Prompt!',
|
||||
inputs: [
|
||||
{
|
||||
name: 'name1',
|
||||
type: 'text',
|
||||
placeholder: 'Placeholder 1'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
type: 'text',
|
||||
id: 'name2-id',
|
||||
value: 'hello',
|
||||
placeholder: 'Placeholder 2'
|
||||
},
|
||||
// multiline input.
|
||||
{
|
||||
name: 'paragraph',
|
||||
id: 'paragraph',
|
||||
type: 'textarea',
|
||||
placeholder: 'Placeholder 3'
|
||||
},
|
||||
{
|
||||
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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertRadio() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Radio',
|
||||
inputs: [
|
||||
{
|
||||
name: 'radio1',
|
||||
type: 'radio',
|
||||
label: 'Radio 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: 'radio2',
|
||||
type: 'radio',
|
||||
label: 'Radio 2',
|
||||
value: 'value2'
|
||||
},
|
||||
{
|
||||
name: 'radio3',
|
||||
type: 'radio',
|
||||
label: 'Radio 3',
|
||||
value: 'value3'
|
||||
},
|
||||
{
|
||||
name: 'radio4',
|
||||
type: 'radio',
|
||||
label: 'Radio 4',
|
||||
value: 'value4'
|
||||
},
|
||||
{
|
||||
name: 'radio5',
|
||||
type: 'radio',
|
||||
label: 'Radio 5',
|
||||
value: 'value5'
|
||||
},
|
||||
{
|
||||
name: 'radio6',
|
||||
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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
async presentAlertCheckbox() {
|
||||
const alert = await alertController.create({
|
||||
header: 'Checkbox',
|
||||
inputs: [
|
||||
{
|
||||
name: 'checkbox1',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 1',
|
||||
value: 'value1',
|
||||
checked: true
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox2',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 2',
|
||||
value: 'value2'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox3',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 3',
|
||||
value: 'value3'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox4',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 4',
|
||||
value: 'value4'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox5',
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 5',
|
||||
value: 'value5'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'checkbox6',
|
||||
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');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-content>
|
||||
<ion-button onClick={() => this.presentAlert()}>Present Alert</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertConfirm()}>Present Alert: Confirm</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertPrompt()}>Present Alert: Prompt</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertRadio()}>Present Alert: Radio</ion-button>
|
||||
<ion-button onClick={() => this.presentAlertCheckbox()}>Present Alert: Checkbox</ion-button>
|
||||
</ion-content>
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user