shadow
列是 grid 系统的单元组成部分,位于 row 内。它们会扩展以填充整行。网格内的所有内容都应放在列中。
🌐 Columns are cellular components of the grid system and go inside of a row. They will expand to fill the row. All content within a grid should go inside of a column.
有关更多信息,请参阅grid文档。
🌐 See the grid documentation for more information.
🌐 Column Alignment
默认情况下,列会拉伸以填充整行的高度。列是弹性项目,因此有几种CSS 类可以应用于列以自定义此行为。
🌐 By default, columns will stretch to fill the entire height of the row. Columns are flex items, so there are several CSS classes that can be applied to a column to customize this behavior.
🌐 Properties
| 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 |
🌐 Events
No events available for this component.
🌐 Methods
No public methods available for this component.
🌐 CSS Shadow Parts
No CSS shadow parts available for this component.
🌐 CSS Custom Properties
| 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 |
🌐 Slots
No slots available for this component.