mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
docs(react): updating icon usages
This commit is contained in:
Ely Lucas
@ -67,58 +67,69 @@ sub-components to reflect this. Please see `ion-card-content`,
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
|
||||
import { pin, wifi, wine, warning, walk } from 'ionicons/icons';
|
||||
|
||||
export const CardExample: React.FC = () => (
|
||||
<IonContent>
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardSubtitle>Card Subtitle</IonCardSubtitle>
|
||||
<IonCardTitle>Card Title</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
export const CardExamples: React.FC = () => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>CardExamples</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardSubtitle>Card Subtitle</IonCardSubtitle>
|
||||
<IonCardTitle>Card Title</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
|
||||
<IonCardContent>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
<IonCardContent>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem>
|
||||
<IonIcon name="pin" slot="start" />
|
||||
<IonLabel>ion-item in a card, icon left, button right</IonLabel>
|
||||
<IonButton fill="outline" slot="end">View</IonButton>
|
||||
</IonItem>
|
||||
<IonCard>
|
||||
<IonItem>
|
||||
<IonIcon icon={pin} slot="start" />
|
||||
<IonLabel>ion-item in a card, icon left, button right</IonLabel>
|
||||
<IonButton fill="outline" slot="end">View</IonButton>
|
||||
</IonItem>
|
||||
|
||||
<IonCardContent>
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-cardContent element.
|
||||
<IonCardContent>
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-cardContent element.
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem href="#" className="ion-activated">
|
||||
<IonIcon name="wifi" slot="start" />
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
<IonCard>
|
||||
<IonItem href="#" className="ion-activated">
|
||||
<IonIcon icon={wifi} slot="start" />
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem href="#">
|
||||
<IonIcon name="wine" slot="start" />
|
||||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
<IonItem href="#">
|
||||
<IonIcon icon={wine} slot="start" />
|
||||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem className="ion-activated">
|
||||
<IonIcon name="warning" slot="start" />
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
<IonItem className="ion-activated">
|
||||
<IonIcon icon={warning} slot="start" />
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonIcon icon={walk} slot="start" />
|
||||
<IonLabel>Card Button Item 2</IonLabel>
|
||||
</IonItem>
|
||||
</IonCard>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
<IonItem>
|
||||
<IonIcon name="walk" slot="start" />
|
||||
<IonLabel>Card Button Item 2</IonLabel>
|
||||
</IonItem>
|
||||
</IonCard>
|
||||
</IonContent>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -1,55 +1,66 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
|
||||
import { pin, wifi, wine, warning, walk } from 'ionicons/icons';
|
||||
|
||||
export const CardExample: React.FC = () => (
|
||||
<IonContent>
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardSubtitle>Card Subtitle</IonCardSubtitle>
|
||||
<IonCardTitle>Card Title</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
export const CardExamples: React.FC = () => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>CardExamples</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardSubtitle>Card Subtitle</IonCardSubtitle>
|
||||
<IonCardTitle>Card Title</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
|
||||
<IonCardContent>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
<IonCardContent>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem>
|
||||
<IonIcon name="pin" slot="start" />
|
||||
<IonLabel>ion-item in a card, icon left, button right</IonLabel>
|
||||
<IonButton fill="outline" slot="end">View</IonButton>
|
||||
</IonItem>
|
||||
<IonCard>
|
||||
<IonItem>
|
||||
<IonIcon icon={pin} slot="start" />
|
||||
<IonLabel>ion-item in a card, icon left, button right</IonLabel>
|
||||
<IonButton fill="outline" slot="end">View</IonButton>
|
||||
</IonItem>
|
||||
|
||||
<IonCardContent>
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-cardContent element.
|
||||
<IonCardContent>
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-cardContent element.
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCard>
|
||||
|
||||
<IonCard>
|
||||
<IonItem href="#" className="ion-activated">
|
||||
<IonIcon name="wifi" slot="start" />
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
<IonCard>
|
||||
<IonItem href="#" className="ion-activated">
|
||||
<IonIcon icon={wifi} slot="start" />
|
||||
<IonLabel>Card Link Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem href="#">
|
||||
<IonIcon name="wine" slot="start" />
|
||||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
<IonItem href="#">
|
||||
<IonIcon icon={wine} slot="start" />
|
||||
<IonLabel>Card Link Item 2</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem className="ion-activated">
|
||||
<IonIcon name="warning" slot="start" />
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
<IonItem className="ion-activated">
|
||||
<IonIcon icon={warning} slot="start" />
|
||||
<IonLabel>Card Button Item 1 activated</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
<IonItem>
|
||||
<IonIcon icon={walk} slot="start" />
|
||||
<IonLabel>Card Button Item 2</IonLabel>
|
||||
</IonItem>
|
||||
</IonCard>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
<IonItem>
|
||||
<IonIcon name="walk" slot="start" />
|
||||
<IonLabel>Card Button Item 2</IonLabel>
|
||||
</IonItem>
|
||||
</IonCard>
|
||||
</IonContent>
|
||||
);
|
||||
```
|
||||
Reference in New Issue
Block a user