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

fix(segment): animate the highlight with value changes

Browse Source
This commit is contained in:
Brandy Carney
2024-09-17 13:15:54 -04:00
parent 221bb42c00
commit fa74077820
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/segment/segment.tsx
View File

@ -78,7 +78,17 @@ export class Segment implements ComponentInterface {
@Prop({ mutable: true }) value?: SegmentValue; @Prop({ mutable: true }) value?: SegmentValue;
@Watch('value') @Watch('value')
protected valueChanged(value: SegmentValue | undefined) { protected valueChanged(value: SegmentValue | undefined, oldValue?: SegmentValue | undefined) {
if (oldValue !== undefined && value !== undefined) {
const buttons = this.getButtons();
const previous = buttons.find(button => button.value === oldValue);
const current = buttons.find(button => button.value === value);
if (previous && current) {
this.checkButton(previous, current);
}
}
/** /**
* `ionSelect` is emitted every time the value changes (internal or external changes). * `ionSelect` is emitted every time the value changes (internal or external changes).
* Used by `ion-segment-button` to determine if the button should be checked. * Used by `ion-segment-button` to determine if the button should be checked.
@ -208,7 +218,7 @@ export class Segment implements ComponentInterface {
this.ionChange.emit({ value }); this.ionChange.emit({ value });
} }
private getButtons() { private getButtons(): HTMLIonSegmentButtonElement[] {
return Array.from(this.el.querySelectorAll('ion-segment-button')); return Array.from(this.el.querySelectorAll('ion-segment-button'));
} }