javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): add ion-grid element which wraps the rows/cols and adds padding

Browse Source 
update tests to use new ion-grid element

references #6238
This commit is contained in:
Brandy Carney
2016-04-26 13:33:12 -04:00
parent a48ee6eab0
commit a0c0228acb
3 changed files with 305 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
ionic/components/grid/test/basic/main.html
View File

@@ -1,251 +1,253 @@
<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
<ion-content class="grid-demo">
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-grid>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
<div>
ion-col[width-50]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50>
<div>
ion-col[width-50]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col width-25 offset-25>
<div>
ion-col[width-25][offset-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-25>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col width-25 offset-25>
<div>
ion-col[width-25][offset-25]
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div>
ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col top>
<div>
ion-col[top]
</div>
</ion-col>
<ion-col center>
<div>
ion-col[center]
</div>
</ion-col>
<ion-col bottom>
<div>
ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col top>
<div>
ion-col[top]
</div>
</ion-col>
<ion-col center>
<div>
ion-col[center]
</div>
</ion-col>
<ion-col bottom>
<div>
ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row top>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col bottom>
<div>
[top] ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row top>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col>
<div>
[top] ion-col
</div>
</ion-col>
<ion-col bottom>
<div>
[top] ion-col[bottom]
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row center>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row center>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
[center] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row bottom>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col top>
<div>
[bottom] ion-col[top]
</div>
</ion-col>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row bottom>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col top>
<div>
[bottom] ion-col[top]
</div>
</ion-col>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col>
<div>
ion-col<br>#<br>#
</div>
</ion-col>
</ion-row>
<ion-row responsive-sm>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-sm>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-md>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-md>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<div>
[responsive-md] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-lg>
<ion-col width-50 offset-25>
<div>
[responsive-lg] ion-col[width-50][offset-25]
</div>
</ion-col>
<ion-col width-25>
<div>
[responsive-lg] ion-col[width-25]
</div>
</ion-col>
</ion-row>
<ion-row responsive-lg>
<ion-col width-50 offset-25>
<div>
[responsive-lg] ion-col[width-50][offset-25]
</div>
</ion-col>
<ion-col width-25>
<div>
[responsive-lg] ion-col[width-25]
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>