mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
61 lines
979 B
HTML
61 lines
979 B
HTML
<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>
|