shadow
Columnは、Grid システムのセルラーコンポーネントで、rowの内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
詳しくは、gridのドキュメントを参照してください。
デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムはフレックスアイテムなので、この動作をカスタマイズするために、カラムに適用できるいくつかのCSSクラス があります。
Description | The amount to offset the column, in terms of how many columns it should shift to the end of the total available. |
Attribute | offset |
Type | string | undefined |
Default | undefined |
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. |
Attribute | offset-lg |
Type | string | undefined |
Default | undefined |
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. |
Attribute | offset-md |
Type | string | undefined |
Default | undefined |
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. |
Attribute | offset-sm |
Type | string | undefined |
Default | undefined |
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. |
Attribute | offset-xl |
Type | string | undefined |
Default | undefined |
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. |
Attribute | offset-xs |
Type | string | undefined |
Default | undefined |
Description | The amount to pull the column, in terms of how many columns it should shift to the start of the total available. |
Attribute | pull |
Type | string | undefined |
Default | undefined |
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. |
Attribute | pull-lg |
Type | string | undefined |
Default | undefined |
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. |
Attribute | pull-md |
Type | string | undefined |
Default | undefined |
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. |
Attribute | pull-sm |
Type | string | undefined |
Default | undefined |
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. |
Attribute | pull-xl |
Type | string | undefined |
Default | undefined |
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. |
Attribute | pull-xs |
Type | string | undefined |
Default | undefined |
Description | The amount to push the column, in terms of how many columns it should shift to the end of the total available. |
Attribute | push |
Type | string | undefined |
Default | undefined |
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. |
Attribute | push-lg |
Type | string | undefined |
Default | undefined |
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. |
Attribute | push-md |
Type | string | undefined |
Default | undefined |
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. |
Attribute | push-sm |
Type | string | undefined |
Default | undefined |
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. |
Attribute | push-xl |
Type | string | undefined |
Default | undefined |
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. |
Attribute | push-xs |
Type | string | undefined |
Default | undefined |
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. |
Attribute | size |
Type | string | undefined |
Default | undefined |
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. |
Attribute | size-lg |
Type | string | undefined |
Default | undefined |
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. |
Attribute | size-md |
Type | string | undefined |
Default | undefined |
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. |
Attribute | size-sm |
Type | string | undefined |
Default | undefined |
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. |
Attribute | size-xl |
Type | string | undefined |
Default | undefined |
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. |
Attribute | size-xs |
Type | string | undefined |
Default | undefined |
No events available for this component.
No public methods available for this component.
No CSS shadow parts available for this component.
Name | Description |
---|
--ion-grid-column-padding | Padding for the Column |
--ion-grid-column-padding-lg | Padding for the Column on lg screens and up |
--ion-grid-column-padding-md | Padding for the Column on md screens and up |
--ion-grid-column-padding-sm | Padding for the Column on sm screens and up |
--ion-grid-column-padding-xl | Padding for the Column on xl screens and up |
--ion-grid-column-padding-xs | Padding for the Column on xs screens and up |
--ion-grid-columns | The number of total Columns in the Grid |
No slots available for this component.