javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +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>
<IonItem href="#" class="ion-activated">
<IonItem href="#" className="ion-activated">
<IonIcon name="wifi" slot="start" />
<IonLabel>Card Link Item 1 activated</IonLabel>
</IonItem>
@ -107,7 +107,7 @@ export const CardExample: React.FC = () => (
<IonLabel>Card Link Item 2</IonLabel>
</IonItem>
<IonItem class="ion-activated">
<IonItem className="ion-activated">
<IonIcon name="warning" slot="start" />
<IonLabel>Card Button Item 1 activated</IonLabel>
</IonItem>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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