javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(alert): add input handler to usage examples (#23131)

Browse Source
This commit is contained in:
William Martin
2021-04-02 12:58:59 -04:00
committed by GitHub
parent f4eb4b34d6
commit ef1a82f64a
6 changed files with 440 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
core/src/components/alert/readme.md
View File

@@ -204,37 +204,55 @@ export class AlertExample {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
],
buttons: [
@@ -267,6 +285,9 @@ export class AlertExample {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
@@ -274,35 +295,50 @@ export class AlertExample {
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
],
buttons: [
@@ -474,32 +510,50 @@ function presentAlertRadio() {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
];
alert.buttons = [
@@ -530,37 +584,55 @@ function presentAlertCheckbox() {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
{
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
];
alert.buttons = [
@@ -780,37 +852,55 @@ export const AlertExample: React.FC = () => {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
name: 'radio6',
type: 'radio',
label: 'Radio 6',
value: 'value6'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
]}
buttons={[
@@ -842,37 +932,55 @@ export const AlertExample: React.FC = () => {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
{
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
name: 'checkbox6',
type: 'checkbox',
label: 'Checkbox 6',
value: 'value6'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
]}
buttons={[
@@ -1055,37 +1163,55 @@ export class AlertExample {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
],
buttons: [
@@ -1118,42 +1244,59 @@ export class AlertExample {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
{
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
],
buttons: [
@@ -1346,32 +1489,50 @@ export default defineComponent({
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true,
},
{
type: 'radio',
label: 'Radio 2',
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
type: 'radio',
label: 'Radio 3',
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
type: 'radio',
label: 'Radio 4',
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
type: 'radio',
label: 'Radio 5',
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
type: 'radio',
label: 'Radio 6',
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
},
],
buttons: [
@@ -1404,6 +1565,9 @@ export default defineComponent({
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true,
},
@@ -1411,30 +1575,45 @@ export default defineComponent({
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 6',
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
},
],
buttons: [

56
core/src/components/alert/usage/angular.md
View File

@@ -153,37 +153,55 @@ export class AlertExample {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
],
buttons: [
@@ -216,6 +234,9 @@ export class AlertExample {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
@@ -223,35 +244,50 @@ export class AlertExample {
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
],
buttons: [

56
core/src/components/alert/usage/javascript.md
View File

@@ -137,32 +137,50 @@ function presentAlertRadio() {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
];
alert.buttons = [
@@ -193,37 +211,55 @@ function presentAlertCheckbox() {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
{
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
];
alert.buttons = [

56
core/src/components/alert/usage/react.md
View File

@@ -191,37 +191,55 @@ export const AlertExample: React.FC = () => {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
name: 'radio6',
type: 'radio',
label: 'Radio 6',
value: 'value6'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
]}
buttons={[
@@ -253,37 +271,55 @@ export const AlertExample: React.FC = () => {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
{
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
name: 'checkbox6',
type: 'checkbox',
label: 'Checkbox 6',
value: 'value6'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
]}
buttons={[

57
core/src/components/alert/usage/stencil.md
View File

@@ -150,37 +150,55 @@ export class AlertExample {
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
}
],
buttons: [
@@ -213,42 +231,59 @@ export class AlertExample {
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true
},
{
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
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'
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
}
],
buttons: [

36
core/src/components/alert/usage/vue.md
View File

@@ -149,32 +149,50 @@ export default defineComponent({
type: 'radio',
label: 'Radio 1',
value: 'value1',
handler: () => {
console.log('Radio 1 selected');
},
checked: true,
},
{
type: 'radio',
label: 'Radio 2',
value: 'value2',
handler: () => {
console.log('Radio 2 selected');
}
},
{
type: 'radio',
label: 'Radio 3',
value: 'value3',
handler: () => {
console.log('Radio 3 selected');
}
},
{
type: 'radio',
label: 'Radio 4',
value: 'value4',
handler: () => {
console.log('Radio 4 selected');
}
},
{
type: 'radio',
label: 'Radio 5',
value: 'value5',
handler: () => {
console.log('Radio 5 selected');
}
},
{
type: 'radio',
label: 'Radio 6',
value: 'value6',
handler: () => {
console.log('Radio 6 selected');
}
},
],
buttons: [
@@ -207,6 +225,9 @@ export default defineComponent({
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
handler: () => {
console.log('Checkbox 1 selected');
},
checked: true,
},
@@ -214,30 +235,45 @@ export default defineComponent({
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2',
handler: () => {
console.log('Checkbox 2 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3',
handler: () => {
console.log('Checkbox 3 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4',
handler: () => {
console.log('Checkbox 4 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5',
handler: () => {
console.log('Checkbox 5 selected');
}
},
{
type: 'checkbox',
label: 'Checkbox 6',
value: 'value6',
handler: () => {
console.log('Checkbox 6 selected');
}
},
],
buttons: [