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

feat(range): add parts support for bar, bar-active, knob, pin, tick, tick-active (#20961)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-04-23 12:18:04 -04:00
committed by GitHub
parent d2b772f19f
commit 619f67a00b
4 changed files with 77 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/api.txt
View File

@ -861,6 +861,12 @@ ion-range,css-prop,--knob-box-shadow
ion-range,css-prop,--knob-size ion-range,css-prop,--knob-size
ion-range,css-prop,--pin-background ion-range,css-prop,--pin-background
ion-range,css-prop,--pin-color ion-range,css-prop,--pin-color
ion-range,part,bar
ion-range,part,bar-active
ion-range,part,knob
ion-range,part,pin
ion-range,part,tick
ion-range,part,tick-active
ion-refresher,none ion-refresher,none
ion-refresher,prop,closeDuration,string,'280ms',false,false ion-refresher,prop,closeDuration,string,'280ms',false,false

15
core/src/components/range/range.tsx
View File

@ -10,6 +10,13 @@ import { createColorClasses, hostContext } from '../../utils/theme';
* *
* @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL. * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL. * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
*
* @part tick - An inactive tick mark.
* @part tick-active - An active tick mark.
* @part pin - The counter that appears above a knob.
* @part knob - The handle that is used to drag the range.
* @part bar - The inactive part of the bar.
* @part bar-active - The active part of the bar.
*/ */
@Component({ @Component({
tag: 'ion-range', tag: 'ion-range',
@ -435,14 +442,16 @@ export class Range implements ComponentInterface {
'range-tick': true, 'range-tick': true,
'range-tick-active': tick.active 'range-tick-active': tick.active
}} }}
part={tick.active ? 'tick-active' : 'tick'}
/> />
))} ))}
<div class="range-bar" role="presentation" /> <div class="range-bar" role="presentation" part="bar" />
<div <div
class="range-bar range-bar-active" class="range-bar range-bar-active"
role="presentation" role="presentation"
style={barStyle} style={barStyle}
part="bar-active"
/> />
{ renderKnob(isRTL, { { renderKnob(isRTL, {
@ -530,8 +539,8 @@ const renderKnob = (isRTL: boolean, { knob, value, ratio, min, max, disabled, pr
aria-disabled={disabled ? 'true' : null} aria-disabled={disabled ? 'true' : null}
aria-valuenow={value} aria-valuenow={value}
> >
{pin && <div class="range-pin" role="presentation">{Math.round(value)}</div>} {pin && <div class="range-pin" role="presentation" part="pin">{Math.round(value)}</div>}
<div class="range-knob" role="presentation" /> <div class="range-knob" role="presentation" part="knob" />
</div> </div>
); );
}; };

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

@ -250,6 +250,18 @@ export default {
| `"start"` | Content is placed to the left of the range slider in LTR, and to the right in RTL. | | `"start"` | Content is placed to the left of the range slider in LTR, and to the right in RTL. |
## Shadow Parts
| Part | Description |
| --------------- | ------------------------------------------ |
| `"bar"` | The inactive part of the bar. |
| `"bar-active"` | The active part of the bar. |
| `"knob"` | The handle that is used to drag the range. |
| `"pin"` | The counter that appears above a knob. |
| `"tick"` | An inactive tick mark. |
| `"tick-active"` | An active tick mark. |
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |

47
core/src/components/range/test/basic/index.html
View File

@ -10,7 +10,45 @@
<script src="../../../../../scripts/testing/scripts.js"></script> <script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<style>
.range-part::part(bar) {
background: red;
}
.range-part::part(tick) {
background: purple;
}
.range-part::part(bar-active) {
background: green;
}
.range-part::part(tick-active) {
background: orange;
}
.range-part::part(knob) {
background: hotpink;
}
.ios.range-part::part(pin) {
background: orange;
top: -13px;
height: 20px;
line-height: 4px;
border-radius: 4px;
transform: translate(0, 0, 0);
}
.md.range-part::part(pin),
.md.range-part::part(pin)::before {
background: orange;
}
</style>
<body> <body>
<ion-app> <ion-app>
@ -97,6 +135,9 @@
Options Options
</ion-label> </ion-label>
</ion-list-header> </ion-list-header>
<ion-item>
<ion-range class="range-part" min="-200" max="200" step="10" snaps="true" pin="true" dual-knobs="true"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range pin="true"></ion-range> <ion-range pin="true"></ion-range>
</ion-item> </ion-item>
@ -216,6 +257,12 @@
maxRange.addEventListener('ionChange', function(ev) { maxRange.addEventListener('ionChange', function(ev) {
targetRange.max = ev.detail.value; targetRange.max = ev.detail.value;
}) })
const rangePart = document.querySelector('.range-part');
rangePart.value = {
lower: '-100',
upper: '100'
}
</script> </script>
</body> </body>