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元素。

对于每个断点，可以使用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支持断点，偏移和对齐，使开发人员能够完全控制布局。不同断点、不同列数的设计，让设计师们可以更好的运用网格布局来达到最佳的设计效果。