ion-col
Các cột là các thành phần di động của lưới(gird) hệ thống và đi vào bên trong một hàng(row). Chúng sẽ mở rộng để lấp đầy hàng của chúng. Tất cả nội dung trong một lưới phải nằm bên trong một cột.
Column Alignment(căn chỉnh cột)
Theo mặc định, các cột sẽ kéo dài để lấp đầy toàn bộ chiều cao của hàng. Các cột là các mục linh hoạt (flex items), vì vậy có một số lớp CSS (CSS classes) có thể được áp dụng cho một cột để tùy chỉnh hành vi này.
Properties
offset | |
|---|---|
| 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 |
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. |
| Attribute | offset-lg |
| Type | string | 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. |
| Attribute | offset-md |
| Type | string | 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. |
| Attribute | offset-sm |
| Type | string | 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. |
| Attribute | offset-xl |
| Type | string | 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. |
| Attribute | offset-xs |
| Type | string | 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. |
| Attribute | pull |
| Type | string | 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. |
| Attribute | pull-lg |
| Type | string | 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. |
| Attribute | pull-md |
| Type | string | 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. |
| Attribute | pull-sm |
| Type | string | 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. |
| Attribute | pull-xl |
| Type | string | 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. |
| Attribute | pull-xs |
| Type | string | 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. |
| Attribute | push |
| Type | string | 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. |
| Attribute | push-lg |
| Type | string | 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. |
| Attribute | push-md |
| Type | string | 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. |
| Attribute | push-sm |
| Type | string | 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. |
| Attribute | push-xl |
| Type | string | 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. |
| Attribute | push-xs |
| Type | string | undefined |
size | |
| Description | The size of the column, in terms of how many columns it should take up out of the total available. If |
| Attribute | size |
| Type | string | 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 |
| Attribute | size-lg |
| Type | string | 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 |
| Attribute | size-md |
| Type | string | 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 |
| Attribute | size-sm |
| Type | string | 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 |
| Attribute | size-xl |
| Type | string | 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 |
| Attribute | size-xs |
| Type | string | undefined |
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 |
Ion-row
Hàng là thành phần nằm ngang của lưới(gird) hệ thống và chứa các số lượng cột(column) khác nhau . Chúng đảm bảo các cột được đặt đúng vị trí.
.jpg)
.jpg)
0 Nhận xét