javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +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

68
core/src/components/label/readme.md
View File

@ -66,6 +66,74 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
```
### React
```tsx
import React from 'react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Label --*/}
<IonLabel>Label</IonLabel>
{/*-- Label Colors --*/}
<IonLabel color="primary">Primary Label</IonLabel>
<IonLabel color="secondary">Secondary Label</IonLabel>
<IonLabel color="danger">Danger Label</IonLabel>
<IonLabel color="light">Light Label</IonLabel>
<IonLabel color="dark">Dark Label</IonLabel>
{/*-- Item Labels --*/}
<IonItem>
<IonLabel>Default Item</IonLabel>
</IonItem>
<IonItem text-wrap>
<IonLabel>
Multi-line text that should wrap when it is too long
to fit on one line in the item.
</IonLabel>
</IonItem>
{/*-- Input Labels --*/}
<IonItem>
<IonLabel>Default Input</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position="fixed">Fixed</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position="floating">Floating</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position="stacked">Stacked</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel>Toggle</IonLabel>
<IonToggle slot="end" checked></IonToggle>
</IonItem>
<IonItem>
<IonCheckbox slot="start" checked />
<IonLabel>Checkbox</IonLabel>
</IonItem>
</>
);
export default Example;
```
## Properties

64
core/src/components/label/usage/react.md Normal file
View File

@ -0,0 +1,64 @@
```tsx
import React from 'react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Label --*/}
<IonLabel>Label</IonLabel>
{/*-- Label Colors --*/}
<IonLabel color="primary">Primary Label</IonLabel>
<IonLabel color="secondary">Secondary Label</IonLabel>
<IonLabel color="danger">Danger Label</IonLabel>
<IonLabel color="light">Light Label</IonLabel>
<IonLabel color="dark">Dark Label</IonLabel>
{/*-- Item Labels --*/}
<IonItem>
<IonLabel>Default Item</IonLabel>
</IonItem>
<IonItem text-wrap>
<IonLabel>
Multi-line text that should wrap when it is too long
to fit on one line in the item.
</IonLabel>
</IonItem>
{/*-- Input Labels --*/}
<IonItem>
<IonLabel>Default Input</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position="fixed">Fixed</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position="floating">Floating</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position="stacked">Stacked</IonLabel>
<IonInput></IonInput>
</IonItem>
<IonItem>
<IonLabel>Toggle</IonLabel>
<IonToggle slot="end" checked></IonToggle>
</IonItem>
<IonItem>
<IonCheckbox slot="start" checked />
<IonLabel>Checkbox</IonLabel>
</IonItem>
</>
);
export default Example;
```