Skip to main content
Version: v7

ion-col

shadow

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

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

Column Alignment

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

プロパティ

offset

Descriptionオフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。
Attributeoffset
Typestring | undefined
Defaultundefined

offsetLg

DescriptionLgスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attributeoffset-lg
Typestring | undefined
Defaultundefined

offsetMd

Descriptionmdスクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attributeoffset-md
Typestring | undefined
Defaultundefined

offsetSm

Descriptionsmスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attributeoffset-sm
Typestring | undefined
Defaultundefined

offsetXl

Descriptionxlスクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attributeoffset-xl
Typestring | undefined
Defaultundefined

offsetXs

Descriptionxs画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。
Attributeoffset-xs
Typestring | undefined
Defaultundefined

pull

Description列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。
Attributepull
Typestring | undefined
Defaultundefined

pullLg

DescriptionLGスクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attributepull-lg
Typestring | undefined
Defaultundefined

pullMd

Descriptionmdスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。
Attributepull-md
Typestring | undefined
Defaultundefined

pullSm

Descriptionsmスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attributepull-sm
Typestring | undefined
Defaultundefined

pullXl

Descriptionxlスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attributepull-xl
Typestring | undefined
Defaultundefined

pullXs

Descriptionxsスクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。
Attributepull-xs
Typestring | undefined
Defaultundefined

push

Descriptionカラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attributepush
Typestring | undefined
Defaultundefined

pushLg

DescriptionLGスクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。
Attributepush-lg
Typestring | undefined
Defaultundefined

pushMd

Descriptionmdスクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。
Attributepush-md
Typestring | undefined
Defaultundefined

pushSm

Descriptionsmスクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。
Attributepush-sm
Typestring | undefined
Defaultundefined

pushXl

Descriptionxlスクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。
Attributepush-xl
Typestring | undefined
Defaultundefined

pushXs

Descriptionxs画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。
Attributepush-xs
Typestring | undefined
Defaultundefined

size

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

sizeLg

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

sizeMd

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

sizeSm

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

sizeXl

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

sizeXs

Descriptionxsスクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。 "auto"が渡された場合、カラムはそのコンテンツのサイズとなる。
Attributesize-xs
Typestring | undefined
Defaultundefined

イベント

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カスタムプロパティ

NameDescription
--ion-grid-column-paddingカラムのPadding
--ion-grid-column-padding-lgLG以上の画面でのコラムのPadding
--ion-grid-column-padding-mdmdスクリーン以上のカラムのPadding
--ion-grid-column-padding-smスマートフォン以上の画面では、コラムにパッドを入れる。
--ion-grid-column-padding-xlXL以上の画面でのカラムのPadding
--ion-grid-column-padding-xsxsスクリーン以上のカラムのPadding
--ion-grid-columnsグリッドのカラムの総数

Slots

No slots available for this component.