mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
docs(grid): update usage from attributes to classes (#20492)
closes ionic-team/ionic-docs#1230
This commit is contained in:
Brandy Carney
@ -6,19 +6,9 @@ They will expand to fill their row. All content within a grid should go inside o
|
||||
See [Grid Layout](/docs/layout/grid) 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. |
|
||||
## Column Alignment
|
||||
|
||||
By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@ -6,112 +6,33 @@ Icons can be used on their own as a standalone component, or inside of another c
|
||||
|
||||
By default, Ionicons will use the same icon for each platform (iOS or Material Design). In previous versions of Ionicons, icons would automatically update based on the platform. As of Ionicons 5.0, apps will have to handle this on a per-icon basis, if needed.
|
||||
|
||||
To use different icons depending on platform, set the `ios` and `md` properties or attributes. In the example below, when the app has the `ios` mode applied, it'll show the `logo-apple` icon. When using `md`, it'll show the `logo-android` icon.
|
||||
To use different icons depending on platform, set the `ios` and `md` properties or attributes. In the example below, when the app has the `ios` mode applied, it will show the `logo-apple` icon. When using `md`, it will show the `logo-android` icon.
|
||||
|
||||
```
|
||||
```html
|
||||
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
|
||||
```
|
||||
|
||||
For a full list of available icons and more usage explanations, please check out the [Ionicons documentation](https://ionicons.com/).
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### ariaLabel
|
||||
|
||||
string
|
||||
|
||||
Specifies the label to use for accessibility. Defaults to the icon name.
|
||||
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"dark"`, `"medium"`, `"light"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### ios
|
||||
|
||||
string
|
||||
|
||||
Specifies which icon to use on `ios` mode.
|
||||
|
||||
|
||||
#### md
|
||||
|
||||
string
|
||||
|
||||
Specifies which icon to use on `md` mode.
|
||||
|
||||
|
||||
#### name
|
||||
|
||||
string
|
||||
|
||||
Specifies which icon to use. The appropriate icon will be used based on the mode.
|
||||
For more information, see [Ionicons](https://github.com/ionic-team/ionicons).
|
||||
|
||||
|
||||
#### size
|
||||
|
||||
string
|
||||
|
||||
The size of the icon.
|
||||
Available options are: `"small"` and `"large"`.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### aria-label
|
||||
|
||||
string
|
||||
|
||||
Specifies the label to use for accessibility. Defaults to the icon name.
|
||||
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"dark"`, `"medium"`, `"light"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### ios
|
||||
|
||||
string
|
||||
|
||||
Specifies which icon to use on `ios` mode.
|
||||
|
||||
|
||||
#### md
|
||||
|
||||
string
|
||||
|
||||
Specifies which icon to use on `md` mode.
|
||||
|
||||
|
||||
#### name
|
||||
|
||||
string
|
||||
|
||||
Specifies which icon to use. The appropriate icon will be used based on the mode.
|
||||
For more information, see [Ionicons](https://github.com/ionic-team/ionicons).
|
||||
|
||||
|
||||
#### size
|
||||
|
||||
string
|
||||
|
||||
The size of the icon.
|
||||
Available options are: `"small"` and `"large"`.
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------- |
|
||||
| `ariaLabel` | `aria-label` | Specifies the label to use for accessibility. Defaults to the icon name. | `string \| undefined` | `undefined` |
|
||||
| `color` | `color` | The color to use for the background of the item. | `string \| undefined` | `undefined` |
|
||||
| `flipRtl` | `flip-rtl` | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`. | `boolean \| undefined` | `undefined` |
|
||||
| `icon` | `icon` | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `any` | `undefined` |
|
||||
| `ios` | `ios` | Specifies which icon to use on `ios` mode. | `string \| undefined` | `undefined` |
|
||||
| `lazy` | `lazy` | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`. | `boolean` | `false` |
|
||||
| `md` | `md` | Specifies which icon to use on `md` mode. | `string \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `string` | `getIonMode()` |
|
||||
| `name` | `name` | Specifies which icon to use from the built-in set of icons. | `string \| undefined` | `undefined` |
|
||||
| `size` | `size` | The size of the icon. Available options are: `"small"` and `"large"`. | `string \| undefined` | `undefined` |
|
||||
| `src` | `src` | Specifies the exact `src` of an SVG file to use. | `string \| undefined` | `undefined` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@ -40,7 +40,7 @@ The below chart details the item slots and where it will place the element insid
|
||||
|
||||
### Text Alignment
|
||||
|
||||
Items left align text and add an ellipsis when the text is wider than the item. See the [Utility Attributes Documentation](/docs/layout/css-utilities) for attributes that can be added to `<ion-item>` to transform the text.
|
||||
Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for classes that can be added to `<ion-item>` to transform the text.
|
||||
|
||||
|
||||
## Input Highlight
|
||||
|
||||
@ -6,25 +6,9 @@ Rows are horizontal components of the [grid](../grid) system and contain varying
|
||||
See [Grid Layout](/docs/layout/grid) for more information.
|
||||
|
||||
|
||||
## Row attributes
|
||||
## Row Alignment
|
||||
|
||||
By default, columns will stretch to fill the entire height of the row and wrap when necessary.
|
||||
There are several attributes that can be added to a row to customize this behavior.
|
||||
|
||||
| Property | Description |
|
||||
|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| nowrap | Adds `flex-wrap: nowrap`. Forces the columns to a single row. |
|
||||
| wrap-reverse | Adds `flex-wrap: wrap-reverse`. The columns will wrap in reverse. |
|
||||
| align-items-start | Adds `align-items: flex-start`. All columns will be vertically aligned at the top, unless they specify their own alignment. |
|
||||
| align-items-center | Adds `align-items: center`. All columns will be vertically aligned in the center, unless they specify their own alignment. |
|
||||
| align-items-end | Adds `align-items: flex-end`. All columns will be vertically aligned at the bottom, unless they specify their own alignment. |
|
||||
| align-items-stretch | Adds `align-items: stretch`. All columns will be stretched to take up the entire height of the row, unless they specify their own alignment. |
|
||||
| align-items-baseline | Adds `align-items: baseline`. All columns will be vertically aligned at their baselines, unless they specify their own alignment. |
|
||||
| justify-content-start | Adds `justify-content: start`. All columns will be horizontally aligned at the start. |
|
||||
| justify-content-center | Adds `justify-content: center`. All columns will be horizontally aligned at the center. |
|
||||
| justify-content-end | Adds `justify-content: end`. All columns will be horizontally aligned at the end. |
|
||||
| justify-content-around | Adds `justify-content: space-around`. All columns will be horizontally aligned with equal space around them. |
|
||||
| justify-content-between | Adds `justify-content: space-between`. All columns will be horizontally aligned with a half-size space on either end. |
|
||||
By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
Reference in New Issue
Block a user