Ionic2でのグリッドシステムの使用

Ionicには、アプリのほぼすべての種類のレイアウトを作成できるグリッドコンポーネントシステムが組み込まれています。 舞台裏では、グリッドシステムはFlexboxを使用してアイテムをレイアウトするため、フレックスコンテナとフレックスアイテムを使用してレイアウトを作成すると、すべてが期待どおりに動作します。

テンプレートでグリッドシステムを使用するには、親 ion-grid 要素を定義し、その要素内の行を ion-row で定義し、最後に各行内の列をで定義します。 ] ion-col ：

<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>

デフォルトでは、列の幅は同じです。 ion-col 要素のwidth属性を使用して、この動作を変更できます。 使用可能な属性は次のとおりです。width-10、 width-20 、 width-25 、 width-33 、 width- 50 、幅-67 、幅-75 、幅-80 、幅-90。

次に、幅属性が指定された列がそれぞれにある3つの行の例を示します。

<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>

---

列が1つの行に収まらない場合は、行のwrap属性を使用して列を折り返すこともできます。

<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>

---

最後に、列の offset 属性を使用して、行内の配置を変更します。

<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>