javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(item): document custom properties

Browse Source 
references #14850
closes #15648
This commit is contained in:
Cam Wiegert
2018-09-20 10:29:52 -05:00
parent a9af2f5682
commit 2dd4bdb0a4
6 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/item/item.ios.scss
View File

@@ -18,7 +18,7 @@
--background-activated: #{$item-ios-background-color-active};
--border-color: #{$item-ios-border-bottom-color};
--color: #{$item-ios-text-color};
--detail-push-color: #{$item-ios-border-bottom-color};
--detail-icon-color: #{$item-ios-border-bottom-color};
}
:host(.activated) {
@@ -116,7 +116,7 @@
// --------------------------------------------------
.item-detail-icon {
color: var(--detail-push-color);
color: var(--detail-icon-color);
font-size: 20px;
}

2
core/src/components/item/item.ios.vars.scss
View File

@@ -37,7 +37,7 @@ $item-ios-thumbnail-width: 56px !default;
$item-ios-thumbnail-height: $item-ios-thumbnail-width !default;
/// @prop - Color of the detail arrow icon
$item-ios-detail-push-color: $item-ios-border-color !default;
$item-ios-detail-icon-color: $item-ios-border-color !default;
/// @prop - Padding top for the item content
$item-ios-padding-top: 10px !default;

4
core/src/components/item/item.md.scss
View File

@@ -22,7 +22,7 @@
--background-activated: #{$item-md-background-color-active};
--border-color: #{$item-md-border-bottom-color};
--color: #{$item-md-text-color};
--detail-push-color: #{$item-md-border-bottom-color};
--detail-icon-color: #{$item-md-border-bottom-color};
}
@@ -61,7 +61,7 @@
// --------------------------------------------------
.item-detail-icon {
color: var(--detail-push-color);
color: var(--detail-icon-color);
font-size: 20px;
}

2
core/src/components/item/item.md.vars.scss
View File

@@ -22,7 +22,7 @@ $item-md-thumbnail-width: 80px !default;
$item-md-thumbnail-height: $item-md-thumbnail-width !default;
/// @prop - Color of the detail arrow icon
$item-md-detail-push-color: $item-md-border-color !default;
$item-md-detail-icon-color: $item-md-border-color !default;
/// @prop - Padding top for the item content
$item-md-padding-top: 11px !default;

25
core/src/components/item/item.scss
View File

@@ -4,11 +4,34 @@
// --------------------------------------------------
:host {
/**
* @prop --background: Background of the item
* @prop --background-activated: Background of the activated item
* @prop --border-color: Color of the item border
* @prop --border-radius: Radius of the item border
* @prop --border-style: Style of the item border
* @prop --border-width: Width of the item border
* @prop --box-shadow: Box shadow of the item
* @prop --color: Color of the item
* @prop --detail-icon-color: Color of the item detail icon
* @prop --inner-border-width: Width of the item inner border
* @prop --inner-box-shadow: Box shadow of the item inner
* @prop --inner-padding-bottom: Bottom padding of the item inner
* @prop --inner-padding-end: End padding of the item inner
* @prop --inner-padding-start: Start padding of the item inner
* @prop --inner-padding-top: Top padding of the item inner
* @prop --min-height: Minimum height of the item
* @prop --padding-bottom: Bottom padding of the item
* @prop --padding-end: End padding of the item
* @prop --padding-start: Start padding of the item
* @prop --padding-top: Top padding of the item
* @prop --transition: Transition of the item
*/
--min-height: #{$item-min-height};
--background: #{current-color(base)};
--background-activated: #{current-color(tint)};
--color: #{current-color(contrast)};
--detail-push-color: #{current-color(shade)};
--detail-icon-color: #{current-color(shade)};
--border-radius: 0;
--border-width: 0;
--border-style: solid;

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

@@ -60,6 +60,33 @@ Items left align text and add an ellipsis when the text is wider than the item.
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"` | `"submit"`, `"reset"`, `"button"` |
## CSS Custom Properties
| Name | Description |
| ------------------------ | -------------------------------- |
| `--background` | Background of the item |
| `--background-activated` | Background of the activated item |
| `--border-color` | Color of the item border |
| `--border-radius` | Radius of the item border |
| `--border-style` | Style of the item border |
| `--border-width` | Width of the item border |
| `--box-shadow` | Box shadow of the item |
| `--color` | Color of the item |
| `--detail-icon-color` | Color of the item detail icon |
| `--inner-border-width` | Width of the item inner border |
| `--inner-box-shadow` | Box shadow of the item inner |
| `--inner-padding-bottom` | Bottom padding of the item inner |
| `--inner-padding-end` | End padding of the item inner |
| `--inner-padding-start` | Start padding of the item inner |
| `--inner-padding-top` | Top padding of the item inner |
| `--min-height` | Minimum height of the item |
| `--padding-bottom` | Bottom padding of the item |
| `--padding-end` | End padding of the item |
| `--padding-start` | Start padding of the item |
| `--padding-top` | Top padding of the item |
| `--transition` | Transition of the item |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*