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

36
core/src/components/badge/readme.md
View File

@ -34,6 +34,42 @@ Badges are inline block elements that usually appear near another element. Typic
```
### React
```tsx
import React from 'react';
import { IonBadge, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default --*/}
<IonBadge>99</IonBadge>
{/*-- Colors --*/}
<IonBadge color="primary">11</IonBadge>
<IonBadge color="secondary">22</IonBadge>
<IonBadge color="tertiary">33</IonBadge>
<IonBadge color="success">44</IonBadge>
<IonBadge color="warning">55</IonBadge>
<IonBadge color="danger">66</IonBadge>
<IonBadge color="light">77</IonBadge>
<IonBadge color="medium">88</IonBadge>
<IonBadge color="dark">99</IonBadge>
{/*-- Item with badge on left and right --*/}
<IonItem>
<IonBadge slot="start">11</IonBadge>
<IonLabel>My Item</IonLabel>
<IonBadge slot="end">22</IonBadge>
</IonItem>
</>
);
export default Example;
```
## Properties

32
core/src/components/badge/usage/react.md Normal file
View File

@ -0,0 +1,32 @@
```tsx
import React from 'react';
import { IonBadge, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default --*/}
<IonBadge>99</IonBadge>
{/*-- Colors --*/}
<IonBadge color="primary">11</IonBadge>
<IonBadge color="secondary">22</IonBadge>
<IonBadge color="tertiary">33</IonBadge>
<IonBadge color="success">44</IonBadge>
<IonBadge color="warning">55</IonBadge>
<IonBadge color="danger">66</IonBadge>
<IonBadge color="light">77</IonBadge>
<IonBadge color="medium">88</IonBadge>
<IonBadge color="dark">99</IonBadge>
{/*-- Item with badge on left and right --*/}
<IonItem>
<IonBadge slot="start">11</IonBadge>
<IonLabel>My Item</IonLabel>
<IonBadge slot="end">22</IonBadge>
</IonItem>
</>
);
export default Example;
```