javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(react): update class usage to className (#20366)

Browse Source
This commit is contained in:
Brandy Carney
2020-02-04 11:16:44 -05:00
committed by GitHub
parent 0f31624104
commit a25007f54f
10 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/card/readme.md
View File

@ -97,7 +97,7 @@ export const CardExample: React.FC = () => (
</IonCard> </IonCard>
<IonCard> <IonCard>
<IonItem href="#" class="ion-activated"> <IonItem href="#" className="ion-activated">
<IonIcon name="wifi" slot="start" /> <IonIcon name="wifi" slot="start" />
<IonLabel>Card Link Item 1 activated</IonLabel> <IonLabel>Card Link Item 1 activated</IonLabel>
</IonItem> </IonItem>
@ -107,7 +107,7 @@ export const CardExample: React.FC = () => (
<IonLabel>Card Link Item 2</IonLabel> <IonLabel>Card Link Item 2</IonLabel>
</IonItem> </IonItem>
<IonItem class="ion-activated"> <IonItem className="ion-activated">
<IonIcon name="warning" slot="start" /> <IonIcon name="warning" slot="start" />
<IonLabel>Card Button Item 1 activated</IonLabel> <IonLabel>Card Button Item 1 activated</IonLabel>
</IonItem> </IonItem>

4
core/src/components/card/usage/react.md
View File

@ -30,7 +30,7 @@ export const CardExample: React.FC = () => (
</IonCard> </IonCard>
<IonCard> <IonCard>
<IonItem href="#" class="ion-activated"> <IonItem href="#" className="ion-activated">
<IonIcon name="wifi" slot="start" /> <IonIcon name="wifi" slot="start" />
<IonLabel>Card Link Item 1 activated</IonLabel> <IonLabel>Card Link Item 1 activated</IonLabel>
</IonItem> </IonItem>
@ -40,7 +40,7 @@ export const CardExample: React.FC = () => (
<IonLabel>Card Link Item 2</IonLabel> <IonLabel>Card Link Item 2</IonLabel>
</IonItem> </IonItem>
<IonItem class="ion-activated"> <IonItem className="ion-activated">
<IonIcon name="warning" slot="start" /> <IonIcon name="warning" slot="start" />
<IonLabel>Card Button Item 1 activated</IonLabel> <IonLabel>Card Button Item 1 activated</IonLabel>
</IonItem> </IonItem>

16
core/src/components/grid/readme.md
View File

@ -250,9 +250,9 @@ export const GridExample: React.FC = () => (
</IonRow> </IonRow>
<IonRow> <IonRow>
<IonCol class="ion-align-self-start">ion-col start</IonCol> <IonCol className="ion-align-self-start">ion-col start</IonCol>
<IonCol class="ion-align-self-center">ion-col center</IonCol> <IonCol className="ion-align-self-center">ion-col center</IonCol>
<IonCol class="ion-align-self-end">ion-col end</IonCol> <IonCol className="ion-align-self-end">ion-col end</IonCol>
<IonCol> <IonCol>
ion-col ion-col
<br /># <br />#
@ -260,10 +260,10 @@ export const GridExample: React.FC = () => (
</IonCol> </IonCol>
</IonRow> </IonRow>
<IonRow class="ion-align-items-start"> <IonRow className="ion-align-items-start">
<IonCol>start ion-col</IonCol> <IonCol>start ion-col</IonCol>
<IonCol>start ion-col</IonCol> <IonCol>start ion-col</IonCol>
<IonCol class="ion-align-self-end">start ion-col end</IonCol> <IonCol className="ion-align-self-end">start ion-col end</IonCol>
<IonCol> <IonCol>
ion-col ion-col
<br /># <br />#
@ -271,7 +271,7 @@ export const GridExample: React.FC = () => (
</IonCol> </IonCol>
</IonRow> </IonRow>
<IonRow class="ion-align-items-center"> <IonRow className="ion-align-items-center">
<IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol>
@ -282,9 +282,9 @@ export const GridExample: React.FC = () => (
</IonCol> </IonCol>
</IonRow> </IonRow>
<IonRow class="ion-align-items-end"> <IonRow className="ion-align-items-end">
<IonCol>end ion-col</IonCol> <IonCol>end ion-col</IonCol>
<IonCol class="ion-align-self-start">end ion-col start</IonCol> <IonCol className="ion-align-self-start">end ion-col start</IonCol>
<IonCol>end ion-col</IonCol> <IonCol>end ion-col</IonCol>
<IonCol> <IonCol>
ion-col ion-col

16
core/src/components/grid/usage/react.md
View File

@ -51,9 +51,9 @@ export const GridExample: React.FC = () => (
</IonRow> </IonRow>
<IonRow> <IonRow>
<IonCol class="ion-align-self-start">ion-col start</IonCol> <IonCol className="ion-align-self-start">ion-col start</IonCol>
<IonCol class="ion-align-self-center">ion-col center</IonCol> <IonCol className="ion-align-self-center">ion-col center</IonCol>
<IonCol class="ion-align-self-end">ion-col end</IonCol> <IonCol className="ion-align-self-end">ion-col end</IonCol>
<IonCol> <IonCol>
ion-col ion-col
<br /># <br />#
@ -61,10 +61,10 @@ export const GridExample: React.FC = () => (
</IonCol> </IonCol>
</IonRow> </IonRow>
<IonRow class="ion-align-items-start"> <IonRow className="ion-align-items-start">
<IonCol>start ion-col</IonCol> <IonCol>start ion-col</IonCol>
<IonCol>start ion-col</IonCol> <IonCol>start ion-col</IonCol>
<IonCol class="ion-align-self-end">start ion-col end</IonCol> <IonCol className="ion-align-self-end">start ion-col end</IonCol>
<IonCol> <IonCol>
ion-col ion-col
<br /># <br />#
@ -72,7 +72,7 @@ export const GridExample: React.FC = () => (
</IonCol> </IonCol>
</IonRow> </IonRow>
<IonRow class="ion-align-items-center"> <IonRow className="ion-align-items-center">
<IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol>
<IonCol>center ion-col</IonCol> <IonCol>center ion-col</IonCol>
@ -83,9 +83,9 @@ export const GridExample: React.FC = () => (
</IonCol> </IonCol>
</IonRow> </IonRow>
<IonRow class="ion-align-items-end"> <IonRow className="ion-align-items-end">
<IonCol>end ion-col</IonCol> <IonCol>end ion-col</IonCol>
<IonCol class="ion-align-self-start">end ion-col start</IonCol> <IonCol className="ion-align-self-start">end ion-col start</IonCol>
<IonCol>end ion-col</IonCol> <IonCol>end ion-col</IonCol>
<IonCol> <IonCol>
ion-col ion-col

4
core/src/components/item/readme.md
View File

@ -778,14 +778,14 @@ const Example: React.FC<{}> = () => (
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel class="ion-text-wrap"> <IonLabel className="ion-text-wrap">
Multiline text that should wrap when it is too long Multiline text that should wrap when it is too long
to fit on one line in the item. to fit on one line in the item.
</IonLabel> </IonLabel>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel class="ion-text-wrap"> <IonLabel className="ion-text-wrap">
<IonText color="primary"> <IonText color="primary">
<h3>H3 Primary Title</h3> <h3>H3 Primary Title</h3>
</IonText> </IonText>

4
core/src/components/item/usage/react.md
View File

@ -67,14 +67,14 @@ const Example: React.FC<{}> = () => (
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel class="ion-text-wrap"> <IonLabel className="ion-text-wrap">
Multiline text that should wrap when it is too long Multiline text that should wrap when it is too long
to fit on one line in the item. to fit on one line in the item.
</IonLabel> </IonLabel>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel class="ion-text-wrap"> <IonLabel className="ion-text-wrap">
<IonText color="primary"> <IonText color="primary">
<h3>H3 Primary Title</h3> <h3>H3 Primary Title</h3>
</IonText> </IonText>

2
core/src/components/label/readme.md
View File

@ -90,7 +90,7 @@ export const LabelExample: React.FC = () => (
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel class="ion-text-wrap"> <IonLabel className="ion-text-wrap">
Multi-line text that should wrap when it is too long Multi-line text that should wrap when it is too long
to fit on one line in the item. to fit on one line in the item.
</IonLabel> </IonLabel>

2
core/src/components/label/usage/react.md
View File

@ -20,7 +20,7 @@ export const LabelExample: React.FC = () => (
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonLabel class="ion-text-wrap"> <IonLabel className="ion-text-wrap">
Multi-line text that should wrap when it is too long Multi-line text that should wrap when it is too long
to fit on one line in the item. to fit on one line in the item.
</IonLabel> </IonLabel>

2
core/src/components/menu/readme.md
View File

@ -228,7 +228,7 @@ export const MenuExample: React.FC = () => (
</IonContent> </IonContent>
</IonMenu> </IonMenu>
<IonMenu side="start" menuId="custom" class="my-custom-menu"> <IonMenu side="start" menuId="custom" className="my-custom-menu">
<IonHeader> <IonHeader>
<IonToolbar color="tertiary"> <IonToolbar color="tertiary">
<IonTitle>Custom Menu</IonTitle> <IonTitle>Custom Menu</IonTitle>

2
core/src/components/menu/usage/react.md
View File

@ -21,7 +21,7 @@ export const MenuExample: React.FC = () => (
</IonContent> </IonContent>
</IonMenu> </IonMenu>
<IonMenu side="start" menuId="custom" class="my-custom-menu"> <IonMenu side="start" menuId="custom" className="my-custom-menu">
<IonHeader> <IonHeader>
<IonToolbar color="tertiary"> <IonToolbar color="tertiary">
<IonTitle>Custom Menu</IonTitle> <IonTitle>Custom Menu</IonTitle>