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

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

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

@ -78,8 +78,18 @@ export class Segment implements ComponentInterface {
@Prop({ mutable: true }) value?: SegmentValue;
@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).
* 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 });
}
private getButtons() {
private getButtons(): HTMLIonSegmentButtonElement[] {
return Array.from(this.el.querySelectorAll('ion-segment-button'));
}