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

feat(grid): converted classes to attributes and updated test to have more examples

Browse Source 
closes #563
This commit is contained in:
Brandy Carney
2015-11-17 14:23:48 -05:00
parent 1c7dcc25c4
commit 97f295580f
3 changed files with 320 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
ionic/components/grid/test/basic/e2e.ts Normal file
View File

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

@@ -2,43 +2,257 @@
<ion-content class="grid-demo">
<ion-row>
<ion-col>Col 1</ion-col>
<ion-col>Col 2</ion-col>
<ion-col>Col 3</ion-col>
<ion-col>
Col 4<br>
w/ 3 lines<br>
of text<br>
<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-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>
<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 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>Col 1</ion-col>
<ion-col>Col 2</ion-col>
<ion-col>Col 3</ion-col>
<ion-col>
Col 4<br>
w/ 3 lines<br>
center<br>
<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 baseline>
<ion-col>Col 1</ion-col>
<ion-col>Col 2</ion-col>
<ion-col>Col 3</ion-col>
<ion-row bottom>
<ion-col>
Col 4<br>
w/ 3 lines<br>
baseline<br>
<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-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-content>
<style>
.grid-demo ion-col {
.grid-demo ion-col div {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 1px;
padding: 10px 5px;
}
</style>