ion-col

shadow

カラムはグリッドシステムのセル状コンポーネントであり、row の中に配置されます。カラムは行全体に広がります。グリッド内のすべてのコンテンツはカラム内に配置する必要があります。

詳細については、グリッドのドキュメントを参照してください。

カラムの配置

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

プロパティ

offset

説明	利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	offset
型	string ｜ undefined
デフォルト	undefined

offsetLg

説明	lg画面でカラムをオフセットする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	offset-lg
型	string ｜ undefined
デフォルト	undefined

offsetMd

説明	md画面でカラムをオフセットする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	offset-md
型	string ｜ undefined
デフォルト	undefined

offsetSm

説明	sm画面でカラムをオフセットする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	offset-sm
型	string ｜ undefined
デフォルト	undefined

offsetXl

説明	xl画面でカラムをオフセットする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	offset-xl
型	string ｜ undefined
デフォルト	undefined

offsetXs

説明	xs画面でカラムをオフセットする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	offset-xs
型	string ｜ undefined
デフォルト	undefined

pull

説明	利用可能な合計数から、カラムの先頭にずらすカラム数を指定します。
属性	pull
型	string ｜ undefined
デフォルト	undefined

pullLg

説明	lg画面でカラムをプルする量。利用可能な合計数から、カラムの先頭にずらすカラム数を指定します。
属性	pull-lg
型	string ｜ undefined
デフォルト	undefined

pullMd

説明	md画面でカラムをプルする量。利用可能な合計数から、カラムの先頭にずらすカラム数を指定します。
属性	pull-md
型	string ｜ undefined
デフォルト	undefined

pullSm

説明	sm画面でカラムをプルする量。利用可能な合計数から、カラムの先頭にずらすカラム数を指定します。
属性	pull-sm
型	string ｜ undefined
デフォルト	undefined

pullXl

説明	xl画面でカラムをプルする量。利用可能な合計数から、カラムの先頭にずらすカラム数を指定します。
属性	pull-xl
型	string ｜ undefined
デフォルト	undefined

pullXs

説明	xs画面でカラムをプルする量。利用可能な合計数から、カラムの先頭にずらすカラム数を指定します。
属性	pull-xs
型	string ｜ undefined
デフォルト	undefined

push

説明	利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	push
型	string ｜ undefined
デフォルト	undefined

pushLg

説明	lg画面でカラムをプッシュする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	push-lg
型	string ｜ undefined
デフォルト	undefined

pushMd

説明	md画面でカラムをプッシュする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	push-md
型	string ｜ undefined
デフォルト	undefined

pushSm

説明	sm画面でカラムをプッシュする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	push-sm
型	string ｜ undefined
デフォルト	undefined

pushXl

説明	xl画面でカラムをプッシュする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	push-xl
型	string ｜ undefined
デフォルト	undefined

pushXs

説明	xs画面でカラムをプッシュする量。利用可能な合計数から、カラムを末尾にずらすカラム数を指定します。
属性	push-xs
型	string ｜ undefined
デフォルト	undefined

size

説明	利用可能な合計数から、カラムが占めるカラム数を指定します。「auto」を指定すると、カラムはコンテンツのサイズになります。
属性	size
型	string ｜ undefined
デフォルト	undefined

sizeLg

説明	lg画面でカラムのサイズを指定します。利用可能な合計数から、カラムが占めるカラム数を指定します。「auto」を指定すると、カラムはコンテンツのサイズになります。
属性	size-lg
型	string ｜ undefined
デフォルト	undefined

sizeMd

説明	md画面でカラムのサイズを指定します。利用可能な合計数から、カラムが占めるカラム数を指定します。「auto」を指定すると、カラムはコンテンツのサイズになります。
属性	size-md
型	string ｜ undefined
デフォルト	undefined

sizeSm

説明	sm画面でカラムのサイズを指定します。利用可能な合計数から、カラムが占めるカラム数を指定します。「auto」を指定すると、カラムはコンテンツのサイズになります。
属性	size-sm
型	string ｜ undefined
デフォルト	undefined

sizeXl

説明	xl画面でカラムのサイズを指定します。利用可能な合計数から、カラムが占めるカラム数を指定します。「auto」を指定すると、カラムはコンテンツのサイズになります。
属性	size-xl
型	string ｜ undefined
デフォルト	undefined

sizeXs

説明	xs画面でカラムのサイズを指定します。利用可能な合計数から、カラムが占めるカラム数を指定します。「auto」を指定すると、カラムはコンテンツのサイズになります。
属性	size-xs
型	string ｜ undefined
デフォルト	undefined

イベント

このコンポーネントで使用できるイベントはありません。

メソッド

このコンポーネントで使用できる公開メソッドはありません。

CSSシャドウパーツ

このコンポーネントで使用できるCSSシャドウパーツはありません。

CSSカスタムプロパティ

名前	説明
--ion-grid-column-padding	カラムのパディング
--ion-grid-column-padding-lg	lg画面以上でのカラムのパディング
--ion-grid-column-padding-md	md画面以上でのカラムのパディング
--ion-grid-column-padding-sm	sm画面以上でのカラムのパディング
--ion-grid-column-padding-xl	xl画面以上でのカラムのパディング
--ion-grid-column-padding-xs	xs画面以上でのカラムのパディング
--ion-grid-columns	グリッド内のカラムの総数

スロット

このコンポーネントで使用できるスロットはありません。