mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00

Files

Brandy Carney a7f1f4daa7 refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>

2018-07-09 12:57:21 -04:00

col.scss

refactor(components): update to use shadow DOM and work with css variables

2018-07-09 12:57:21 -04:00

col.tsx

refactor(components): update to use shadow DOM and work with css variables

2018-07-09 12:57:21 -04:00

col.vars.scss

refactor(components): update to use shadow DOM and work with css variables

2018-07-09 12:57:21 -04:00

readme.md

docs(grid): update API docs and add to breaking changes

2018-06-18 11:54:08 -04:00

readme.md

ion-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.

Properties

offset

string

The amount to offset the column, in terms of how many columns it should shift to the right of the total available.

offsetLg

string

The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available.

offsetMd

string

The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available.

offsetSm

string

The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available.

offsetXl

string

The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available.

offsetXs

string

The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available.

pull

string

The amount to pull the column, in terms of how many columns it should shift to the left of the total available.

pullLg

string

The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available.

pullMd

string

The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available.

pullSm

string

The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available.

pullXl

string

The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available.

pullXs

string

The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available.

push

string

The amount to push the column, in terms of how many columns it should shift to the right of the total available.

pushLg

string

The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available.

pushMd

string

The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available.

pushSm

string

The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available.

pushXl

string

The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available.

pushXs

string

The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available.

size

string

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.

sizeLg

string

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.

sizeMd

string

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.

sizeSm

string

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.

sizeXl

string

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.

sizeXs

string

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.

Attributes

offset

string

The amount to offset the column, in terms of how many columns it should shift to the right of the total available.

offset-lg

string

The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available.

offset-md

string

The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available.

offset-sm

string

The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available.

offset-xl

string

The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available.

offset-xs

string

The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available.

pull

string

The amount to pull the column, in terms of how many columns it should shift to the left of the total available.

pull-lg

string

The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available.

pull-md

string

The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available.

pull-sm

string

The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available.

pull-xl

string

The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available.

pull-xs

string

The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available.

push

string

The amount to push the column, in terms of how many columns it should shift to the right of the total available.

push-lg

string

The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available.

push-md

string

The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available.

push-sm

string

The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available.

push-xl

string

The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available.

push-xs

string

The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available.

size

string

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-lg

string

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-md

string

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-sm

string

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-xl

string

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-xs

string

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.

Built with StencilJS