javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-divider): add and document custom properties

Browse Source 
references #14850
references #14808
This commit is contained in:
Cam Wiegert
2018-09-24 13:03:38 -05:00
parent 7bd33a77f6
commit 06cb138220
4 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--ion-color-base: #{$item-ios-divider-background}; --background: #{$item-ios-divider-background};
--ion-color-contrast: #{$item-ios-divider-color}; --color: #{$item-ios-divider-color};
--padding-start: #{$item-ios-divider-padding-start}; --padding-start: #{$item-ios-divider-padding-start};
@include border-radius(0); @include border-radius(0);

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

@ -5,8 +5,8 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--ion-color-base: #{$item-md-divider-background}; --background: #{$item-md-divider-background};
--ion-color-contrast: #{$item-md-divider-color}; --color: #{$item-md-divider-color};
--padding-start: #{$item-md-divider-padding-start}; --padding-start: #{$item-md-divider-padding-start};
border-bottom: $item-md-divider-border-bottom; border-bottom: $item-md-divider-border-bottom;

17
core/src/components/item-divider/item-divider.scss
View File

@ -5,6 +5,14 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
/**
* @prop --background: Background of the item divider
* @prop --color: Color of the item divider
* @prop --padding-start: Start padding of the item divider
* @prop --padding-end: End padding of the item divider
* @prop --padding-top: Top padding of the item divider
* @prop --padding-bottom: Bottom padding of the item divider
*/
--padding-start: 0px; --padding-start: 0px;
--padding-end: 0px; --padding-end: 0px;
--padding-top: 0px; --padding-top: 0px;
@ -27,8 +35,8 @@
width: 100%; width: 100%;
min-height: $item-divider-min-height; min-height: $item-divider-min-height;
background-color: #{current-color(base)}; background: var(--background);
color: #{current-color(contrast)}; color: var(--color);
font-family: $font-family-base; font-family: $font-family-base;
@ -37,6 +45,11 @@
box-sizing: border-box; box-sizing: border-box;
} }
:host(.ion-color) {
background: current-color(base);
color: current-color(contrast);
}
:host([sticky]) { :host([sticky]) {
position: sticky; position: sticky;
top: 0; top: 0;

12
core/src/components/item-divider/readme.md
View File

@ -13,6 +13,18 @@ Item Dividers are block elements that can be used to separate items in a list. T
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
## CSS Custom Properties
| Name | Description |
| ------------------ | ---------------------------------- |
| `--background` | Background of the item divider |
| `--color` | Color of the item divider |
| `--padding-bottom` | Bottom padding of the item divider |
| `--padding-end` | End padding of the item divider |
| `--padding-start` | Start padding of the item divider |
| `--padding-top` | Top padding of the item divider |
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*