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

105
core/src/components/segment/readme.md
View File

@ -225,6 +225,111 @@ for (let i = 0; i < segments.length; i++) {
```
### React
```tsx
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="friends">
<IonLabel>Friends</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="enemies">
<IonLabel>Enemies</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Disabled Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} disabled>
<IonSegmentButton value="sunny" checked>
<IonLabel>Sunny</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="rainy">
<IonLabel>Rainy</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Segment with anchors --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="dogs">
<IonLabel>Dogs</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="cats">
<IonLabel>Cats</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Scrollable Segment --*/}
<IonSegment scrollable>
<IonSegmentButton>
<IonIcon name="home" />
</IonSegmentButton>
<IonSegmentButton checked>
<IonIcon name="heart" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="pin" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="star" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="call" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="globe" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="basket" />
</IonSegmentButton>
</IonSegment>
{/*-- Segment with secondary color --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} color="secondary">
<IonSegmentButton value="standard">
<IonLabel>Standard</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="hybrid">
<IonLabel>Hybrid</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="sat">
<IonLabel>Satellite</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Segment in a toolbar --*/}
<IonToolbar>
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="camera">
<IonIcon name="camera" />
</IonSegmentButton>
<IonSegmentButton value="bookmark">
<IonIcon name="bookmark" />
</IonSegmentButton>
</IonSegment>
</IonToolbar>
{/*-- Segment with default selection --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} value="javascript">
<IonSegmentButton value="python">
<IonLabel>Python</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="javascript">
<IonLabel>Javascript</IonLabel>
</IonSegmentButton>
</IonSegment>
</>
);
export default Example;
```
## Properties

101
core/src/components/segment/usage/react.md Normal file
View File

@ -0,0 +1,101 @@
```tsx
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="friends">
<IonLabel>Friends</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="enemies">
<IonLabel>Enemies</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Disabled Segment --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} disabled>
<IonSegmentButton value="sunny" checked>
<IonLabel>Sunny</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="rainy">
<IonLabel>Rainy</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Segment with anchors --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="dogs">
<IonLabel>Dogs</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="cats">
<IonLabel>Cats</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Scrollable Segment --*/}
<IonSegment scrollable>
<IonSegmentButton>
<IonIcon name="home" />
</IonSegmentButton>
<IonSegmentButton checked>
<IonIcon name="heart" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="pin" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="star" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="call" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="globe" />
</IonSegmentButton>
<IonSegmentButton>
<IonIcon name="basket" />
</IonSegmentButton>
</IonSegment>
{/*-- Segment with secondary color --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} color="secondary">
<IonSegmentButton value="standard">
<IonLabel>Standard</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="hybrid">
<IonLabel>Hybrid</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="sat">
<IonLabel>Satellite</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Segment in a toolbar --*/}
<IonToolbar>
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="camera">
<IonIcon name="camera" />
</IonSegmentButton>
<IonSegmentButton value="bookmark">
<IonIcon name="bookmark" />
</IonSegmentButton>
</IonSegment>
</IonToolbar>
{/*-- Segment with default selection --*/}
<IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} value="javascript">
<IonSegmentButton value="python">
<IonLabel>Python</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="javascript">
<IonLabel>Javascript</IonLabel>
</IonSegmentButton>
</IonSegment>
</>
);
export default Example;
```