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

fix(range): properly display stacked labels in an item with a range (#21944)

Browse Source 
fixes #21625
This commit is contained in:
Brandy Carney
2020-08-21 13:57:13 -04:00
committed by GitHub
parent 5c177d756f
commit 9f4b01e17f
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/label/label.tsx
View File

@ -16,6 +16,8 @@ import { createColorClasses } from '../../utils/theme';
scoped: true
})
export class Label implements ComponentInterface {
private inRange = false;
@Element() el!: HTMLElement;
/**
@ -39,6 +41,7 @@ export class Label implements ComponentInterface {
@State() noAnimate = false;
componentWillLoad() {
this.inRange = !!this.el.closest('ion-range');
this.noAnimate = (this.position === 'floating');
this.emitStyle();
}
@ -57,11 +60,17 @@ export class Label implements ComponentInterface {
}
private emitStyle() {
const position = this.position;
this.ionStyle.emit({
'label': true,
[`label-${position}`]: position !== undefined
});
const { inRange, position } = this;
// If the label is inside of a range we don't want
// to override the classes added by the label that
// is a direct child of the item
if (!inRange) {
this.ionStyle.emit({
'label': true,
[`label-${position}`]: position !== undefined
});
}
}
render() {