ion-col

shadow

Columnは、Grid システムのセルラーコンポーネントで、rowの内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。

詳しくは、gridのドキュメントを参照してください。

Column Alignment

デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムはフレックスアイテムなので、この動作をカスタマイズするために、カラムに適用できるいくつかのCSSクラス があります。

プロパティ

offset

Description	オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。
Attribute	offset
Type	string ｜ undefined
Default	undefined

offsetLg

Description	Lgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute	offset-lg
Type	string ｜ undefined
Default	undefined

offsetMd

Description	mdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute	offset-md
Type	string ｜ undefined
Default	undefined

offsetSm

Description	smスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute	offset-sm
Type	string ｜ undefined
Default	undefined

offsetXl

Description	xlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute	offset-xl
Type	string ｜ undefined
Default	undefined

offsetXs

Description	xs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。
Attribute	offset-xs
Type	string ｜ undefined
Default	undefined

pull

Description	列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。
Attribute	pull
Type	string ｜ undefined
Default	undefined

pullLg

Description	LGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute	pull-lg
Type	string ｜ undefined
Default	undefined

pullMd

Description	mdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。
Attribute	pull-md
Type	string ｜ undefined
Default	undefined

pullSm

Description	smスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute	pull-sm
Type	string ｜ undefined
Default	undefined

pullXl

Description	xlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute	pull-xl
Type	string ｜ undefined
Default	undefined

pullXs

Description	xsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attribute	pull-xs
Type	string ｜ undefined
Default	undefined

push

Description	カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute	push
Type	string ｜ undefined
Default	undefined

pushLg

Description	LGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。
Attribute	push-lg
Type	string ｜ undefined
Default	undefined

pushMd

Description	mdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。
Attribute	push-md
Type	string ｜ undefined
Default	undefined

pushSm

Description	smスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attribute	push-sm
Type	string ｜ undefined
Default	undefined

pushXl

Description	xlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。
Attribute	push-xl
Type	string ｜ undefined
Default	undefined

pushXs

Description	xs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。
Attribute	push-xs
Type	string ｜ undefined
Default	undefined

size

Description	カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。
Attribute	size
Type	string ｜ undefined
Default	undefined

sizeLg

Description	lgスクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。 "auto"が渡された場合、カラムはそのコンテンツのサイズになります。
Attribute	size-lg
Type	string ｜ undefined
Default	undefined

sizeMd

Description	mdスクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。
Attribute	size-md
Type	string ｜ undefined
Default	undefined

sizeSm

Description	smスクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。
Attribute	size-sm
Type	string ｜ undefined
Default	undefined

sizeXl

Description	xlスクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。"auto"が渡された場合、カラムはそのコンテンツのサイズになります。
Attribute	size-xl
Type	string ｜ undefined
Default	undefined

sizeXs

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.