javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +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

64
core/src/components/button/readme.md
View File

@ -91,6 +91,70 @@ This attribute specifies the size of the button. Setting this attribute will cha
```
### React
```tsx
import React from 'react';
import { IonButton, IonIcon } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default --*/}
<IonButton>Default</IonButton>
{/*-- Anchor --*/}
<IonButton href="#">Anchor</IonButton>
{/*-- Colors --*/}
<IonButton color="primary">Primary</IonButton>
<IonButton color="secondary">Secondary</IonButton>
<IonButton color="tertiary">Tertiary</IonButton>
<IonButton color="success">Success</IonButton>
<IonButton color="warning">Warning</IonButton>
<IonButton color="danger">Danger</IonButton>
<IonButton color="light">Light</IonButton>
<IonButton color="medium">Medium</IonButton>
<IonButton color="dark">Dark</IonButton>
{/*-- Expand --*/}
<IonButton expand="full">Full Button</IonButton>
<IonButton expand="block">Block Button</IonButton>
{/*-- Round --*/}
<IonButton shape="round">Round Button</IonButton>
{/*-- Fill --*/}
<IonButton expand="full" fill="outline">Outline + Full</IonButton>
<IonButton expand="block" fill="outline">Outline + Block</IonButton>
<IonButton shape="round" fill="outline">Outline + Round</IonButton>
{/*-- Icons --*/}
<IonButton>
<IonIcon slot="start" name="star" />
Left Icon
</IonButton>
<IonButton>
Right Icon
<IonIcon slot="end" name="star" />
</IonButton>
<IonButton>
<IonIcon slot="icon-only" name="star" />
</IonButton>
{/*-- Sizes --*/}
<IonButton size="large">Large</IonButton>
<IonButton>Default</IonButton>
<IonButton size="small">Small</IonButton>
</>
);
export default Example;
```
## Properties

60
core/src/components/button/usage/react.md Normal file
View File

@ -0,0 +1,60 @@
```tsx
import React from 'react';
import { IonButton, IonIcon } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default --*/}
<IonButton>Default</IonButton>
{/*-- Anchor --*/}
<IonButton href="#">Anchor</IonButton>
{/*-- Colors --*/}
<IonButton color="primary">Primary</IonButton>
<IonButton color="secondary">Secondary</IonButton>
<IonButton color="tertiary">Tertiary</IonButton>
<IonButton color="success">Success</IonButton>
<IonButton color="warning">Warning</IonButton>
<IonButton color="danger">Danger</IonButton>
<IonButton color="light">Light</IonButton>
<IonButton color="medium">Medium</IonButton>
<IonButton color="dark">Dark</IonButton>
{/*-- Expand --*/}
<IonButton expand="full">Full Button</IonButton>
<IonButton expand="block">Block Button</IonButton>
{/*-- Round --*/}
<IonButton shape="round">Round Button</IonButton>
{/*-- Fill --*/}
<IonButton expand="full" fill="outline">Outline + Full</IonButton>
<IonButton expand="block" fill="outline">Outline + Block</IonButton>
<IonButton shape="round" fill="outline">Outline + Round</IonButton>
{/*-- Icons --*/}
<IonButton>
<IonIcon slot="start" name="star" />
Left Icon
</IonButton>
<IonButton>
Right Icon
<IonIcon slot="end" name="star" />
</IonButton>
<IonButton>
<IonIcon slot="icon-only" name="star" />
</IonButton>
{/*-- Sizes --*/}
<IonButton size="large">Large</IonButton>
<IonButton>Default</IonButton>
<IonButton size="small">Small</IonButton>
</>
);
export default Example;
```