shadow
Columnは、Grid システムのセルラーコンポーネントで、rowの内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
詳細はgridのドキュメントを参照してください。
デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムはフレックスアイテムなので、この動作をカスタマイズするために、カラムに適用できるいくつかのCSSクラス があります。
| Description | オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。 |
| Attribute | offset |
| Type | string ｜ undefined |
| Default | undefined |
| Description | lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
| Attribute | offset-lg |
| Type | string ｜ undefined |
| Default | undefined |
| Description | mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
| Attribute | offset-md |
| Type | string ｜ undefined |
| Default | undefined |
| Description | smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
| Attribute | offset-sm |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
| Attribute | offset-xl |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xsスクリーンのカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。 |
| Attribute | offset-xs |
| Type | string ｜ undefined |
| Default | undefined |
| Description | 列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。 |
| Attribute | pull |
| Type | string ｜ undefined |
| Default | undefined |
| Description | lgスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
| Attribute | pull-lg |
| Type | string ｜ undefined |
| Default | undefined |
| Description | mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。 |
| Attribute | pull-md |
| Type | string ｜ undefined |
| Default | undefined |
| Description | smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
| Attribute | pull-sm |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
| Attribute | pull-xl |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 |
| Attribute | pull-xs |
| Type | string ｜ undefined |
| Default | undefined |
| Description | カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
| Attribute | push |
| Type | string ｜ undefined |
| Default | undefined |
| Description | lgスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。 |
| Attribute | push-lg |
| Type | string ｜ undefined |
| Default | undefined |
| Description | mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。 |
| Attribute | push-md |
| Type | string ｜ undefined |
| Default | undefined |
| Description | smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 |
| Attribute | push-sm |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。 |
| Attribute | push-xl |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xsスクリーン分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。 |
| Attribute | push-xs |
| Type | string ｜ undefined |
| Default | undefined |
| Description | カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 |
| Attribute | size |
| Type | string ｜ undefined |
| Default | undefined |
| Description | lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。 "auto"が渡された場合、カラムはそのコンテンツのサイズになります。 |
| Attribute | size-lg |
| Type | string ｜ undefined |
| Default | undefined |
| Description | mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 |
| Attribute | size-md |
| Type | string ｜ undefined |
| Default | undefined |
| Description | smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 |
| Attribute | size-sm |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 |
| Attribute | size-xl |
| Type | string ｜ undefined |
| Default | undefined |
| Description | xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。 "auto"が渡された場合、カラムはそのコンテンツのサイズとなる。 |
| Attribute | size-xs |
| Type | string ｜ undefined |
| Default | undefined |
No events available for this component.
No public methods available for this component.
No CSS shadow parts available for this component.
| Name | Description |
|---|
--ion-grid-column-padding | カラムのPadding |
--ion-grid-column-padding-lg | lg以上の画面でのコラムのPadding |
--ion-grid-column-padding-md | mdスクリーン以上のカラムのPadding |
--ion-grid-column-padding-sm | スマートフォン以上の画面では、コラムにパッドを入れる。 |
--ion-grid-column-padding-xl | xl以上の画面でのカラムのPadding |
--ion-grid-column-padding-xs | xsスクリーン以上のカラムのPadding |
--ion-grid-columns | グリッドのカラムの総数 |
No slots available for this component.