ionic 网格(Grid)
ionic网格(Grid)技术文档
简介
Ionic Grid是一个强大的布局工具,用于在应用程序中创建网格布局和响应式设计。网格系统可以使开发者以透明且一致的方式构建布局,同时确保应用程序响应设备的大小和方向更改。
基本用法
Ionic网格系统使用一个12列的布局,开发人员可以使用这些列来布置UI元素。ionic Grid使用容器(container
)将内容包装起来,并将其划分为一定数量的 rows(行)
。 row(行)
在屏幕上水平排列。
在 row(行)
中,开发者可以定义所包含的 column(列)
数量,并将UI元素放置在 column(列)
中。这些 column(列)
必须总和为12
。
在 row(行)
外部使用 col-(列数)
来设置每个 column(列)
的宽度。其中列数
是指列所占据的数字数量,可以是1
到12
的数字。
例如:col-1
表示每列占据一份(占据12份),col-6
表示每列占据六份(占据两列),col-12
表示每列占据十二份(占据一整行)。
<ion-grid>
<ion-row>
<ion-col col-6>列1</ion-col>
<ion-col col-6>列2</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>列3</ion-col>
<ion-col col-4>列4</ion-col>
<ion-col col-4>列5</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>列6</ion-col>
</ion-row>
</ion-grid>
将上面的代码放入你的应用程序中,你会得到如下的布局。
断点
Ionic网格系统包含四个默认的断点,每个断点都有不同的列数,用于排列应用程序中的UI元素。
断点名称 | 屏幕宽度 | 栅格数 |
---|---|---|
xs | <576px | 4 |
sm | ≥576px | 8 |
md | ≥768px | 12 |
lg | ≥992px | 12 |
对于每个断点,可以使用col-断点名-列数
进行设置。
例如: col-lg-4
表示在lg
屏幕宽度断点上,每列占据四份(占据三列)。
<ion-grid>
<ion-row>
<ion-col col-12 col-lg-3>列1</ion-col>
<ion-col col-12 col-lg-9>列2</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 col-sm-6 col-lg-4>列3</ion-col>
<ion-col col-12 col-sm-6 col-lg-4>列4</ion-col>
<ion-col col-12 col-lg-4>列5</ion-col>
</ion-row>
</ion-grid>
上面的代码在大屏幕上(lg
)将会得到如下的布局。
偏移
Ionic Grid还支持对 column(列)
添加偏移(offset
)。开发者可以通过 offset
将 column(列)
推到相应的位置,而无需更改布局中的任何其他元素。
例如: offset-2
表示将列向右偏移两个数字单位(两个列的单位宽度)。
<ion-grid>
<ion-row>
<ion-col col-12 col-sm-6 offset-md-3>列1</ion-col>
<ion-col col-12 col-sm-6 offset-md-3>列2</ion-col>
</ion-row>
</ion-grid>
上面的代码在md
屏幕宽度断点将会得到如下的布局。
对齐
Ionic Grid还支持对 row(行)
中的元素进行对齐操作。 对于 row(行)
中的每个 column(列)
,可以使用以下类名来对齐。
align-self-start
: 顶端对齐align-self-center
: 居中对齐align-self-end
: 底部对齐
<ion-grid>
<ion-row>
<ion-col col-12 col-md-4 class="align-self-start">列1</ion-col>
<ion-col col-12 col-md-4 class="align-self-center">列2</ion-col>
<ion-col col-12 col-md-4 class="align-self-end">列3</ion-col>
</ion-row>
</ion-grid>
上面的代码在大屏幕上将会得到如下的布局。
总结
Ionic网格(system)可以帮助开发者构建响应式网格布局,以透明且一致的方式构建布局,同时确保应用程序响应设备的大小和方向更改。Ionic Grid支持断点,偏移和对齐,使开发人员能够完全控制布局。不同断点、不同列数的设计,让设计师们可以更好的运用网格布局来达到最佳的设计效果。