From 27a219874ca26d90c63fd63302a8800db2a8c1e7 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 14 Feb 2020 12:45:46 -0500 Subject: [PATCH] docs(grid): update usage from attributes to classes (#20492) closes ionic-team/ionic-docs#1230 --- core/src/components/col/readme.md | 14 +--- core/src/components/icon/readme.md | 113 +++++------------------------ core/src/components/item/readme.md | 2 +- core/src/components/row/readme.md | 20 +---- 4 files changed, 22 insertions(+), 127 deletions(-) diff --git a/core/src/components/col/readme.md b/core/src/components/col/readme.md index dc1b0945da..ba3ec46303 100644 --- a/core/src/components/col/readme.md +++ b/core/src/components/col/readme.md @@ -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. diff --git a/core/src/components/icon/readme.md b/core/src/components/icon/readme.md index 4f902706d5..11298adc30 100644 --- a/core/src/components/icon/readme.md +++ b/core/src/components/icon/readme.md @@ -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. -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 ``` For a full list of available icons and more usage explanations, please check out the [Ionicons documentation](https://ionicons.com/). + ## 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` | ---------------------------------------------- -*Built with [StencilJS](https://stenciljs.com/)* +*Built with [StencilJS](https://stenciljs.com/)* \ No newline at end of file diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index eda2aa17be..f5c0f5313b 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -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 `` 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 `` to transform the text. ## Input Highlight diff --git a/core/src/components/row/readme.md b/core/src/components/row/readme.md index e61bafcb34..fe882444f8 100644 --- a/core/src/components/row/readme.md +++ b/core/src/components/row/readme.md @@ -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.