在 Ionic 2 中使用网格系统

发表 admin at 2024年8月26日

类别

未分类

标签

Ionic 带有内置网格组件系统，可让您为应用创建几乎任何类型的布局。在后台，网格系统使用 Flexbox 来布局项目，因此一切行为都与您使用弹性容器和弹性项目创建布局时的预期一致。

要在模板中使用网格系统，只需定义一个父级离子栅元素，然后是该元素内的行离子排最后在每行内添加列离子色谱：

<ion-content padding>
  <ion-grid>
    <ion-row text-center>
      <ion-col>I'm a column</ion-col>
      <ion-col>Another column</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

您在 Ionic 中的第一个网格

您会注意到，默认情况下，列的宽度相等。您可以使用离子色谱元素。可用的属性有：宽度-10，宽度-20，宽度-25，宽度-33，宽度-50，宽度-67，宽度-75，宽度-80，宽度-90。

下面是一个包含三行且每行均具有指定宽度属性的列的示例：

<ion-content padding>
  <ion-grid text-center>
    <ion-row>
      <ion-col width-67>I'm a column</ion-col>
      <ion-col width-33>Another column</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-25>A</ion-col>
      <ion-col width-25>B</ion-col>
      <ion-col width-50>C</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-33>Lone Column</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

您在 Ionic 中的第一个网格

您还可以使用裹如果列无法容纳在一行中，则在行上设置属性以进行换行：

<ion-content padding>
  <ion-grid text-center>
    <ion-row wrap>
      <ion-col width-25>Too</ion-col>
      <ion-col width-25>Many</ion-col>
      <ion-col width-25>Columns</ion-col>
      <ion-col width-25>For</ion-col>
      <ion-col width-25>One</ion-col>
      <ion-col width-25>Row</ion-col>
      <ion-col width-25>Not</ion-col>
      <ion-col width-25>A</ion-col>
      <ion-col width-25>Problem!</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

包装列

最后，使用抵消列上的属性可以改变它们在行内的位置：

<ion-content padding>
  <ion-grid text-center>
    <ion-row>
      <ion-col width-25>One</ion-col>
      <ion-col width-25 offset-50>Two</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-50 offset-25>Three</ion-col>
    </ion-row>

    <ion-row>
      <ion-col width-20>Train</ion-col>
      <ion-col width-20 offset-20>With</ion-col>
      <ion-col width-20 offset-20>Me!</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Ionic 2 列偏移