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): 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

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

@ -87,6 +87,55 @@ 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 } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Toggle --*/}
<IonToggle></IonToggle>
{/*-- Disabled Toggle --*/}
<IonToggle disabled></IonToggle>
{/*-- Checked Toggle --*/}
<IonToggle checked></IonToggle>
{/*-- Toggle Colors --*/}
<IonToggle color="primary"></IonToggle>
<IonToggle color="secondary"></IonToggle>
<IonToggle color="danger"></IonToggle>
<IonToggle color="light"></IonToggle>
<IonToggle color="dark"></IonToggle>
{/*-- Toggles in a List --*/}
<IonList>
<IonItem>
<IonLabel>Pepperoni</IonLabel>
<IonToggle value="pepperoni" onChange={() => {}}></IonToggle>
</IonItem>
<IonItem>
<IonLabel>Sausage</IonLabel>
<IonToggle value="sausage" onChange={() => {}} disabled={true}></IonToggle>
</IonItem>
<IonItem>
<IonLabel>Mushrooms</IonLabel>
<IonToggle value="mushrooms" onChange={() => {}}></IonToggle>
</IonItem>
</IonList>
</>
);
export default Example;
```
## Properties

45
core/src/components/toggle/usage/react.md Normal file
View File

@ -0,0 +1,45 @@
```tsx
import React from 'react';
import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Toggle --*/}
<IonToggle></IonToggle>
{/*-- Disabled Toggle --*/}
<IonToggle disabled></IonToggle>
{/*-- Checked Toggle --*/}
<IonToggle checked></IonToggle>
{/*-- Toggle Colors --*/}
<IonToggle color="primary"></IonToggle>
<IonToggle color="secondary"></IonToggle>
<IonToggle color="danger"></IonToggle>
<IonToggle color="light"></IonToggle>
<IonToggle color="dark"></IonToggle>
{/*-- Toggles in a List --*/}
<IonList>
<IonItem>
<IonLabel>Pepperoni</IonLabel>
<IonToggle value="pepperoni" onChange={() => {}}></IonToggle>
</IonItem>
<IonItem>
<IonLabel>Sausage</IonLabel>
<IonToggle value="sausage" onChange={() => {}} disabled={true}></IonToggle>
</IonItem>
<IonItem>
<IonLabel>Mushrooms</IonLabel>
<IonToggle value="mushrooms" onChange={() => {}}></IonToggle>
</IonItem>
</IonList>
</>
);
export default Example;
```