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

feat(range): add support for range bar border radius (#16519)

Browse Source
This commit is contained in:
lukejoliat
2018-12-07 10:42:06 -05:00
committed by Brandy Carney
parent 1a27bce7fd
commit c036cb0924
5 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@ -785,6 +785,7 @@ ion-range,event,ionChange,InputChangeEvent,true
ion-range,event,ionFocus,void,true ion-range,event,ionFocus,void,true
ion-range,css-prop,--bar-background ion-range,css-prop,--bar-background
ion-range,css-prop,--bar-background-active ion-range,css-prop,--bar-background-active
ion-range,css-prop,--bar-border-radius
ion-range,css-prop,--bar-height ion-range,css-prop,--bar-height
ion-range,css-prop,--height ion-range,css-prop,--height
ion-range,css-prop,--knob-background ion-range,css-prop,--knob-background

1
core/src/components/range/range.ios.scss
View File

@ -12,6 +12,7 @@
--bar-height: #{$range-ios-bar-height}; --bar-height: #{$range-ios-bar-height};
--bar-background: #{$range-ios-bar-background-color}; --bar-background: #{$range-ios-bar-background-color};
--bar-background-active: #{ion-color(primary, base)}; --bar-background-active: #{ion-color(primary, base)};
--bar-border-radius: 0;
--height: #{$range-ios-slider-height}; --height: #{$range-ios-slider-height};
@include padding($range-ios-padding-vertical, $range-ios-padding-horizontal); @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);

1
core/src/components/range/range.md.scss
View File

@ -12,6 +12,7 @@
--bar-height: #{$range-md-bar-height}; --bar-height: #{$range-md-bar-height};
--bar-background: #{ion-color(primary, base, 0.26)}; --bar-background: #{ion-color(primary, base, 0.26)};
--bar-background-active: #{ion-color(primary, base)}; --bar-background-active: #{ion-color(primary, base)};
--bar-border-radius: 0;
--height: #{$range-md-slider-height}; --height: #{$range-md-slider-height};
--pin-background: #{ion-color(primary, base)}; --pin-background: #{ion-color(primary, base)};
--pin-color: #{ion-color(primary, contrast)}; --pin-color: #{ion-color(primary, contrast)};

2
core/src/components/range/range.scss
View File

@ -8,6 +8,7 @@
* @prop --bar-background: Background of the range bar * @prop --bar-background: Background of the range bar
* @prop --bar-background-active: Background of the active range bar * @prop --bar-background-active: Background of the active range bar
* @prop --bar-height: Height of the range bar * @prop --bar-height: Height of the range bar
* @prop --bar-border-radius: Border radius of the range bar
* @prop --height: Height of the range * @prop --height: Height of the range
* @prop --knob-background: Background of the range knob * @prop --knob-background: Background of the range knob
* @prop --knob-border-radius: Border radius of the range knob * @prop --knob-border-radius: Border radius of the range knob
@ -91,6 +92,7 @@
} }
.range-bar { .range-bar {
@include border-radius(var(--bar-border-radius));
@include position(calc((var(--height) - var(--bar-height)) / 2), null, null, 0); @include position(calc((var(--height) - var(--bar-height)) / 2), null, null, 0);
position: absolute; position: absolute;

1
core/src/components/range/readme.md
View File

@ -117,6 +117,7 @@ left or right of the range.
| ------------------------- | ---------------------------------- | | ------------------------- | ---------------------------------- |
| `--bar-background` | Background of the range bar | | `--bar-background` | Background of the range bar |
| `--bar-background-active` | Background of the active range bar | | `--bar-background-active` | Background of the active range bar |
| `--bar-border-radius` | Border radius of the range bar |
| `--bar-height` | Height of the range bar | | `--bar-height` | Height of the range bar |
| `--height` | Height of the range | | `--height` | Height of the range |
| `--knob-background` | Background of the range knob | | `--knob-background` | Background of the range knob |