javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(grid): add a test that uses grid to make a full height menu

Browse Source 
This is something users often request so it is good to have a test on
it.
This commit is contained in:
Brandy Carney
2016-01-23 14:23:23 -05:00
parent 915278a29b
commit ff60b3c5ea
2 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ionic/components/grid/test/full/index.ts Normal file
View File

@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {}

60
ionic/components/grid/test/full/main.html Normal file
View File

@ -0,0 +1,60 @@
<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
<ion-content class="grid-full">
<ion-row>
<ion-col class="cell-1">
statistics
</ion-col>
<ion-col class="cell-2">
profile
</ion-col>
<ion-col class="cell-3">
photos
</ion-col>
<ion-col class="cell-4">
laboratory
</ion-col>
<ion-col class="cell-5">
calendar
</ion-col>
<ion-col class="cell-6">
alert
</ion-col>
</ion-row>
</ion-content>
<style>
.grid-full ion-row {
height: 100%;
padding: 0;
flex-wrap: wrap;
}
.grid-full ion-col {
flex: 0 0 50%;
max-width: 50%;
text-align: center;
padding: 10px 5px;
}
.cell-1 {
background-color: #C5DCFC;
}
.cell-2 {
background-color: #262B69;
}
.cell-3 {
background-color: #A0C5FA;
}
.cell-4 {
background-color: #B3D0FC;
}
.cell-5 {
background-color: #73A7F9;
}
.cell-6 {
background-color: #8CB9FA;
}
</style>