mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(grid): add the css from the old grid
edit the existing grid tests to use latest attributes fixes #10912
This commit is contained in:
@@ -12,6 +12,10 @@
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
// Remove the padding from the grid and all immediate children columns
|
||||
&[no-padding] {
|
||||
padding: 0;
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<ion-col>
|
||||
<button ion-button small>Button 1</button>
|
||||
</ion-col>
|
||||
<ion-col width-50 text-center>
|
||||
<ion-col col-6 text-center>
|
||||
<button ion-button small>Button 2</button>
|
||||
<button ion-button small>Button 3</button>
|
||||
</ion-col>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col width-50>
|
||||
<ion-col col-6>
|
||||
<div>
|
||||
ion-col[width-50]
|
||||
</div>
|
||||
@@ -51,7 +51,7 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col width-25>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
@@ -61,7 +61,7 @@
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col width-25>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
@@ -69,12 +69,12 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col width-25>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col width-25 offset-25>
|
||||
<ion-col col-3 offset-3>
|
||||
<div>
|
||||
ion-col[width-25][offset-25]
|
||||
</div>
|
||||
@@ -105,17 +105,17 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col top>
|
||||
<ion-col align-self-start>
|
||||
<div>
|
||||
ion-col[top]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col center>
|
||||
<ion-col align-self-center>
|
||||
<div>
|
||||
ion-col[center]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col bottom>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
ion-col[bottom]
|
||||
</div>
|
||||
@@ -127,7 +127,7 @@
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row top>
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
@@ -138,7 +138,7 @@
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col bottom>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
[top] ion-col[bottom]
|
||||
</div>
|
||||
@@ -150,7 +150,7 @@
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row center>
|
||||
<ion-row align-items-center>
|
||||
<ion-col>
|
||||
<div>
|
||||
[center] ion-col
|
||||
@@ -173,13 +173,13 @@
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row bottom>
|
||||
<ion-row align-items-end>
|
||||
<ion-col>
|
||||
<div>
|
||||
[bottom] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col top>
|
||||
<ion-col align-self-start>
|
||||
<div>
|
||||
[bottom] ion-col[top]
|
||||
</div>
|
||||
@@ -196,46 +196,46 @@
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-sm>
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-md>
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
@@ -243,12 +243,12 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-lg>
|
||||
<ion-col width-50 offset-25>
|
||||
<ion-col col-6 offset-3>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-50][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col width-25>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-25]
|
||||
</div>
|
||||
|
||||
@@ -33,10 +33,10 @@
|
||||
|
||||
<ion-grid style="padding: 10px 0;">
|
||||
<ion-row>
|
||||
<ion-col width-50>
|
||||
<ion-col col-6>
|
||||
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a>
|
||||
</ion-col>
|
||||
<ion-col width-50 style="text-align: right;">
|
||||
<ion-col col-6 style="text-align: right;">
|
||||
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
Reference in New Issue
Block a user