javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(grid): update usage and preview demo

Browse Source
This commit is contained in:
Brandy Carney
2018-07-05 17:32:57 -04:00
parent 4a12ba06ef
commit 537bc4e8e7
2 changed files with 214 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
core/src/components/grid/test/preview/index.html
View File

@ -45,7 +45,7 @@
<ion-row>
<ion-col size="6">
<div>
ion-col[width-50]
ion-col [size="6"]
</div>
</ion-col>
<ion-col>
@ -63,7 +63,7 @@
<ion-row>
<ion-col size="3">
<div>
ion-col[width-25]
ion-col [size="3"]
</div>
</ion-col>
<ion-col>
@ -73,7 +73,7 @@
</ion-col>
<ion-col size="3">
<div>
ion-col[width-25]
ion-col [size="3"]
</div>
</ion-col>
</ion-row>
@ -81,12 +81,12 @@
<ion-row>
<ion-col size="3">
<div>
ion-col[width-25]
ion-col [size="3"]
</div>
</ion-col>
<ion-col size="3" offset="3">
<div>
ion-col[width-25][offset-25]
ion-col [size="3"] [offset="3"]
</div>
</ion-col>
</ion-row>
@ -123,7 +123,7 @@
<ion-row>
<ion-col align-self-start>
<div>
ion-col[top]
ion-col [start]
</div>
</ion-col>
<ion-col align-self-center>
@ -133,7 +133,7 @@
</ion-col>
<ion-col align-self-end>
<div>
ion-col[bottom]
ion-col [end]
</div>
</ion-col>
<ion-col>
@ -148,17 +148,17 @@
<ion-row align-items-start>
<ion-col>
<div>
[top] ion-col
[start] ion-col
</div>
</ion-col>
<ion-col>
<div>
[top] ion-col
[start] ion-col
</div>
</ion-col>
<ion-col align-self-end>
<div>
[top] ion-col[bottom]
[start] ion-col [end]
</div>
</ion-col>
<ion-col>
@ -198,17 +198,17 @@
<ion-row align-items-end>
<ion-col>
<div>
[bottom] ion-col
[end] ion-col
</div>
</ion-col>
<ion-col align-self-start>
<div>
[bottom] ion-col[top]
[end] ion-col [start]
</div>
</ion-col>
<ion-col>
<div>
[bottom] ion-col
[end] ion-col
</div>
</ion-col>
<ion-col>
@ -221,60 +221,60 @@
</ion-row>
<ion-row>
<ion-col size="12" col-sm>
<ion-col size="12" size-sm>
<div>
[responsive-sm] ion-col
ion-col [size="12"] [size-sm]
</div>
</ion-col>
<ion-col size="12" col-sm>
<ion-col size="12" size-sm>
<div>
[responsive-sm] ion-col
ion-col [size="12"] [size-sm]
</div>
</ion-col>
<ion-col size="12" col-sm>
<ion-col size="12" size-sm>
<div>
[responsive-sm] ion-col
ion-col [size="12"] [size-sm]
</div>
</ion-col>
<ion-col size="12" col-sm>
<ion-col size="12" size-sm>
<div>
[responsive-sm] ion-col
ion-col [size="12"] [size-sm]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" col-md>
<ion-col size="12" size-md>
<div>
[responsive-md] ion-col
ion-col [size="12"] [size-md]
</div>
</ion-col>
<ion-col size="12" col-md>
<ion-col size="12" size-md>
<div>
[responsive-md] ion-col
ion-col [size="12"] [size-md]
</div>
</ion-col>
<ion-col size="12" col-md>
<ion-col size="12" size-md>
<div>
[responsive-md] ion-col
ion-col [size="12"] [size-md]
</div>
</ion-col>
<ion-col size="12" col-md>
<ion-col size="12" size-md>
<div>
[responsive-md] ion-col
ion-col [size="12"] [size-md]
</div>
</ion-col>
</ion-row>
<ion-row responsive-lg>
<ion-col size="6" offset="3">
<ion-row>
<ion-col size="6" size-lg offset="3">
<div>
[responsive-lg] ion-col[width-50][offset-25]
ion-col [size="6"] [size-lg] [offset="3"]
</div>
</ion-col>
<ion-col size="3">
<ion-col size="3" size-lg>
<div>
[responsive-lg] ion-col[width-25]
ion-col [size="3"] [size-lg]
</div>
</ion-col>
</ion-row>

179
core/src/components/grid/usage/javascript.md Normal file
View File

@ -0,0 +1,179 @@
```html
<ion-grid>
<ion-row>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
ion-col [size="6"]
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
</ion-row>
<ion-row>
<ion-col size="3">
ion-col [size="3"]
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col size="3">
ion-col [size="3"]
</ion-col>
</ion-row>
<ion-row>
<ion-col size="3">
ion-col [size="3"]
</ion-col>
<ion-col size="3" offset="3">
ion-col [size="3"] [offset="3"]
</ion-col>
</ion-row>
<ion-row>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
<br>#
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
<br>#
</ion-col>
</ion-row>
<ion-row>
<ion-col align-self-start>
ion-col [start]
</ion-col>
<ion-col align-self-center>
ion-col [center]
</ion-col>
<ion-col align-self-end>
ion-col [end]
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>
<ion-row align-items-start>
<ion-col>
[start] ion-col
</ion-col>
<ion-col>
[start] ion-col
</ion-col>
<ion-col align-self-end>
[start] ion-col [end]
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>
<ion-row align-items-center>
<ion-col>
[center] ion-col
</ion-col>
<ion-col>
[center] ion-col
</ion-col>
<ion-col>
[center] ion-col
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>
<ion-row align-items-end>
<ion-col>
[end] ion-col
</ion-col>
<ion-col align-self-start>
[end] ion-col [start]
</ion-col>
<ion-col>
[end] ion-col
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6" size-lg offset="3">
ion-col [size="6"] [size-lg] [offset="3"]
</ion-col>
<ion-col size="3" size-lg>
ion-col [size="3"] [size-lg]
</ion-col>
</ion-row>
</ion-grid>
```