javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

165
ionic/components/grid/grid.scss
View File

@ -18,13 +18,16 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab
#{$selector} { #{$selector} {
flex-direction: column; flex-direction: column;
.col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 { ion-col {
flex: 1; &[width-10], &[width-20], &[width-25], &[width-33], &[width-34], &[width-50], &[width-66], &[width-67], &[width-75], &[width-80], &[width-90] {
margin-bottom: ($grid-padding-width * 3) / 2; flex: 1;
margin-left: 0; margin-bottom: ($grid-padding-width * 3) / 2;
max-width: 100%; margin-left: 0;
width: 100%; max-width: 100%;
width: 100%;
}
} }
} }
} }
} }
@ -43,10 +46,6 @@ ion-row {
padding: 0; padding: 0;
} }
> .col {
padding: 0;
}
&[top] { &[top] {
align-items: flex-start; align-items: flex-start;
} }
@ -82,44 +81,48 @@ ion-col {
&[bottom] { &[bottom] {
align-self: flex-end; align-self: flex-end;
} }
&[center] { &[center] {
align-self: center; align-self: center;
} }
&[stretch] {
align-self: stretch;
}
&[baseline] {
align-self: baseline;
}
} }
/* Vertically Align Columns */
/* .row-* vertically aligns every .col in the .row */
/* .col-* vertically aligns an individual .col */
/* Column Offsets */ /* Column Offsets */
.col-offset-10 { ion-col {
margin-left: 10%; &[offset-10] {
} margin-left: 10%;
.col-offset-20 { }
margin-left: 20%; &[offset-20] {
} margin-left: 20%;
.col-offset-25 { }
margin-left: 25%; &[offset-25] {
} margin-left: 25%;
.col-offset-33, .col-offset-34 { }
margin-left: 33.3333%; &[offset-33], &[offset-34] {
} margin-left: 33.3333%;
.col-offset-50 { }
margin-left: 50%; &[offset-50] {
} margin-left: 50%;
.col-offset-66, .col-offset-67 { }
margin-left: 66.6666%; &[offset-66], &[offset-67] {
} margin-left: 66.6666%;
.col-offset-75 { }
margin-left: 75%; &[offset-75] {
} margin-left: 75%;
.col-offset-80 { }
margin-left: 80%; &[offset-80] {
} margin-left: 80%;
.col-offset-90 { }
margin-left: 90%; &[offset-90] {
margin-left: 90%;
}
} }
@ -127,50 +130,52 @@ ion-col {
/* By default each grid column will evenly distribute */ /* By default each grid column will evenly distribute */
/* across the grid. However, you can specify individual */ /* across the grid. However, you can specify individual */
/* columns to take up a certain size of the available area */ /* columns to take up a certain size of the available area */
.col-10 { ion-col {
flex: 0, 0, 10%; &[width-10] {
max-width: 10%; flex: 0 0 10%;
} max-width: 10%;
.col-20 { }
flex: 0, 0, 20%; &[width-20] {
max-width: 20%; flex: 0 0 20%;
} max-width: 20%;
.col-25 { }
flex: 0, 0, 25%; &[width-25] {
max-width: 25%; flex: 0 0 25%;
} max-width: 25%;
.col-33, .col-34 { }
flex: 0, 0, 33.3333%; &[width-33], &[width-34] {
max-width: 33.3333%; flex: 0 0 33.3333%;
} max-width: 33.3333%;
.col-50 { }
flex: 0, 0, 50%; &[width-50] {
max-width: 50%; flex: 0 0 50%;
} max-width: 50%;
.col-66, .col-67 { }
flex: 0, 0, 66.6666%; &[width-66], &[width-67] {
max-width: 66.6666%; flex: 0 0 66.6666%;
} max-width: 66.6666%;
.col-75 { }
flex: 0, 0, 75%; &[width-75] {
max-width: 75%; flex: 0 0 75%;
} max-width: 75%;
.col-80 { }
flex: 0, 0, 80%; &[width-80] {
max-width: 80%; flex: 0 0 80%;
} max-width: 80%;
.col-90 { }
flex: 0, 0, 90%; &[width-90] {
max-width: 90%; flex: 0 0 90%;
max-width: 90%;
}
} }
/* Responsive Grid Classes */ /* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */ /* Adding a class of responsive-X to a row */
/* will trigger the flex-direction to */ /* will trigger the width-direction to */
/* change to column and add some margin */ /* change to column and add some margin */
/* to any columns in the row for clearity */ /* to any columns in the row for clearity */
@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break); @include responsive-grid-break('[responsive-sm]', $grid-responsive-sm-break);
@include responsive-grid-break('.responsive-md', $grid-responsive-md-break); @include responsive-grid-break('[responsive-md]', $grid-responsive-md-break);
@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break); @include responsive-grid-break('[responsive-lg]', $grid-responsive-lg-break);

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