mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
72 lines
1.4 KiB
HTML
72 lines
1.4 KiB
HTML
<ion-toolbar><ion-title>Grid Alignment</ion-title></ion-toolbar>
|
|
|
|
<ion-content class="alignment-demo">
|
|
<ion-row>
|
|
<ion-col>
|
|
ion-col
|
|
</ion-col>
|
|
<ion-col text-right>
|
|
ion-col[text-right]
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row text-center>
|
|
<ion-col>
|
|
ion-row[text-center]
|
|
</ion-col>
|
|
<ion-col>
|
|
ion-row[text-center]
|
|
</ion-col>
|
|
<ion-col>
|
|
ion-row[text-center]
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col text-left>
|
|
ion-col[text-left]
|
|
</ion-col>
|
|
<ion-col text-left>
|
|
ion-col[text-left]
|
|
</ion-col>
|
|
<ion-col text-right>
|
|
ion-col[text-right]
|
|
</ion-col>
|
|
<ion-col text-right>
|
|
ion-col[text-right]
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col>
|
|
<button small>Button 1</button>
|
|
</ion-col>
|
|
<ion-col width-50 text-center>
|
|
<button small>Button 2</button>
|
|
<button small>Button 3</button>
|
|
</ion-col>
|
|
<ion-col text-right>
|
|
<button small>Button 4</button>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col>
|
|
<button small>Button 1</button>
|
|
<button small>Button 2</button>
|
|
</ion-col>
|
|
<ion-col text-right>
|
|
<button small>Button 3</button>
|
|
<button small>Button 4</button>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
.alignment-demo ion-row {
|
|
border: 1px solid #ddd;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|