ion-col
Columnは、Grid システムのセルラーコンポーネントで、rowの内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
詳しくは、gridのドキュメントを参照してください。
Column Alignment
デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムはフレックスアイテムなので、この動作をカスタマイズするために、カラムに適用できるいくつかのCSSクラス があります。
プロパティ
offset
Description オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。
Attribute
offset Type
string | undefined Default
undefinedoffsetLg
Description lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute
offset-lg Type
string | undefined Default
undefinedoffsetMd
Description mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute
offset-md Type
string | undefined Default
undefinedoffsetSm
Description smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute
offset-sm Type
string | undefined Default
undefinedoffsetXl
Description xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute
offset-xl Type
string | undefined Default
undefinedoffsetXs
Description xsスクリーンのカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。
Attribute
offset-xs Type
string | undefined Default
undefinedpull
Description 列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。
Attribute
pull Type
string | undefined Default
undefinedpullLg
Description lgスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute
pull-lg Type
string | undefined Default
undefinedpullMd
Description mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。
Attribute
pull-md Type
string | undefined Default
undefinedpullSm
Description smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute
pull-sm Type
string | undefined Default
undefinedpullXl
Description xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute
pull-xl Type
string | undefined Default
undefinedpullXs
Description xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute
pull-xs Type
string | undefined Default
undefinedpush
Description カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute
push Type
string | undefined Default
undefinedpushLg
Description lgスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。
Attribute
push-lg Type
string | undefined Default
undefinedpushMd
Description mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。
Attribute
push-md Type
string | undefined Default
undefinedpushSm
Description smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute
push-sm Type
string | undefined Default
undefinedpushXl
Description xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。
Attribute
push-xl Type
string | undefined Default
undefinedpushXs
Description xsスクリーン分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。
Attribute
push-xs Type
string | undefined Default
undefinedsize
Description カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。
"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 Attribute
size Type
string | undefined Default
undefinedsizeLg
Description lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。
"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 Attribute
size-lg Type
string | undefined Default
undefinedsizeMd
Description mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。
"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 Attribute
size-md Type
string | undefined Default
undefinedsizeSm
Description smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。
"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 Attribute
size-sm Type
string | undefined Default
undefinedsizeXl
Description xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。
"auto"が渡された場合、カラムはそのコンテンツのサイズになります。 Attribute
size-xl Type
string | undefined Default
undefinedsizeXs
Description xsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。
"auto"が渡された場合、カラムはそのコンテンツのサイズとなる。 Attribute
size-xs Type
string | undefined Default
undefinedイベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
| 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 | グリッドのカラムの総数 |
Slots
No slots available for this component.