Ionic-grid
イオン-グリッド
*Ionic Grid System* の操作は簡単です。 主に2つのクラスがあります。行を操作する *row* と列を操作する *col* です。必要な数の列または行を選択できます。 これらはすべて、使用可能なスペースに合わせてサイズを調整しますが、ニーズに合わせてこの動作を変更できます。
注-このチュートリアルのすべての例では、わかりやすい方法でグリッドを表示できるように、グリッドに境界線が適用されます。
シンプルグリッド
次の例は、 col クラスと row クラスの使用方法を示しています。 2つの行を作成します。 最初の行には5つの列があり、2番目の行には3つしかありません。 列の幅が1行目と2行目でどのように異なるかに注目してください。
<div class = "row">
<div class = "col">col 1</div>
<div class = "col">col 2</div>
<div class = "col">col 3</div>
<div class = "col">col 4</div>
<div class = "col">col 5</div>
</div>
<div class = "row">
<div class = "col">col 1</div>
<div class = "col">col 2</div>
<div class = "col">col 3</div>
</div>上記のコードは、次の画面を生成します-
列サイズ
列サイズを自動的に割り当てたままにしたくない場合があります。 この場合、 col プレフィックスの後に、 row 幅のパーセンテージを表す数値を選択できます。 これは、特定のサイズが適用された列にのみ適用されます。 他の列は、残っている使用可能なスペースに合わせて調整されます。
次の例では、最初の列は全幅の50％を使用し、他の列はそれに応じて調整します。
<div class = "row">
<div class = "col col-50">col 1</div>
<div class = "col">col 2</div>
<div class = "col">col 3</div>
<div class = "col">col 4</div>
<div class = "col">col 5</div>
</div>
<div class = "row">
<div class = "col col-50">col 1</div>
<div class = "col">col 2</div>
<div class = "col">col 3</div>
</div>上記のコードは、次の画面を生成します-
次の表は、イオングリッドシステムが提供する利用可能なパーセンテージオプションを示しています-
列パーセントのクラス名
| Class Name | Percentage Used |
|---|---|
| col-10 | 10% |
| col-20 | 20% |
| col-25 | 25% |
| col-33 | 33.3333% |
| col-50 | 50% |
| col-67 | 66.6666% |
| col-75 | 75% |
| col-80 | 80% |
| col-90 | 90% |
水平および垂直位置決め
列は左からオフセットできます。 列の特定のサイズに対して同じように機能します。 今回は接頭辞が col-offset になり、上の表に示されているのと同じパーセンテージの数値を使用します。 次の例は、両方の行の2番目の列を25％オフセットする方法を示しています。
<div class = "row">
<div class = "col">col 1</div>
<div class = "col col-offset-25">col 2</div>
<div class = "col">col 3</div>
<div class = "col">col 4</div>
<div class = "col">col 5</div>
</div>
<div class = "row">
<div class = "col">col 1</div>
<div class = "col col-offset-25">col 2</div>
<div class = "col">col 3</div>
</div>上記のコードは、次の画面を生成します-
行内の列を垂直方向に整列させることもできます。 使用できる3つのクラスがあります。つまり、 top 、 center 、 col プレフィックス付きの bottom クラスです。 次のコードは、両方の行の最初の3列を垂直に配置する方法を示しています。
注-次の例では、CSSに*“。col \ {height：120px}” *を追加して、列の垂直方向の配置を示しています。
<div class = "row">
<div class = "col col-top">col 1</div>
<div class = "col col-center">col 2</div>
<div class = "col col-bottom">col 3</div>
<div class = "col">col 4</div>
<div class = "col">col 5</div>
</div>
<div class = "row">
<div class = "col col-top">col 1</div>
<div class = "col col-center">col 2</div>
<div class = "col col-bottom">col 3</div>
</div>上記のコードは、次の画面を生成します-
レスポンシブグリッド
Ionic Gridは、レスポンシブレイアウトにも使用できます。 使用可能なクラスは3つあります。 responsive-sm クラスは、ビューポートが横長の電話よりも小さい場合、列を単一の行に折りたたみます。 ビューポートがポートレートタブレットよりも小さい場合、 responsive-md クラスが適用されます。 ビューポートがランドスケープタブレットより小さい場合、 responsive-lg クラスが適用されます。
次の例の後の最初の画像は、モバイルデバイスでの responsive-sm クラスの外観を示し、2番目の画像は、タブレットデバイスでの同じレスポンシブグリッドの外観を示しています。
<div class = "row responsive-sm">
<div class = "col col-25">col 1</div>
<div class = "col">col 2</div>
<div class = "col">col 3</div>
<div class = "col">col 4</div>
<div class = "col">col 5</div>
</div>
<div class = "row responsive-sm">
<div class = "col">col 1</div>
<div class = "col">col 2</div>
<div class = "col">col 3</div>
</div>
