メインコンテンツまでスキップ
バージョン: v8 (beta)

ion-col

shadow

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

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

Column Alignment

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

プロパティ

offset

DescriptionThe amount to offset the column, in terms of how many columns it should shift to the end of the total available.
Attributeoffset
Typestring | undefined
Defaultundefined

offsetLg

DescriptionThe amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
Attributeoffset-lg
Typestring | undefined
Defaultundefined

offsetMd

DescriptionThe amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
Attributeoffset-md
Typestring | undefined
Defaultundefined

offsetSm

DescriptionThe amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
Attributeoffset-sm
Typestring | undefined
Defaultundefined

offsetXl

DescriptionThe amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
Attributeoffset-xl
Typestring | undefined
Defaultundefined

offsetXs

DescriptionThe amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
Attributeoffset-xs
Typestring | undefined
Defaultundefined

pull

DescriptionThe amount to pull the column, in terms of how many columns it should shift to the start of the total available.
Attributepull
Typestring | undefined
Defaultundefined

pullLg

DescriptionThe amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
Attributepull-lg
Typestring | undefined
Defaultundefined

pullMd

DescriptionThe amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
Attributepull-md
Typestring | undefined
Defaultundefined

pullSm

DescriptionThe amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
Attributepull-sm
Typestring | undefined
Defaultundefined

pullXl

DescriptionThe amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
Attributepull-xl
Typestring | undefined
Defaultundefined

pullXs

DescriptionThe amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
Attributepull-xs
Typestring | undefined
Defaultundefined

push

DescriptionThe amount to push the column, in terms of how many columns it should shift to the end of the total available.
Attributepush
Typestring | undefined
Defaultundefined

pushLg

DescriptionThe amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
Attributepush-lg
Typestring | undefined
Defaultundefined

pushMd

DescriptionThe amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
Attributepush-md
Typestring | undefined
Defaultundefined

pushSm

DescriptionThe amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
Attributepush-sm
Typestring | undefined
Defaultundefined

pushXl

DescriptionThe amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
Attributepush-xl
Typestring | undefined
Defaultundefined

pushXs

DescriptionThe amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
Attributepush-xs
Typestring | undefined
Defaultundefined

size

DescriptionThe size of the column, in terms of how many columns it should take up out of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize
Typestring | undefined
Defaultundefined

sizeLg

DescriptionThe size of the column for lg screens, in terms of how many columns it should take up out of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-lg
Typestring | undefined
Defaultundefined

sizeMd

DescriptionThe size of the column for md screens, in terms of how many columns it should take up out of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-md
Typestring | undefined
Defaultundefined

sizeSm

DescriptionThe size of the column for sm screens, in terms of how many columns it should take up out of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-sm
Typestring | undefined
Defaultundefined

sizeXl

DescriptionThe size of the column for xl screens, in terms of how many columns it should take up out of the total available. If "auto" is passed, the column will be the size of its content.
Attributesize-xl
Typestring | undefined
Defaultundefined

sizeXs

DescriptionThe size of the column for xs screens, in terms of how many columns it should take up out of the total available. If "auto" is passed, the column will be the size of its content.
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-paddingPadding for the Column
--ion-grid-column-padding-lgPadding for the Column on lg screens and up
--ion-grid-column-padding-mdPadding for the Column on md screens and up
--ion-grid-column-padding-smPadding for the Column on sm screens and up
--ion-grid-column-padding-xlPadding for the Column on xl screens and up
--ion-grid-column-padding-xsPadding for the Column on xs screens and up
--ion-grid-columnsThe number of total Columns in the Grid

Slots

No slots available for this component.