ion-col

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4栅格系统组件ion-col对项目进行布局。

ion-col官方文档地址:https://ionicframework.com/docs/api/col

Columns are cellular components of the grid system and go inside of a row. They will expand to fill their row. All content within a grid should go inside of a column.

See Grid Layout for more information.

Column attributes

By default, columns will stretch to fill the entire height of the row. There are several attributes that can be added to a column to customize this behavior.

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.

ion-col 属性(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 "auto" is passed, the column will be the size of its content.

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 "auto" is passed, the column will be the size of its content.

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 "auto" is passed, the column will be the size of its content.

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 "auto" is passed, the column will be the size of its content.

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 "auto" is passed, the column will be the size of its content.

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 "auto" is passed, the column will be the size of its content.

Attribute size-xs
Type string | undefined

ion-col中的CSS 自定义属性

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