javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

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>
);
};