ion-col

Contents

Columnは grid system のセルとなるコンポーネントで、行の内側に入ります。 row を埋めるように展開されます。 グリッド内のすべてのコンテンツは、Columnの内側に配置する必要があります。

詳しくは Grid Layout をご覧ください。

Column attributes

デフォルトでは、column は行の高さ全体に合わせて伸縮します。 この動作をカスタマイズするために、column に追加できる属性がいくつかあります。

Property Description
align-self-start Adds align-self: flex-start. The column will be vertically aligned at the top.
align-self-center Adds align-self: center. The column will be vertically aligned in the center.
align-self-end Adds align-self: flex-end. The column will be vertically aligned at the bottom.
align-self-stretch Adds align-self: stretch. The column will be stretched to take up the entire height of the row.
align-self-baseline Adds align-self: baseline. The column will be vertically aligned at its baseline.

プロパティ

offset

Description

The amount to offset the column, in terms of how many columns it should shift to the end of the total available.

Attributeoffset
Typestring | undefined

offsetLg

Description

The 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

offsetMd

Description

The 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

offsetSm

Description

The 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

offsetXl

Description

The 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

offsetXs

Description

The 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

pull

Description

The amount to pull the column, in terms of how many columns it should shift to the start of the total available.

Attributepull
Typestring | undefined

pullLg

Description

The 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

pullMd

Description

The 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

pullSm

Description

The 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

pullXl

Description

The 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

pullXs

Description

The 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

push

Description

The amount to push the column, in terms of how many columns it should shift to the end of the total available.

Attributepush
Typestring | undefined

pushLg

Description

The 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

pushMd

Description

The 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

pushSm

Description

The 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

pushXl

Description

The 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

pushXs

Description

The 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

size

Description

The 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

sizeLg

Description

The 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

sizeMd

Description

The 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

sizeSm

Description

The 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

sizeXl

Description

The 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

sizeXs

Description

The 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

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