Ionic 3网格系统教程

分享于 

2分钟阅读

ionic

  繁體

了解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应用程序构建复杂的用户界面。


    SYS  系统  GRID  教程  ION  Ionic  
    相关文章