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): updating icon usages

Browse Source
This commit is contained in:
Ely Lucas
2020-02-20 16:08:23 -07:00
committed by GitHub
parent 972e361bdc
commit 714ecaae65
29 changed files with 1419 additions and 1278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -229,101 +229,112 @@ for (let i = 0; i < segments.length; i++) {
```tsx
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
import { call, home, heart, pin, star, globe, basket, camera, bookmark } from 'ionicons/icons';
export const SegmentExample: React.FC = () => (
<IonContent>
{/*-- 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>
export const SegmentExamples: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>SegmentExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- 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 value="sunny">
<IonSegmentButton value="sunny">
<IonLabel>Sunny</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="rainy">
<IonLabel>Rainy</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Disabled Segment --*/}
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value="sunny">
<IonSegmentButton value="sunny">
<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>
{/*-- 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 value="heart">
<IonSegmentButton value="home">
<IonIcon name="home" />
</IonSegmentButton>
<IonSegmentButton value="heart">
<IonIcon name="heart" />
</IonSegmentButton>
<IonSegmentButton value="pin">
<IonIcon name="pin" />
</IonSegmentButton>
<IonSegmentButton value="star">
<IonIcon name="star" />
</IonSegmentButton>
<IonSegmentButton value="call">
<IonIcon name="call" />
</IonSegmentButton>
<IonSegmentButton value="globe">
<IonIcon name="globe" />
</IonSegmentButton>
<IonSegmentButton value="basket">
<IonIcon name="basket" />
</IonSegmentButton>
</IonSegment>
{/*-- Scrollable Segment --*/}
<IonSegment scrollable value="heart">
<IonSegmentButton value="home">
<IonIcon icon={home} />
</IonSegmentButton>
<IonSegmentButton value="heart">
<IonIcon icon={heart} />
</IonSegmentButton>
<IonSegmentButton value="pin">
<IonIcon icon={pin} />
</IonSegmentButton>
<IonSegmentButton value="star">
<IonIcon icon={star} />
</IonSegmentButton>
<IonSegmentButton value="call">
<IonIcon icon={call} />
</IonSegmentButton>
<IonSegmentButton value="globe">
<IonIcon icon={globe} />
</IonSegmentButton>
<IonSegmentButton value="basket">
<IonIcon icon={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 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 in a toolbar --*/}
<IonToolbar>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="camera">
<IonIcon icon={camera} />
</IonSegmentButton>
<IonSegmentButton value="bookmark">
<IonIcon icon={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>
</IonContent>
</IonPage>
);
};
{/*-- 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>
</IonContent>
);
```

187
core/src/components/segment/usage/react.md
View File

@ -1,98 +1,109 @@
```tsx
import React from 'react';
import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar, IonContent } from '@ionic/react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
import { call, home, heart, pin, star, globe, basket, camera, bookmark } from 'ionicons/icons';
export const SegmentExample: React.FC = () => (
<IonContent>
{/*-- 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>
export const SegmentExamples: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>SegmentExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/*-- 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 value="sunny">
<IonSegmentButton value="sunny">
<IonLabel>Sunny</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="rainy">
<IonLabel>Rainy</IonLabel>
</IonSegmentButton>
</IonSegment>
{/*-- Disabled Segment --*/}
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value="sunny">
<IonSegmentButton value="sunny">
<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>
{/*-- 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 value="heart">
<IonSegmentButton value="home">
<IonIcon name="home" />
</IonSegmentButton>
<IonSegmentButton value="heart">
<IonIcon name="heart" />
</IonSegmentButton>
<IonSegmentButton value="pin">
<IonIcon name="pin" />
</IonSegmentButton>
<IonSegmentButton value="star">
<IonIcon name="star" />
</IonSegmentButton>
<IonSegmentButton value="call">
<IonIcon name="call" />
</IonSegmentButton>
<IonSegmentButton value="globe">
<IonIcon name="globe" />
</IonSegmentButton>
<IonSegmentButton value="basket">
<IonIcon name="basket" />
</IonSegmentButton>
</IonSegment>
{/*-- Scrollable Segment --*/}
<IonSegment scrollable value="heart">
<IonSegmentButton value="home">
<IonIcon icon={home} />
</IonSegmentButton>
<IonSegmentButton value="heart">
<IonIcon icon={heart} />
</IonSegmentButton>
<IonSegmentButton value="pin">
<IonIcon icon={pin} />
</IonSegmentButton>
<IonSegmentButton value="star">
<IonIcon icon={star} />
</IonSegmentButton>
<IonSegmentButton value="call">
<IonIcon icon={call} />
</IonSegmentButton>
<IonSegmentButton value="globe">
<IonIcon icon={globe} />
</IonSegmentButton>
<IonSegmentButton value="basket">
<IonIcon icon={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 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 in a toolbar --*/}
<IonToolbar>
<IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
<IonSegmentButton value="camera">
<IonIcon icon={camera} />
</IonSegmentButton>
<IonSegmentButton value="bookmark">
<IonIcon icon={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>
</IonContent>
</IonPage>
);
};
{/*-- 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>
</IonContent>
);
```