ion-col
列是网格系统的单元格组件,放置在行内部。它们会扩展以填满行。网格内的所有内容都应放在列内部。
更多信息请参见网格文档。
列对齐
默认情况下,列会拉伸以填充行的整个高度。列是 flex 项目,因此有多个 CSS 类 可以应用于列以自定义此行为。
Properties
offset
| 说明 | The amount to offset the column, in terms of how many columns it should shift to the end of the total available. |
| 属性 | offset |
| 类型 | string | undefined |
| 默认值 | undefined |
offsetLg
| 说明 | 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. |
| 属性 | offset-lg |
| 类型 | string | undefined |
| 默认值 | undefined |
offsetMd
| 说明 | 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. |
| 属性 | offset-md |
| 类型 | string | undefined |
| 默认值 | undefined |
offsetSm
| 说明 | 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. |
| 属性 | offset-sm |
| 类型 | string | undefined |
| 默认值 | undefined |
offsetXl
| 说明 | 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. |
| 属性 | offset-xl |
| 类型 | string | undefined |
| 默认值 | undefined |
offsetXs
| 说明 | 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. |
| 属性 | offset-xs |
| 类型 | string | undefined |
| 默认值 | undefined |
pull
| 说明 | The amount to pull the column, in terms of how many columns it should shift to the start of the total available. |
| 属性 | pull |
| 类型 | string | undefined |
| 默认值 | undefined |
pullLg
| 说明 | 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. |
| 属性 | pull-lg |
| 类型 | string | undefined |
| 默认值 | undefined |
pullMd
| 说明 | 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. |
| 属性 | pull-md |
| 类型 | string | undefined |
| 默认值 | undefined |
pullSm
| 说明 | 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. |
| 属性 | pull-sm |
| 类型 | string | undefined |
| 默认值 | undefined |
pullXl
| 说明 | 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. |
| 属性 | pull-xl |
| 类型 | string | undefined |
| 默认值 | undefined |
pullXs
| 说明 | 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. |
| 属性 | pull-xs |
| 类型 | string | undefined |
| 默认值 | undefined |
push
| 说明 | The amount to push the column, in terms of how many columns it should shift to the end of the total available. |
| 属性 | push |
| 类型 | string | undefined |
| 默认值 | undefined |
pushLg
| 说明 | 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. |
| 属性 | push-lg |
| 类型 | string | undefined |
| 默认值 | undefined |
pushMd
| 说明 | 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. |
| 属性 | push-md |
| 类型 | string | undefined |
| 默认值 | undefined |
pushSm
| 说明 | 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. |
| 属性 | push-sm |
| 类型 | string | undefined |
| 默认值 | undefined |
pushXl
| 说明 | 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. |
| 属性 | push-xl |
| 类型 | string | undefined |
| 默认值 | undefined |
pushXs
| 说明 | 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. |
| 属性 | push-xs |
| 类型 | string | undefined |
| 默认值 | undefined |
size
| 说明 | 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. |
| 属性 | size |
| 类型 | string | undefined |
| 默认值 | undefined |
sizeLg
| 说明 | 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. |
| 属性 | size-lg |
| 类型 | string | undefined |
| 默认值 | undefined |
sizeMd
| 说明 | 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. |
| 属性 | size-md |
| 类型 | string | undefined |
| 默认值 | undefined |
sizeSm
| 说明 | 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. |
| 属性 | size-sm |
| 类型 | string | undefined |
| 默认值 | undefined |
sizeXl
| 说明 | 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. |
| 属性 | size-xl |
| 类型 | string | undefined |
| 默认值 | undefined |
sizeXs
| 说明 | 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. |
| 属性 | size-xs |
| 类型 | string | undefined |
| 默认值 | undefined |
Events
该组件没有可用的事件。
Methods
该组件没有可用的公共方法。
CSS Shadow Parts
该组件没有可用的 CSS 阴影部分。
CSS Custom Properties
| Name | 说明 |
|---|---|
--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
该组件没有可用的插槽。