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

33
core/src/components/fab-button/readme.md
View File

@ -36,6 +36,39 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
```
### React
```tsx
import React from 'react';
import { IonContent, IonFab, IonFabButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonContent>
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
<IonFab>
<IonFabButton>Button</IonFabButton>
</IonFab>
{/*-- Default Floating Action Button that scrolls with the content.--*/}
<IonFabButton>Default</IonFabButton>
{/*-- Mini --*/}
<IonFabButton size="small">Mini</IonFabButton>
{/*-- Colors --*/}
<IonFabButton color="primary">Primary</IonFabButton>
<IonFabButton color="secondary">Secondary</IonFabButton>
<IonFabButton color="danger">Danger</IonFabButton>
<IonFabButton color="light">Light</IonFabButton>
<IonFabButton color="dark">Dark</IonFabButton>
</IonContent>
);
export default Example
## Properties

29
core/src/components/fab-button/usage/react.md Normal file
View File

@ -0,0 +1,29 @@
```tsx
import React from 'react';
import { IonContent, IonFab, IonFabButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonContent>
{/*-- Fixed Floating Action Button that does not scroll with the content --*/}
<IonFab>
<IonFabButton>Button</IonFabButton>
</IonFab>
{/*-- Default Floating Action Button that scrolls with the content.--*/}
<IonFabButton>Default</IonFabButton>
{/*-- Mini --*/}
<IonFabButton size="small">Mini</IonFabButton>
{/*-- Colors --*/}
<IonFabButton color="primary">Primary</IonFabButton>
<IonFabButton color="secondary">Secondary</IonFabButton>
<IonFabButton color="danger">Danger</IonFabButton>
<IonFabButton color="light">Light</IonFabButton>
<IonFabButton color="dark">Dark</IonFabButton>
</IonContent>
);
export default Example