了解Ionic 3网格系统
Ionic 3中的网格布局系统允许你通过行和列构建复杂的用户界面,就像流行的CSS框架,如Bootstrap和Foundation。
网格布局使用行(ion-row
)和列(ion-col
)来拆分可用空间。
创建行需要使用ion-row
指令,对于列使用ion-col
指令。
例如:
<ion-grid>
<ion-row>
<ion-col ></ion-col>
<ion-col ></ion-col>
</ion-row>
</ion-grid>
Ionic3网格系统使用12列来指定列的大小,只要用col属性( col-width )设置一个从1到12的数字,例如:
<ion-grid>
<ion-row>
<ion-col col-1>This column will take 1/12 of available horizontal area (1 column of 12)</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>This column will take the whole row (12 columns)</ion-col>
</ion-row>
</ion-grid>
就像Bootstrap一样,你可以为不同的断点提供不同的大小。
要根据屏幕的大小创建不同大小的列,只需使用以下语法:
col-<breakpoint>-<width>
宽度可以是1到12的任意值。
断点可以是xl (特小),sm(small),md(medium)或lg(large)。
例如,创建一个包含两列的一行的网格。
对于大/中型桌面屏幕或平板电脑,这两列将划分它们之间的行空间。
对于小型移动屏幕,每列将占用整个行空间。
<ion-grid>
<ion-row>
<ion-col col-sm-12 col-xl-12 col-md-6 col-lg-6 ></ion-col>
<ion-col col-sm-12 col-xl-12 col-md-6 col-lg-6 ></ion-col>
</ion-row>
</ion-grid>
结论
使用网格系统,你可以为Ionic 3应用程序构建复杂的用户界面。
相关文章