javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(react): updating react input usages with binding examples (#20557)

Browse Source
This commit is contained in:
Ely Lucas
2020-02-19 17:49:53 -07:00
committed by GitHub
parent fa9b78e775
commit 972e361bdc
18 changed files with 1321 additions and 943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
core/src/components/checkbox/readme.md
View File

@ -98,44 +98,58 @@ export class HomePage {
### React
```tsx
import React from 'react';
import { IonCheckbox, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
const form = [
const checkboxList = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
export const CheckboxExample: React.FC = () => (
export const CheckboxExamples: React.FC = () => {
const [checked, setChecked] = useState(false);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>CheckboxExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default Checkbox --*/}
<IonCheckbox />
{/*-- Disabled Checkbox --*/}
<IonCheckbox disabled={true} />
{/*-- Checked Checkbox --*/}
<IonCheckbox checked={true} />
{/*-- Checkbox Colors --*/}
<IonCheckbox color="primary" />
<IonCheckbox color="secondary" />
<IonCheckbox color="danger" />
<IonCheckbox color="light" />
<IonCheckbox color="dark" />
{/*-- Checkboxes in a List --*/}
<IonList>
{ form.map(({val, isChecked}) => (
<IonItem key={val}>
<IonItemDivider>Default Checkbox</IonItemDivider>
<IonItem>
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
<IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
</IonItem>
<IonItemDivider>Disabled Checkbox</IonItemDivider>
<IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
<IonItemDivider>Checkbox Colors</IonItemDivider>
<IonItem>
<IonCheckbox slot="end" color="primary" />
<IonCheckbox slot="end" color="secondary" />
<IonCheckbox slot="end" color="danger" />
<IonCheckbox slot="end" color="light" />
<IonCheckbox slot="end" color="dark" />
</IonItem>
<IonItemDivider>Checkboxes in a List</IonItemDivider>
{checkboxList.map(({ val, isChecked }, i) => (
<IonItem key={i}>
<IonLabel>{val}</IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
</IonItem>
))}
</IonList>
</IonContent>
</IonPage>
);
};
```

60
core/src/components/checkbox/usage/react.md
View File

@ -1,40 +1,54 @@
```tsx
import React from 'react';
import { IonCheckbox, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
const form = [
const checkboxList = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
export const CheckboxExample: React.FC = () => (
export const CheckboxExamples: React.FC = () => {
const [checked, setChecked] = useState(false);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>CheckboxExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default Checkbox --*/}
<IonCheckbox />
{/*-- Disabled Checkbox --*/}
<IonCheckbox disabled={true} />
{/*-- Checked Checkbox --*/}
<IonCheckbox checked={true} />
{/*-- Checkbox Colors --*/}
<IonCheckbox color="primary" />
<IonCheckbox color="secondary" />
<IonCheckbox color="danger" />
<IonCheckbox color="light" />
<IonCheckbox color="dark" />
{/*-- Checkboxes in a List --*/}
<IonList>
{ form.map(({val, isChecked}) => (
<IonItem key={val}>
<IonItemDivider>Default Checkbox</IonItemDivider>
<IonItem>
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
<IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
</IonItem>
<IonItemDivider>Disabled Checkbox</IonItemDivider>
<IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
<IonItemDivider>Checkbox Colors</IonItemDivider>
<IonItem>
<IonCheckbox slot="end" color="primary" />
<IonCheckbox slot="end" color="secondary" />
<IonCheckbox slot="end" color="danger" />
<IonCheckbox slot="end" color="light" />
<IonCheckbox slot="end" color="dark" />
</IonItem>
<IonItemDivider>Checkboxes in a List</IonItemDivider>
{checkboxList.map(({ val, isChecked }, i) => (
<IonItem key={i}>
<IonLabel>{val}</IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
</IonItem>
))}
</IonList>
</IonContent>
</IonPage>
);
};
```

52
core/src/components/datetime/readme.md
View File

@ -415,8 +415,8 @@ customPickerOptions.pickerOptions = customPickerButtons;
### React
```tsx
import React from 'react';
import { IonItem, IonLabel, IonDatetime, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonDatetime, IonFooter } from '@ionic/react';
const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
@ -430,21 +430,29 @@ const customDayShortNames = [
'l\u00f8r'
];
export const DateTimeExample: React.FC = () => (
export const DateTimeExamples: React.FC = () => {
const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>IonDatetime Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonItem>
<IonLabel>MMMM</IonLabel>
<IonDatetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></IonDatetime>
<IonDatetime displayFormat="MMMM" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>MM DD YY</IonLabel>
<IonDatetime displayFormat="MM DD YY" placeholder="Select Date"></IonDatetime>
<IonDatetime displayFormat="MM DD YY" placeholder="Select Date" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>Disabled</IonLabel>
<IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></IonDatetime>
<IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
@ -463,64 +471,66 @@ export const DateTimeExample: React.FC = () => (
}
]
}}
placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></IonDatetime>
placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"
value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>
</IonDatetime>
</IonItem>
<IonItem>
<IonLabel position="stacked">MMMM YY</IonLabel>
<IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></IonDatetime>
<IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel position="floating">MM/DD/YYYY</IonLabel>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></IonDatetime>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel position="floating">MM/DD/YYYY</IonLabel>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></IonDatetime>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>
<IonDatetime
value="1995-04-15"
min="1990-02"
max="2000"
dayShortNames={customDayShortNames}
displayFormat="DDD. MMM DD, YY"
monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>D MMM YYYY H:mm</IonLabel>
<IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></IonDatetime>
<IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>DDDD MMM D, YYYY</IonLabel>
<IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></IonDatetime>
<IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>HH:mm</IonLabel>
<IonDatetime displayFormat="HH:mm"></IonDatetime>
<IonDatetime displayFormat="HH:mm" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>h:mm a</IonLabel>
<IonDatetime displayFormat="h:mm a"></IonDatetime>
<IonDatetime displayFormat="h:mm a" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>hh:mm A (15 min steps)</IonLabel>
<IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45"></IonDatetime>
<IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>Leap years, summer months</IonLabel>
<IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues}></IonDatetime>
<IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues} value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
@ -530,10 +540,18 @@ export const DateTimeExample: React.FC = () => (
yearValues='2014,2015'
dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"
displayFormat="DD/MMM/YYYY"
value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
></IonDatetime>
</IonItem>
</IonContent>
<IonFooter>
<IonToolbar>
Selected Date: {selectedDate ?? '(none)'}
</IonToolbar>
</IonFooter>
</IonPage>
);
};
```

52
core/src/components/datetime/usage/react.md
View File

@ -1,6 +1,6 @@
```tsx
import React from 'react';
import { IonItem, IonLabel, IonDatetime, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonDatetime, IonFooter } from '@ionic/react';
const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
@ -14,21 +14,29 @@ const customDayShortNames = [
'l\u00f8r'
];
export const DateTimeExample: React.FC = () => (
export const DateTimeExamples: React.FC = () => {
const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>IonDatetime Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonItem>
<IonLabel>MMMM</IonLabel>
<IonDatetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></IonDatetime>
<IonDatetime displayFormat="MMMM" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>MM DD YY</IonLabel>
<IonDatetime displayFormat="MM DD YY" placeholder="Select Date"></IonDatetime>
<IonDatetime displayFormat="MM DD YY" placeholder="Select Date" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>Disabled</IonLabel>
<IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></IonDatetime>
<IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
@ -47,64 +55,66 @@ export const DateTimeExample: React.FC = () => (
}
]
}}
placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></IonDatetime>
placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"
value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>
</IonDatetime>
</IonItem>
<IonItem>
<IonLabel position="stacked">MMMM YY</IonLabel>
<IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></IonDatetime>
<IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel position="floating">MM/DD/YYYY</IonLabel>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></IonDatetime>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel position="floating">MM/DD/YYYY</IonLabel>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></IonDatetime>
<IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>
<IonDatetime
value="1995-04-15"
min="1990-02"
max="2000"
dayShortNames={customDayShortNames}
displayFormat="DDD. MMM DD, YY"
monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>D MMM YYYY H:mm</IonLabel>
<IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></IonDatetime>
<IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>DDDD MMM D, YYYY</IonLabel>
<IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></IonDatetime>
<IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>HH:mm</IonLabel>
<IonDatetime displayFormat="HH:mm"></IonDatetime>
<IonDatetime displayFormat="HH:mm" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>h:mm a</IonLabel>
<IonDatetime displayFormat="h:mm a"></IonDatetime>
<IonDatetime displayFormat="h:mm a" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>hh:mm A (15 min steps)</IonLabel>
<IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45"></IonDatetime>
<IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45" value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
<IonLabel>Leap years, summer months</IonLabel>
<IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues}></IonDatetime>
<IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues} value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}></IonDatetime>
</IonItem>
<IonItem>
@ -114,8 +124,16 @@ export const DateTimeExample: React.FC = () => (
yearValues='2014,2015'
dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14"
displayFormat="DD/MMM/YYYY"
value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}
></IonDatetime>
</IonItem>
</IonContent>
<IonFooter>
<IonToolbar>
Selected Date: {selectedDate ?? '(none)'}
</IonToolbar>
</IonFooter>
</IonPage>
);
};
```

64
core/src/components/input/readme.md
View File

@ -107,33 +107,50 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
### React
```tsx
import React from 'react';
import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react';
export const InputExample: React.FC = () => (
export const InputExamples: React.FC = () => {
const [text, setText] = useState<string>();
const [number, setNumber] = useState<number>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>IonInput Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default Input --*/}
<IonInput></IonInput>
<IonList>
<IonItemDivider>Default Input with Placeholder</IonItemDivider>
<IonItem>
<IonInput value={text} placeholder="Enter Input" onIonChange={e => setText(e.detail.value!)}></IonInput>
</IonItem>
{/*-- Input with value --*/}
<IonInput value="custom"></IonInput>
<IonItemDivider>Input with clear button when there is a value</IonItemDivider>
<IonItem>
<IonInput value={text} placeholder="Enter Input" onIonChange={e => setText(e.detail.value!)} clearInput></IonInput>
</IonItem>
{/*-- Input with placeholder --*/}
<IonInput placeholder="Enter Input"></IonInput>
<IonItemDivider>Number type input</IonItemDivider>
<IonItem>
<IonInput type="number" value={number} placeholder="Enter Number" onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}></IonInput>
</IonItem>
{/*-- Input with clear button when there is a value --*/}
<IonInput clearInput value="clear me"></IonInput>
<IonItemDivider>Disabled input</IonItemDivider>
<IonItem>
<IonInput value={text} disabled></IonInput>
</IonItem>
{/*-- Number type input --*/}
<IonInput type="number" value="333"></IonInput>
<IonItemDivider>Readonly input</IonItemDivider>
<IonItem>
<IonInput value={text} readonly></IonInput>
</IonItem>
{/*-- Disabled input --*/}
<IonInput value="Disabled" disabled></IonInput>
<IonItemDivider>Inputs with labels</IonItemDivider>
{/*-- Readonly input --*/}
<IonInput value="Readonly" readonly></IonInput>
{/*-- Inputs with labels --*/}
<IonItem>
<IonLabel>Default Label</IonLabel>
<IonInput></IonInput>
@ -141,20 +158,23 @@ export const InputExample: React.FC = () => (
<IonItem>
<IonLabel position="floating">Floating Label</IonLabel>
<IonInput></IonInput>
<IonInput value={text}></IonInput>
</IonItem>
<IonItem>
<IonLabel position="fixed">Fixed Label</IonLabel>
<IonInput></IonInput>
<IonInput value={text}></IonInput>
</IonItem>
<IonItem>
<IonLabel position="stacked">Stacked Label</IonLabel>
<IonInput></IonInput>
<IonInput value={text}> </IonInput>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

64
core/src/components/input/usage/react.md
View File

@ -1,31 +1,48 @@
```tsx
import React from 'react';
import { IonInput, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react';
export const InputExample: React.FC = () => (
export const InputExamples: React.FC = () => {
const [text, setText] = useState<string>();
const [number, setNumber] = useState<number>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>IonInput Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default Input --*/}
<IonInput></IonInput>
<IonList>
<IonItemDivider>Default Input with Placeholder</IonItemDivider>
<IonItem>
<IonInput value={text} placeholder="Enter Input" onIonChange={e => setText(e.detail.value!)}></IonInput>
</IonItem>
{/*-- Input with value --*/}
<IonInput value="custom"></IonInput>
<IonItemDivider>Input with clear button when there is a value</IonItemDivider>
<IonItem>
<IonInput value={text} placeholder="Enter Input" onIonChange={e => setText(e.detail.value!)} clearInput></IonInput>
</IonItem>
{/*-- Input with placeholder --*/}
<IonInput placeholder="Enter Input"></IonInput>
<IonItemDivider>Number type input</IonItemDivider>
<IonItem>
<IonInput type="number" value={number} placeholder="Enter Number" onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}></IonInput>
</IonItem>
{/*-- Input with clear button when there is a value --*/}
<IonInput clearInput value="clear me"></IonInput>
<IonItemDivider>Disabled input</IonItemDivider>
<IonItem>
<IonInput value={text} disabled></IonInput>
</IonItem>
{/*-- Number type input --*/}
<IonInput type="number" value="333"></IonInput>
<IonItemDivider>Readonly input</IonItemDivider>
<IonItem>
<IonInput value={text} readonly></IonInput>
</IonItem>
{/*-- Disabled input --*/}
<IonInput value="Disabled" disabled></IonInput>
<IonItemDivider>Inputs with labels</IonItemDivider>
{/*-- Readonly input --*/}
<IonInput value="Readonly" readonly></IonInput>
{/*-- Inputs with labels --*/}
<IonItem>
<IonLabel>Default Label</IonLabel>
<IonInput></IonInput>
@ -33,18 +50,21 @@ export const InputExample: React.FC = () => (
<IonItem>
<IonLabel position="floating">Floating Label</IonLabel>
<IonInput></IonInput>
<IonInput value={text}></IonInput>
</IonItem>
<IonItem>
<IonLabel position="fixed">Fixed Label</IonLabel>
<IonInput></IonInput>
<IonInput value={text}></IonInput>
</IonItem>
<IonItem>
<IonLabel position="stacked">Stacked Label</IonLabel>
<IonInput></IonInput>
<IonInput value={text}> </IonInput>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

20
core/src/components/radio/readme.md
View File

@ -43,13 +43,21 @@ When radios are inside of a radio group, only one radio in the group will be che
### React
```tsx
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react';
export const RadioExample: React.FC = () => (
export const RadioExamples: React.FC = () => {
const [selected, setSelected] = useState<string>('biff');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Radio Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonRadioGroup value="biff">
<IonRadioGroup value={selected} onIonChange={e => setSelected(e.detail.value)}>
<IonListHeader>
<IonLabel>Name</IonLabel>
</IonListHeader>
@ -69,9 +77,13 @@ export const RadioExample: React.FC = () => (
<IonRadio slot="start" value="buford" />
</IonItem>
</IonRadioGroup>
<IonItemDivider>Your Selection</IonItemDivider>
<IonItem>{selected ?? '(none selected'}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

20
core/src/components/radio/usage/react.md
View File

@ -1,11 +1,19 @@
```tsx
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react';
export const RadioExample: React.FC = () => (
export const RadioExamples: React.FC = () => {
const [selected, setSelected] = useState<string>('biff');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Radio Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonRadioGroup value="biff">
<IonRadioGroup value={selected} onIonChange={e => setSelected(e.detail.value)}>
<IonListHeader>
<IonLabel>Name</IonLabel>
</IonListHeader>
@ -25,7 +33,11 @@ export const RadioExample: React.FC = () => (
<IonRadio slot="start" value="buford" />
</IonItem>
</IonRadioGroup>
<IonItemDivider>Your Selection</IonItemDivider>
<IonItem>{selected ?? '(none selected'}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

44
core/src/components/range/readme.md
View File

@ -94,16 +94,37 @@ left or right of the range.
### React
```tsx
import React from 'react';
import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react';
import { sunny } from 'ionicons/icons';
import { RangeValue } from '@ionic/core';
export const RangeExample: React.FC = () => (
export const RangeExamples: React.FC = () => {
const [value, setValue] = useState(0);
const [rangeValue, setRangeValue] = useState<{
lower: number;
upper: number;
}>({ lower: 0, upper: 0 });
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>IonRange Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItemDivider>Default</IonItemDivider>
<IonItem>
<IonRange color="danger" pin={true} />
<IonRange pin={true} value={value} onIonChange={e => setValue(e.detail.value as number)} />
</IonItem>
<IonItem>
<IonLabel>Value: {value}</IonLabel>
</IonItem>
<IonItemDivider>Min & Max</IonItemDivider>
<IonItem>
<IonRange min={-200} max={200} color="secondary">
<IonLabel slot="start">-200</IonLabel>
@ -111,27 +132,36 @@ export const RangeExample: React.FC = () => (
</IonRange>
</IonItem>
<IonItemDivider>Icons</IonItemDivider>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
<IonIcon size="small" slot="start" icon={sunny} />
<IonIcon slot="end" icon={sunny} />
</IonRange>
</IonItem>
<IonItemDivider>With Snaps & Ticks</IonItemDivider>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary" />
</IonItem>
<IonItemDivider>With Snaps & No Ticks</IonItemDivider>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary" />
</IonItem>
<IonItemDivider>Dual Knobs</IonItemDivider>
<IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true} />
<IonRange dualKnobs={true} min={0} max={60} step={3} snaps={true} onIonChange={e => setRangeValue(e.detail.value as any)} />
</IonItem>
<IonItem>
<IonLabel>Value: lower: {rangeValue.lower} upper: {rangeValue.upper}</IonLabel>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

44
core/src/components/range/usage/react.md
View File

@ -1,14 +1,35 @@
```tsx
import React from 'react';
import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react';
import { sunny } from 'ionicons/icons';
import { RangeValue } from '@ionic/core';
export const RangeExample: React.FC = () => (
export const RangeExamples: React.FC = () => {
const [value, setValue] = useState(0);
const [rangeValue, setRangeValue] = useState<{
lower: number;
upper: number;
}>({ lower: 0, upper: 0 });
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>IonRange Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItemDivider>Default</IonItemDivider>
<IonItem>
<IonRange color="danger" pin={true} />
<IonRange pin={true} value={value} onIonChange={e => setValue(e.detail.value as number)} />
</IonItem>
<IonItem>
<IonLabel>Value: {value}</IonLabel>
</IonItem>
<IonItemDivider>Min & Max</IonItemDivider>
<IonItem>
<IonRange min={-200} max={200} color="secondary">
<IonLabel slot="start">-200</IonLabel>
@ -16,25 +37,34 @@ export const RangeExample: React.FC = () => (
</IonRange>
</IonItem>
<IonItemDivider>Icons</IonItemDivider>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
<IonIcon size="small" slot="start" icon={sunny} />
<IonIcon slot="end" icon={sunny} />
</IonRange>
</IonItem>
<IonItemDivider>With Snaps & Ticks</IonItemDivider>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary" />
</IonItem>
<IonItemDivider>With Snaps & No Ticks</IonItemDivider>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary" />
</IonItem>
<IonItemDivider>Dual Knobs</IonItemDivider>
<IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true} />
<IonRange dualKnobs={true} min={0} max={60} step={3} snaps={true} onIonChange={e => setRangeValue(e.detail.value as any)} />
</IonItem>
<IonItem>
<IonLabel>Value: lower: {rangeValue.lower} upper: {rangeValue.upper}</IonLabel>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

103
core/src/components/searchbar/readme.md
View File

@ -121,56 +121,69 @@ By default, tapping the input will cause the keyboard to appear with the text "r
### React
```tsx
import React from 'react';
import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react';
export const SearchbarExample: React.FC = () => (
<IonContent>
{/*-- Default Searchbar --*/}
<IonSearchbar></IonSearchbar>
{/*-- Searchbar with cancel button always shown --*/}
<IonSearchbar showCancelButton="always"></IonSearchbar>
{/*-- Searchbar with cancel button never shown --*/}
<IonSearchbar showCancelButton="never"></IonSearchbar>
{/*-- Searchbar with cancel button shown on focus --*/}
<IonSearchbar showCancelButton="focus"></IonSearchbar>
{/*-- Searchbar with danger color --*/}
<IonSearchbar color="danger"></IonSearchbar>
{/*-- Searchbar with value --*/}
<IonSearchbar value="Ionic"></IonSearchbar>
{/*-- Searchbar with telephone type --*/}
<IonSearchbar type="tel"></IonSearchbar>
{/*-- Searchbar with numeric inputmode --*/}
<IonSearchbar inputmode="numeric"></IonSearchbar>
{/*-- Searchbar disabled --*/}
<IonSearchbar disabled={true}></IonSearchbar>
{/*-- Searchbar with a cancel button and custom cancel button text --*/}
<IonSearchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
{/*-- Searchbar with a custom debounce --*/}
<IonSearchbar debounce={500}></IonSearchbar>
{/*-- Animated Searchbar --*/}
<IonSearchbar animated></IonSearchbar>
{/*-- Searchbar with a placeholder --*/}
<IonSearchbar placeholder="Filter Schedules"></IonSearchbar>
{/*-- Searchbar in a Toolbar --*/}
export const SearchBarExamples: React.FC = () => {
const [searchText, setSearchText] = useState('');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonSearchbar></IonSearchbar>
<IonTitle>IonSearchBar Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<p>Default Searchbar</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
<p>Searchbar with cancel button always shown</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="always"></IonSearchbar>
<p>Searchbar with cancel button never shown</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="never"></IonSearchbar>
<p>Searchbar with cancel button shown on focus</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus"></IonSearchbar>
<p>Searchbar with danger color</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} color="danger"></IonSearchbar>
<p>Searchbar with telephone type</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} type="tel"></IonSearchbar>
<p>Searchbar with numeric inputmode</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} inputmode="numeric"></IonSearchbar>
<p>Searchbar disabled </p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} disabled={true}></IonSearchbar>
<p>Searchbar with a cancel button and custom cancel button text</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
<p>Searchbar with a custom debounce - Note: debounce only works on onIonChange event</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} debounce={1000}></IonSearchbar>
<p>Animated Searchbar</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} animated></IonSearchbar>
<p>Searchbar with a placeholder</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} placeholder="Filter Schedules"></IonSearchbar>
<p>Searchbar in a Toolbar</p>
<IonToolbar>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
</IonToolbar>
</IonContent>
<IonFooter>
<IonToolbar>
Search Text: {searchText ?? '(none)'}
</IonToolbar>
</IonFooter>
</IonPage>
);
};
```

103
core/src/components/searchbar/usage/react.md
View File

@ -1,52 +1,65 @@
```tsx
import React from 'react';
import { IonSearchbar, IonToolbar, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react';
export const SearchbarExample: React.FC = () => (
<IonContent>
{/*-- Default Searchbar --*/}
<IonSearchbar></IonSearchbar>
{/*-- Searchbar with cancel button always shown --*/}
<IonSearchbar showCancelButton="always"></IonSearchbar>
{/*-- Searchbar with cancel button never shown --*/}
<IonSearchbar showCancelButton="never"></IonSearchbar>
{/*-- Searchbar with cancel button shown on focus --*/}
<IonSearchbar showCancelButton="focus"></IonSearchbar>
{/*-- Searchbar with danger color --*/}
<IonSearchbar color="danger"></IonSearchbar>
{/*-- Searchbar with value --*/}
<IonSearchbar value="Ionic"></IonSearchbar>
{/*-- Searchbar with telephone type --*/}
<IonSearchbar type="tel"></IonSearchbar>
{/*-- Searchbar with numeric inputmode --*/}
<IonSearchbar inputmode="numeric"></IonSearchbar>
{/*-- Searchbar disabled --*/}
<IonSearchbar disabled={true}></IonSearchbar>
{/*-- Searchbar with a cancel button and custom cancel button text --*/}
<IonSearchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
{/*-- Searchbar with a custom debounce --*/}
<IonSearchbar debounce={500}></IonSearchbar>
{/*-- Animated Searchbar --*/}
<IonSearchbar animated></IonSearchbar>
{/*-- Searchbar with a placeholder --*/}
<IonSearchbar placeholder="Filter Schedules"></IonSearchbar>
{/*-- Searchbar in a Toolbar --*/}
export const SearchBarExamples: React.FC = () => {
const [searchText, setSearchText] = useState('');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonSearchbar></IonSearchbar>
<IonTitle>IonSearchBar Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<p>Default Searchbar</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
<p>Searchbar with cancel button always shown</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="always"></IonSearchbar>
<p>Searchbar with cancel button never shown</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="never"></IonSearchbar>
<p>Searchbar with cancel button shown on focus</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus"></IonSearchbar>
<p>Searchbar with danger color</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} color="danger"></IonSearchbar>
<p>Searchbar with telephone type</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} type="tel"></IonSearchbar>
<p>Searchbar with numeric inputmode</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} inputmode="numeric"></IonSearchbar>
<p>Searchbar disabled </p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} disabled={true}></IonSearchbar>
<p>Searchbar with a cancel button and custom cancel button text</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
<p>Searchbar with a custom debounce - Note: debounce only works on onIonChange event</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} debounce={1000}></IonSearchbar>
<p>Animated Searchbar</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} animated></IonSearchbar>
<p>Searchbar with a placeholder</p>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} placeholder="Filter Schedules"></IonSearchbar>
<p>Searchbar in a Toolbar</p>
<IonToolbar>
<IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
</IonToolbar>
</IonContent>
<IonFooter>
<IonToolbar>
Search Text: {searchText ?? '(none)'}
</IonToolbar>
</IonFooter>
</IonPage>
);
};
```

123
core/src/components/select/readme.md
View File

@ -466,10 +466,16 @@ customActionSheetSelect.interfaceOptions = customActionSheetOptions;
## Single Selection
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
export const SelectExample: React.FC = () => (
export const SingleSelection: React.FC = () => {
const [gender, setGender] = useState<string>();
const [hairColor, setHairColor] = useState<string>('brown');
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -480,34 +486,45 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Gender</IonLabel>
<IonSelect placeholder="Select One">
<IonSelectOption value="f">Female</IonSelectOption>
<IonSelectOption value="m">Male</IonSelectOption>
<IonSelect value={gender} placeholder="Select One" onIonChange={e => setGender(e.detail.value)}>
<IonSelectOption value="female">Female</IonSelectOption>
<IonSelectOption value="male">Male</IonSelectOption>
</IonSelect>
</IonItem>
<IonItem>
<IonLabel>Hair Color</IonLabel>
<IonSelect value="brown" okText="Okay" cancelText="Dismiss">
<IonSelect value={hairColor} okText="Okay" cancelText="Dismiss" onIonChange={e => setHairColor(e.detail.value)}>
<IonSelectOption value="brown">Brown</IonSelectOption>
<IonSelectOption value="blonde">Blonde</IonSelectOption>
<IonSelectOption value="black">Black</IonSelectOption>
<IonSelectOption value="red">Red</IonSelectOption>
</IonSelect>
</IonItem>
<IonItemDivider>Your Selections</IonItemDivider>
<IonItem>Gender: {gender ?? '(none selected)'}</IonItem>
<IonItem>Hair Color: {hairColor}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```
## Multiple Selection
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
export const SelectExample: React.FC = () => (
export const MultipleSelection: React.FC = () => {
const [toppings, setToppings] = useState<string[]>([]);
const [pets, setPets] = useState<string[]>(['bird', 'dog']);
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -518,7 +535,7 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Toppings</IonLabel>
<IonSelect multiple={true} cancelText="Nah" okText="Okay!">
<IonSelect value={toppings} multiple={true} cancelText="Nah" okText="Okay!" onIonChange={e => setToppings(e.detail.value)}>
<IonSelectOption value="bacon">Bacon</IonSelectOption>
<IonSelectOption value="olives">Black Olives</IonSelectOption>
<IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>
@ -534,30 +551,31 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Pets</IonLabel>
<IonSelect multiple={true} value={['bird', 'dog']}>
<IonSelectOption value="bird">
Bird
</IonSelectOption>
<IonSelect multiple={true} value={pets} onIonChange={e => setPets(e.detail.value)}>
<IonSelectOption value="bird">Bird</IonSelectOption>
<IonSelectOption value="cat">Cat</IonSelectOption>
<IonSelectOption value="dog">
Dog
</IonSelectOption>
<IonSelectOption value="dog">Dog</IonSelectOption>
<IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>
</IonSelect>
</IonItem>
<IonItemDivider>Your Selections</IonItemDivider>
<IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
<IonItem>Pets: {pets.length ? pets.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```
## Objects as Values
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
const objectOptions = [
const users = [
{
id: 1,
first: 'Alice',
@ -571,15 +589,22 @@ const objectOptions = [
{
id: 3,
first: 'Charlie',
last: 'Rosenburg'
last: 'Rosenburg',
}
];
const compareWith = (o1: any, o2: any) => {
type User = typeof users[number];
const compareWith = (o1: User, o2: User) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FC = () => (
export const ObjectSelection: React.FC = () => {
const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -589,27 +614,32 @@ export const SelectExample: React.FC = () => (
</IonListHeader>
<IonItem>
<IonLabel>Users</IonLabel>
<IonSelect compareWith={compareWith}>
{objectOptions.map((object, i) => {
return (
<IonSelectOption key={object.id} value={object.id}>
{object.first} {object.last}
<IonSelect compareWith={compareWith} value={selectedUsers} multiple onIonChange={e => setSelectedUsers(e.detail.value)}>
{users.map(user => (
<IonSelectOption key={user.id} value={user}>
{user.first} {user.last}
</IonSelectOption>
);
})}
))}
</IonSelect>
</IonItem>
<IonItemDivider>Selected Users</IonItemDivider>
{selectedUsers.length ?
selectedUsers.map(user => <IonItem key={user.id}>{user.first} {user.last}</IonItem>) :
<IonItem>(none selected)</IonItem>
}
</IonList>
</IonContent>
</IonPage>
);
};
```
## Interface Options
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
const customAlertOptions = {
header: 'Pizza Toppings',
@ -629,7 +659,14 @@ const customActionSheetOptions = {
subHeader: 'Select your favorite color'
};
export const SelectExample: React.FC = () => (
export const InterfaceOptionsSelection: React.FC = () => {
const [toppings, setToppings] = useState<string[]>([]);
const [hairColor, setHairColor] = useState<string>('brown');
const [color, setColor] = useState<string>();
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -645,6 +682,8 @@ export const SelectExample: React.FC = () => (
interface="alert"
multiple={true}
placeholder="Select One"
onIonChange={e => setToppings(e.detail.value)}
value={toppings}
>
<IonSelectOption value="bacon">Bacon</IonSelectOption>
<IonSelectOption value="olives">Black Olives</IonSelectOption>
@ -661,7 +700,12 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Popover</IonLabel>
<IonSelect interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
<IonSelect
interfaceOptions={customPopoverOptions}
interface="popover"
placeholder="Select One"
onIonChange={e => setHairColor(e.detail.value)}
value={hairColor}>
<IonSelectOption value="brown">Brown</IonSelectOption>
<IonSelectOption value="blonde">Blonde</IonSelectOption>
<IonSelectOption value="black">Black</IonSelectOption>
@ -675,6 +719,8 @@ export const SelectExample: React.FC = () => (
interfaceOptions={customActionSheetOptions}
interface="action-sheet"
placeholder="Select One"
onIonChange={e => setColor(e.detail.value)}
value={color}
>
<IonSelectOption value="red">Red</IonSelectOption>
<IonSelectOption value="purple">Purple</IonSelectOption>
@ -683,9 +729,16 @@ export const SelectExample: React.FC = () => (
<IonSelectOption value="green">Green</IonSelectOption>
</IonSelect>
</IonItem>
<IonItemDivider>Your Selections</IonItemDivider>
<IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
<IonItem>Hair Color: {hairColor}</IonItem>
<IonItem>Color: {color ?? '(none selected)'}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

123
core/src/components/select/usage/react.md
View File

@ -1,10 +1,16 @@
## Single Selection
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
export const SelectExample: React.FC = () => (
export const SingleSelection: React.FC = () => {
const [gender, setGender] = useState<string>();
const [hairColor, setHairColor] = useState<string>('brown');
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -15,34 +21,45 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Gender</IonLabel>
<IonSelect placeholder="Select One">
<IonSelectOption value="f">Female</IonSelectOption>
<IonSelectOption value="m">Male</IonSelectOption>
<IonSelect value={gender} placeholder="Select One" onIonChange={e => setGender(e.detail.value)}>
<IonSelectOption value="female">Female</IonSelectOption>
<IonSelectOption value="male">Male</IonSelectOption>
</IonSelect>
</IonItem>
<IonItem>
<IonLabel>Hair Color</IonLabel>
<IonSelect value="brown" okText="Okay" cancelText="Dismiss">
<IonSelect value={hairColor} okText="Okay" cancelText="Dismiss" onIonChange={e => setHairColor(e.detail.value)}>
<IonSelectOption value="brown">Brown</IonSelectOption>
<IonSelectOption value="blonde">Blonde</IonSelectOption>
<IonSelectOption value="black">Black</IonSelectOption>
<IonSelectOption value="red">Red</IonSelectOption>
</IonSelect>
</IonItem>
<IonItemDivider>Your Selections</IonItemDivider>
<IonItem>Gender: {gender ?? '(none selected)'}</IonItem>
<IonItem>Hair Color: {hairColor}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```
## Multiple Selection
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
export const SelectExample: React.FC = () => (
export const MultipleSelection: React.FC = () => {
const [toppings, setToppings] = useState<string[]>([]);
const [pets, setPets] = useState<string[]>(['bird', 'dog']);
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -53,7 +70,7 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Toppings</IonLabel>
<IonSelect multiple={true} cancelText="Nah" okText="Okay!">
<IonSelect value={toppings} multiple={true} cancelText="Nah" okText="Okay!" onIonChange={e => setToppings(e.detail.value)}>
<IonSelectOption value="bacon">Bacon</IonSelectOption>
<IonSelectOption value="olives">Black Olives</IonSelectOption>
<IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>
@ -69,30 +86,31 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Pets</IonLabel>
<IonSelect multiple={true} value={['bird', 'dog']}>
<IonSelectOption value="bird">
Bird
</IonSelectOption>
<IonSelect multiple={true} value={pets} onIonChange={e => setPets(e.detail.value)}>
<IonSelectOption value="bird">Bird</IonSelectOption>
<IonSelectOption value="cat">Cat</IonSelectOption>
<IonSelectOption value="dog">
Dog
</IonSelectOption>
<IonSelectOption value="dog">Dog</IonSelectOption>
<IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>
</IonSelect>
</IonItem>
<IonItemDivider>Your Selections</IonItemDivider>
<IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
<IonItem>Pets: {pets.length ? pets.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```
## Objects as Values
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
const objectOptions = [
const users = [
{
id: 1,
first: 'Alice',
@ -106,15 +124,22 @@ const objectOptions = [
{
id: 3,
first: 'Charlie',
last: 'Rosenburg'
last: 'Rosenburg',
}
];
const compareWith = (o1: any, o2: any) => {
type User = typeof users[number];
const compareWith = (o1: User, o2: User) => {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
};
export const SelectExample: React.FC = () => (
export const ObjectSelection: React.FC = () => {
const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -124,27 +149,32 @@ export const SelectExample: React.FC = () => (
</IonListHeader>
<IonItem>
<IonLabel>Users</IonLabel>
<IonSelect compareWith={compareWith}>
{objectOptions.map((object, i) => {
return (
<IonSelectOption key={object.id} value={object.id}>
{object.first} {object.last}
<IonSelect compareWith={compareWith} value={selectedUsers} multiple onIonChange={e => setSelectedUsers(e.detail.value)}>
{users.map(user => (
<IonSelectOption key={user.id} value={user}>
{user.first} {user.last}
</IonSelectOption>
);
})}
))}
</IonSelect>
</IonItem>
<IonItemDivider>Selected Users</IonItemDivider>
{selectedUsers.length ?
selectedUsers.map(user => <IonItem key={user.id}>{user.first} {user.last}</IonItem>) :
<IonItem>(none selected)</IonItem>
}
</IonList>
</IonContent>
</IonPage>
);
};
```
## Interface Options
```tsx
import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonPage, IonItemDivider } from '@ionic/react';
const customAlertOptions = {
header: 'Pizza Toppings',
@ -164,7 +194,14 @@ const customActionSheetOptions = {
subHeader: 'Select your favorite color'
};
export const SelectExample: React.FC = () => (
export const InterfaceOptionsSelection: React.FC = () => {
const [toppings, setToppings] = useState<string[]>([]);
const [hairColor, setHairColor] = useState<string>('brown');
const [color, setColor] = useState<string>();
return (
<IonPage>
<IonContent>
<IonList>
<IonListHeader>
@ -180,6 +217,8 @@ export const SelectExample: React.FC = () => (
interface="alert"
multiple={true}
placeholder="Select One"
onIonChange={e => setToppings(e.detail.value)}
value={toppings}
>
<IonSelectOption value="bacon">Bacon</IonSelectOption>
<IonSelectOption value="olives">Black Olives</IonSelectOption>
@ -196,7 +235,12 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Popover</IonLabel>
<IonSelect interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
<IonSelect
interfaceOptions={customPopoverOptions}
interface="popover"
placeholder="Select One"
onIonChange={e => setHairColor(e.detail.value)}
value={hairColor}>
<IonSelectOption value="brown">Brown</IonSelectOption>
<IonSelectOption value="blonde">Blonde</IonSelectOption>
<IonSelectOption value="black">Black</IonSelectOption>
@ -210,6 +254,8 @@ export const SelectExample: React.FC = () => (
interfaceOptions={customActionSheetOptions}
interface="action-sheet"
placeholder="Select One"
onIonChange={e => setColor(e.detail.value)}
value={color}
>
<IonSelectOption value="red">Red</IonSelectOption>
<IonSelectOption value="purple">Purple</IonSelectOption>
@ -218,7 +264,14 @@ export const SelectExample: React.FC = () => (
<IonSelectOption value="green">Green</IonSelectOption>
</IonSelect>
</IonItem>
<IonItemDivider>Your Selections</IonItemDivider>
<IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
<IonItem>Hair Color: {hairColor}</IonItem>
<IonItem>Color: {color ?? '(none selected)'}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

47
core/src/components/textarea/readme.md
View File

@ -98,48 +98,63 @@ The textarea component accepts the [native textarea attributes](https://develope
### React
```tsx
import React from 'react';
import { IonTextarea, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonTextarea, IonItem, IonLabel, IonItemDivider, IonList } from '@ionic/react';
export const TextAreaExample: React.FC = () => (
export const TextAreaExamples: React.FC = () => {
const [text, setText] = useState<string>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>TextArea Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default textarea --*/}
<IonTextarea></IonTextarea>
{/*-- Textarea in an item with a placeholder --*/}
<IonList>
<IonItemDivider>Default textarea</IonItemDivider>
<IonItem>
<IonTextarea placeholder="Enter more information here..."></IonTextarea>
<IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
{/*-- Textarea in an item with a floating label --*/}
<IonItemDivider>Textarea in an item with a placeholder</IonItemDivider>
<IonItem>
<IonTextarea placeholder="Enter more information here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
<IonItemDivider>Textarea in an item with a floating label</IonItemDivider>
<IonItem>
<IonLabel position="floating">Description</IonLabel>
<IonTextarea></IonTextarea>
<IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
{/*-- Disabled and readonly textarea in an item with a stacked label --*/}
<IonItemDivider>Disabled and readonly textarea in an item with a stacked label</IonItemDivider>
<IonItem>
<IonLabel position="stacked">Summary</IonLabel>
<IonTextarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
value={text} onIonChange={e => setText(e.detail.value!)}>
</IonTextarea>
</IonItem>
{/*-- Textarea that clears the value on edit --*/}
<IonItemDivider>Textarea that clears the value on edit</IonItemDivider>
<IonItem>
<IonLabel>Comment</IonLabel>
<IonTextarea clearOnEdit={true}></IonTextarea>
<IonTextarea clearOnEdit={true} value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
{/*-- Textarea with custom number of rows and cols --*/}
<IonItemDivider>Textarea with custom number of rows and cols</IonItemDivider>
<IonItem>
<IonLabel>Notes</IonLabel>
<IonTextarea rows={6} cols={20} placeholder="Enter any notes here..."></IonTextarea>
<IonTextarea rows={6} cols={20} placeholder="Enter any notes here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

47
core/src/components/textarea/usage/react.md
View File

@ -1,44 +1,59 @@
```tsx
import React from 'react';
import { IonTextarea, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonTextarea, IonItem, IonLabel, IonItemDivider, IonList } from '@ionic/react';
export const TextAreaExample: React.FC = () => (
export const TextAreaExamples: React.FC = () => {
const [text, setText] = useState<string>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>TextArea Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default textarea --*/}
<IonTextarea></IonTextarea>
{/*-- Textarea in an item with a placeholder --*/}
<IonList>
<IonItemDivider>Default textarea</IonItemDivider>
<IonItem>
<IonTextarea placeholder="Enter more information here..."></IonTextarea>
<IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
{/*-- Textarea in an item with a floating label --*/}
<IonItemDivider>Textarea in an item with a placeholder</IonItemDivider>
<IonItem>
<IonTextarea placeholder="Enter more information here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
<IonItemDivider>Textarea in an item with a floating label</IonItemDivider>
<IonItem>
<IonLabel position="floating">Description</IonLabel>
<IonTextarea></IonTextarea>
<IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
{/*-- Disabled and readonly textarea in an item with a stacked label --*/}
<IonItemDivider>Disabled and readonly textarea in an item with a stacked label</IonItemDivider>
<IonItem>
<IonLabel position="stacked">Summary</IonLabel>
<IonTextarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
value={text} onIonChange={e => setText(e.detail.value!)}>
</IonTextarea>
</IonItem>
{/*-- Textarea that clears the value on edit --*/}
<IonItemDivider>Textarea that clears the value on edit</IonItemDivider>
<IonItem>
<IonLabel>Comment</IonLabel>
<IonTextarea clearOnEdit={true}></IonTextarea>
<IonTextarea clearOnEdit={true} value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
{/*-- Textarea with custom number of rows and cols --*/}
<IonItemDivider>Textarea with custom number of rows and cols</IonItemDivider>
<IonItem>
<IonLabel>Notes</IonLabel>
<IonTextarea rows={6} cols={20} placeholder="Enter any notes here..."></IonTextarea>
<IonTextarea rows={6} cols={20} placeholder="Enter any notes here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

60
core/src/components/toggle/readme.md
View File

@ -90,46 +90,60 @@ Toggles change the state of a single option. Toggles can be switched on or off b
### React
```tsx
import React from 'react';
import { IonToggle, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
export const ToggleExample: React.FC = () => (
export const ToggleExamples: React.FC = () => {
const [checked, setChecked] = useState(false);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>ToggleExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default Toggle --*/}
<IonToggle />
{/*-- Disabled Toggle --*/}
<IonToggle disabled />
{/*-- Checked Toggle --*/}
<IonToggle checked />
{/*-- Toggle Colors --*/}
<IonToggle color="primary" />
<IonToggle color="secondary" />
<IonToggle color="danger" />
<IonToggle color="light" />
<IonToggle color="dark" />
{/*-- Toggles in a List --*/}
<IonList>
<IonItemDivider>Default Toggle</IonItemDivider>
<IonItem>
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
<IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
</IonItem>
<IonItemDivider>Disabled Toggle</IonItemDivider>
<IonItem><IonToggle disabled /></IonItem>
<IonItemDivider>Checked Toggle</IonItemDivider>
<IonItem><IonToggle checked /></IonItem>
<IonItemDivider>Toggle Colors</IonItemDivider>
<IonItem><IonToggle color="primary" /></IonItem>
<IonItem><IonToggle color="secondary" /></IonItem>
<IonItem><IonToggle color="danger" /></IonItem>
<IonItem><IonToggle color="light" /></IonItem>
<IonItem><IonToggle color="dark" /></IonItem>
<IonItemDivider>Toggles in a List</IonItemDivider>
<IonItem>
<IonLabel>Pepperoni</IonLabel>
<IonToggle value="pepperoni" onIonChange={() => {}} />
<IonToggle value="pepperoni" />
</IonItem>
<IonItem>
<IonLabel>Sausage</IonLabel>
<IonToggle value="sausage" onIonChange={() => {}} disabled={true} />
<IonToggle value="sausage" disabled={true} />
</IonItem>
<IonItem>
<IonLabel>Mushrooms</IonLabel>
<IonToggle value="mushrooms" onIonChange={() => {}} />
<IonToggle value="mushrooms" />
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```

60
core/src/components/toggle/usage/react.md
View File

@ -1,42 +1,56 @@
```tsx
import React from 'react';
import { IonToggle, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
export const ToggleExample: React.FC = () => (
export const ToggleExamples: React.FC = () => {
const [checked, setChecked] = useState(false);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>ToggleExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- Default Toggle --*/}
<IonToggle />
{/*-- Disabled Toggle --*/}
<IonToggle disabled />
{/*-- Checked Toggle --*/}
<IonToggle checked />
{/*-- Toggle Colors --*/}
<IonToggle color="primary" />
<IonToggle color="secondary" />
<IonToggle color="danger" />
<IonToggle color="light" />
<IonToggle color="dark" />
{/*-- Toggles in a List --*/}
<IonList>
<IonItemDivider>Default Toggle</IonItemDivider>
<IonItem>
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
<IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
</IonItem>
<IonItemDivider>Disabled Toggle</IonItemDivider>
<IonItem><IonToggle disabled /></IonItem>
<IonItemDivider>Checked Toggle</IonItemDivider>
<IonItem><IonToggle checked /></IonItem>
<IonItemDivider>Toggle Colors</IonItemDivider>
<IonItem><IonToggle color="primary" /></IonItem>
<IonItem><IonToggle color="secondary" /></IonItem>
<IonItem><IonToggle color="danger" /></IonItem>
<IonItem><IonToggle color="light" /></IonItem>
<IonItem><IonToggle color="dark" /></IonItem>
<IonItemDivider>Toggles in a List</IonItemDivider>
<IonItem>
<IonLabel>Pepperoni</IonLabel>
<IonToggle value="pepperoni" onIonChange={() => {}} />
<IonToggle value="pepperoni" />
</IonItem>
<IonItem>
<IonLabel>Sausage</IonLabel>
<IonToggle value="sausage" onIonChange={() => {}} disabled={true} />
<IonToggle value="sausage" disabled={true} />
</IonItem>
<IonItem>
<IonLabel>Mushrooms</IonLabel>
<IonToggle value="mushrooms" onIonChange={() => {}} />
<IonToggle value="mushrooms" />
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
```