javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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

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

@ -195,6 +195,197 @@ See [Grid Layout](/docs/layout/grid) for more information.
```
### React
```tsx
import React from 'react';
import { IonGrid, IonRow, IonCol } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonGrid>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
ion-col size="6"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol size="3">
ion-col size="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol size="3" offset="3">
ion-col size="3" offset="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol align-self-start>
ion-col start
</IonCol>
<IonCol align-self-center>
ion-col center
</IonCol>
<IonCol align-self-end>
ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-start>
<IonCol>
start ion-col
</IonCol>
<IonCol>
start ion-col
</IonCol>
<IonCol align-self-end>
start ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-center>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-end>
<IonCol>
end ion-col
</IonCol>
<IonCol align-self-start>
end ion-col start
</IonCol>
<IonCol>
end ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6" size-lg offset="3">
ion-col size="6" size-lg offset="3"
</IonCol>
<IonCol size="3" size-lg>
ion-col size="3" size-lg
</IonCol>
</IonRow>
</IonGrid>
);
export default Example;
```
## Properties

187
core/src/components/grid/usage/react.md Normal file
View File

@ -0,0 +1,187 @@
```tsx
import React from 'react';
import { IonGrid, IonRow, IonCol } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonGrid>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
ion-col size="6"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol>
ion-col
</IonCol>
<IonCol size="3">
ion-col size="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol size="3">
ion-col size="3"
</IonCol>
<IonCol size="3" offset="3">
ion-col size="3" offset="3"
</IonCol>
</IonRow>
<IonRow>
<IonCol>
ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol align-self-start>
ion-col start
</IonCol>
<IonCol align-self-center>
ion-col center
</IonCol>
<IonCol align-self-end>
ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-start>
<IonCol>
start ion-col
</IonCol>
<IonCol>
start ion-col
</IonCol>
<IonCol align-self-end>
start ion-col end
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-center>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
center ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow align-items-end>
<IonCol>
end ion-col
</IonCol>
<IonCol align-self-start>
end ion-col start
</IonCol>
<IonCol>
end ion-col
</IonCol>
<IonCol>
ion-col
<br/>#
<br/>#
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
<IonCol size="12" size-sm>
ion-col size="12" size-sm
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
<IonCol size="12" size-md>
ion-col size="12" size-md
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6" size-lg offset="3">
ion-col size="6" size-lg offset="3"
</IonCol>
<IonCol size="3" size-lg>
ion-col size="3" size-lg
</IonCol>
</IonRow>
</IonGrid>
);
export default Example;
```