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

70
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 = () => (
<IonContent>
{/*-- Default Checkbox --*/}
<IonCheckbox />
export const CheckboxExamples: React.FC = () => {
{/*-- Disabled Checkbox --*/}
<IonCheckbox disabled={true} />
const [checked, setChecked] = useState(false);
{/*-- Checked Checkbox --*/}
<IonCheckbox checked={true} />
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>CheckboxExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItemDivider>Default Checkbox</IonItemDivider>
<IonItem>
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
<IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
</IonItem>
{/*-- Checkbox Colors --*/}
<IonCheckbox color="primary" />
<IonCheckbox color="secondary" />
<IonCheckbox color="danger" />
<IonCheckbox color="light" />
<IonCheckbox color="dark" />
<IonItemDivider>Disabled Checkbox</IonItemDivider>
<IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
{/*-- Checkboxes in a List --*/}
<IonList>
{ form.map(({val, isChecked}) => (
<IonItem key={val}>
<IonLabel>{val}</IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
</IonItem>
)) }
</IonList>
</IonContent>
);
<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>
);
};
```

70
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 = () => (
<IonContent>
{/*-- Default Checkbox --*/}
<IonCheckbox />
export const CheckboxExamples: React.FC = () => {
{/*-- Disabled Checkbox --*/}
<IonCheckbox disabled={true} />
const [checked, setChecked] = useState(false);
{/*-- Checked Checkbox --*/}
<IonCheckbox checked={true} />
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>CheckboxExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItemDivider>Default Checkbox</IonItemDivider>
<IonItem>
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
<IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
</IonItem>
{/*-- Checkbox Colors --*/}
<IonCheckbox color="primary" />
<IonCheckbox color="secondary" />
<IonCheckbox color="danger" />
<IonCheckbox color="light" />
<IonCheckbox color="dark" />
<IonItemDivider>Disabled Checkbox</IonItemDivider>
<IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
{/*-- Checkboxes in a List --*/}
<IonList>
{ form.map(({val, isChecked}) => (
<IonItem key={val}>
<IonLabel>{val}</IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
</IonItem>
)) }
</IonList>
</IonContent>
);
<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>
);
};
```