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

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,--pin-background
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,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 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({
tag: 'ion-range',
@@ -435,14 +442,16 @@ export class Range implements ComponentInterface {
'range-tick': true,
'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
class="range-bar range-bar-active"
role="presentation"
style={barStyle}
part="bar-active"
/>
{ renderKnob(isRTL, {
@@ -530,8 +539,8 @@ const renderKnob = (isRTL: boolean, { knob, value, ratio, min, max, disabled, pr
aria-disabled={disabled ? 'true' : null}
aria-valuenow={value}
>
{pin && <div class="range-pin" role="presentation">{Math.round(value)}</div>}
<div class="range-knob" role="presentation" />
{pin && <div class="range-pin" role="presentation" part="pin">{Math.round(value)}</div>}
<div class="range-knob" role="presentation" part="knob" />
</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. |
## 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
| 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 nomodule src="../../../../../dist/ionic/ionic.js"></script>
<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>
<ion-app>
@@ -97,6 +135,9 @@
Options
</ion-label>
</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-range pin="true"></ion-range>
</ion-item>
@@ -216,6 +257,12 @@
maxRange.addEventListener('ionChange', function(ev) {
targetRange.max = ev.detail.value;
})
const rangePart = document.querySelector('.range-part');
rangePart.value = {
lower: '-100',
upper: '100'
}
</script>
</body>