Ionic网格

本文概述

• 网格列
• 网格行
• 列大小
• 重新排序列
• 列对齐
• 网格尺寸

Ionic网格系统是一个功能强大的基于移动的Flexbox系统, 用于构建自定义布局。 flexbox是一项CSS功能, Ionic支持的所有设备都支持它。Ionic网格主要由网格, 行和列三个单元组成。它允许你选择所需的行和列。他们可以自动调整大小以适应可用空间, 尽管可以根据需要进行更改。Ionic网格由12列布局组成, 根据屏幕大小, 其断点不同。我们还可以使用CSS自定义列数。

网格列

网格列是行内的单元格组件。网格的所有内容都在列内。

网格行

网格行是包含不同数量列的水平组件。这样可以确保列的位置正确。

例

在这里, 我们正在创建一个简单的网格, 向你显示行和列的用法。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Grid Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content class="padding" color="light">
  <ion-grid>
    <ion-row>
      <ion-col>ion-col 1</ion-col>
      <ion-col>ion-col 2</ion-col>
      <ion-col>ion-col 3</ion-col>
    </ion-row>
    <ion-row>
      <ion-col>ion-col 4</ion-col>
      <ion-col>ion-col 5</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

输出量

当我们执行该应用程序时, 它将给出以下输出。

列大小

如果你不想让列大小自动调整, 则可以选择size属性以根据需要设置列大小。以下示例有助于我们准确地理解size属性的用法。

例

注意：此示例将在列上应用边框, 以易于理解的方式显示它。

在此, 第一行使用自定义大小, 而第二行使用默认列大小。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Grid Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content class="padding" color="light">
  <ion-grid>
    <ion-row>
      <ion-col size="5">col 1</ion-col>
      <ion-col >col 2</ion-col>
      <ion-col size="3">col 3</ion-col>
    </ion-row>
    <ion-row>
      <ion-col>col 4</ion-col>
      <ion-col>col 5</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

输出量

重新排序列

你可以使用以下两个属性来重新排序网格列。

1. 偏移量
2. 推和拉

偏移量

此属性用于将列移动到指定列号的右侧。它将列的左边距增加指定列的数量。

推和弹出

push和pull属性将列的左右调整指定的列数。

例

以下示例清楚地了解了offset和push和pull属性的用法。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Grid Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content class="padding" color="light">
  <ion-grid>
    <ion-row>
      <ion-col size="3">
        <div>
          1 of 2
        </div>
      </ion-col>
      <ion-col size="3" offset="4">
        <div>
          2 of 2
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="9" push="3">
        <div>
          1 of 2
        </div>
      </ion-col>
      <ion-col size="3" pull="9">
        <div>
          2 of 2
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

输出量

当你执行上面的Ionic应用程序时, 你将获得以下输出。在此, 第一列使用offset属性, 第二列使用push和pull属性。

列对齐

Ionic网格允许你使用两种类型的列对齐方式, 如下所示。

1. 垂直对齐
2. 水平对齐

垂直对齐

网格系统允许多种方式垂直对齐内容。它通过向行中添加不同的类来对齐行中的列。这些不同的类是：

• Ionic对齐项目开始
• Ionic对齐项目中心
• Ionic对齐项目结束

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      Grid Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content class="padding" color="light">
  <ion-grid>
    <ion-row class="ion-align-items-start">
      <ion-col>ion-col</ion-col>
      <ion-col>ion-col</ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>
    <ion-row class="ion-align-items-center">
      <ion-col>ion-col</ion-col>
      <ion-col>ion-col</ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>
    <ion-row class="ion-align-items-end">
      <ion-col>ion-col</ion-col>
      <ion-col>ion-col</ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

输出量

在下面的输出中, 第一行将列对齐以开始, 第二行以中心对齐, 第三行以结束对齐。

水平对齐

网格系统允许多种方式将内容水平对齐。它通过向行中添加不同的类来对齐行中的列。这些不同的类是：

• Ionic证明内容开始
• Ionic调整含量中心
• Ionic调整内容端
• 围绕Ionic调整含量
• Ionic之间的合理含量

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      Grid Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content class="padding" color="light">
    <ion-grid>
        <ion-row class="ion-justify-content-start">
          <ion-col size="3">
            <div>1 of 2</div>
          </ion-col>
          <ion-col size="3">
            <div>
              2 of 2
            </div>
          </ion-col>
        </ion-row>
      
        <ion-row class="ion-justify-content-center">
          <ion-col size="3">
            <div>1 of 2</div>
          </ion-col>
          <ion-col size="3">
            <div>2 of 2</div>
          </ion-col>
        </ion-row>
      
        <ion-row class="ion-justify-content-end">
          <ion-col size="3">
            <div>1 of 2</div>
          </ion-col>
          <ion-col size="3">
            <div>2 of 2</div>
          </ion-col>
        </ion-row>
      
        <ion-row class="ion-justify-content-around">
          <ion-col size="3">
            <div>1 of 2</div>
          </ion-col>
          <ion-col size="3">
            <div>2 of 2</div>
          </ion-col>
        </ion-row>
      
        <ion-row class="ion-justify-content-between">
          <ion-col size="3">
            <div>1 of 2</div>
          </ion-col>
          <ion-col size="3">
            <div>2 of 2</div>
          </ion-col>
        </ion-row>
      </ion-grid>
</ion-content>

输出量

运行Ionic应用程序时, 它将提供以下输出。

网格尺寸

默认情况下, 网格占据屏幕的100％宽度。如果需要根据屏幕尺寸设置最大宽度, 请在<ion-grid>元素中添加fixed属性。下表显示了不同的网格大小。