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

docs(react): update component usage docs (#17615)

Browse Source
This commit is contained in:
Josh Thomas
2019-02-26 08:54:01 -06:00
committed by GitHub
parent f44c17e03b
commit 22d1aeebaa
113 changed files with 7207 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,6 +95,52 @@ export class HomePage {
```
### React
```tsx
import React from 'react';
import { IonCheckbox, IonList, IonItem, IonLabel } from '@ionic/react';
const form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
const CheckboxExample: React.SFC<{}> = () => (
<>
{/*-- 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}>
<IonLabel>{{val}}</IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
</IonItem>
)) }
</IonList>
</>
);
export default CheckboxExample;
## Properties

43
core/src/components/checkbox/usage/react.md Normal file
View File

@ -0,0 +1,43 @@
```tsx
import React from 'react';
import { IonCheckbox, IonList, IonItem, IonLabel } from '@ionic/react';
const form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
const CheckboxExample: React.SFC<{}> = () => (
<>
{/*-- 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}>
<IonLabel>{{val}}</IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
</IonItem>
)) }
</IonList>
</>
);
export default CheckboxExample;