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

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

@ -18,7 +18,8 @@ $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 {
&[width-10], &[width-20], &[width-25], &[width-33], &[width-34], &[width-50], &[width-66], &[width-67], &[width-75], &[width-80], &[width-90] {
flex: 1; flex: 1;
margin-bottom: ($grid-padding-width * 3) / 2; margin-bottom: ($grid-padding-width * 3) / 2;
margin-left: 0; margin-left: 0;
@ -26,6 +27,8 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab
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 {
&[offset-10] {
margin-left: 10%; margin-left: 10%;
} }
.col-offset-20 { &[offset-20] {
margin-left: 20%; margin-left: 20%;
} }
.col-offset-25 { &[offset-25] {
margin-left: 25%; margin-left: 25%;
} }
.col-offset-33, .col-offset-34 { &[offset-33], &[offset-34] {
margin-left: 33.3333%; margin-left: 33.3333%;
} }
.col-offset-50 { &[offset-50] {
margin-left: 50%; margin-left: 50%;
} }
.col-offset-66, .col-offset-67 { &[offset-66], &[offset-67] {
margin-left: 66.6666%; margin-left: 66.6666%;
} }
.col-offset-75 { &[offset-75] {
margin-left: 75%; margin-left: 75%;
} }
.col-offset-80 { &[offset-80] {
margin-left: 80%; margin-left: 80%;
} }
.col-offset-90 { &[offset-90] {
margin-left: 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] {
flex: 0 0 10%;
max-width: 10%; max-width: 10%;
} }
.col-20 { &[width-20] {
flex: 0, 0, 20%; flex: 0 0 20%;
max-width: 20%; max-width: 20%;
} }
.col-25 { &[width-25] {
flex: 0, 0, 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
} }
.col-33, .col-34 { &[width-33], &[width-34] {
flex: 0, 0, 33.3333%; flex: 0 0 33.3333%;
max-width: 33.3333%; max-width: 33.3333%;
} }
.col-50 { &[width-50] {
flex: 0, 0, 50%; flex: 0 0 50%;
max-width: 50%; max-width: 50%;
} }
.col-66, .col-67 { &[width-66], &[width-67] {
flex: 0, 0, 66.6666%; flex: 0 0 66.6666%;
max-width: 66.6666%; max-width: 66.6666%;
} }
.col-75 { &[width-75] {
flex: 0, 0, 75%; flex: 0 0 75%;
max-width: 75%; max-width: 75%;
} }
.col-80 { &[width-80] {
flex: 0, 0, 80%; flex: 0 0 80%;
max-width: 80%; max-width: 80%;
} }
.col-90 { &[width-90] {
flex: 0, 0, 90%; flex: 0 0 90%;
max-width: 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>