javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(grid): update usage from attributes to classes (#20492)

Browse Source 
closes ionic-team/ionic-docs#1230
This commit is contained in:
Brandy Carney
2020-02-14 12:45:46 -05:00
committed by GitHub
parent c4fb31403e
commit 27a219874c
4 changed files with 22 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/col/readme.md
View File

@ -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. See [Grid Layout](/docs/layout/grid) for more information.
## Column attributes ## Column Alignment
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. |
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 --> <!-- Auto Generated Below -->

113
core/src/components/icon/readme.md
View File

@ -6,114 +6,35 @@ 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. 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> <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/). For a full list of available icons and more usage explanations, please check out the [Ionicons documentation](https://ionicons.com/).
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
## Properties ## Properties
#### ariaLabel | Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------- |
string | `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` |
Specifies the label to use for accessibility. Defaults to the icon name. | `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` |
#### color | `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` |
string | `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` |
The color to use from your Sass `$colors` map. | `size` | `size` | The size of the icon. Available options are: `"small"` and `"large"`. | `string \| undefined` | `undefined` |
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"dark"`, `"medium"`, `"light"`. | `src` | `src` | Specifies the exact `src` of an SVG file to use. | `string \| undefined` | `undefined` |
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"`.
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*

2
core/src/components/item/readme.md
View File

@ -40,7 +40,7 @@ The below chart details the item slots and where it will place the element insid
### Text Alignment ### 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 ## Input Highlight

20
core/src/components/row/readme.md
View File

@ -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. 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. 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.
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. |
<!-- Auto Generated Below --> <!-- Auto Generated Below -->