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): scrollable segments center button on click (#26285)

Browse Source 
resolves #25367
This commit is contained in:
Liam DeBeasi
2022-11-16 13:58:03 -05:00
committed by GitHub
parent 4aabbdf97b
commit 73ea64c02f
2 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,6 +88,22 @@ export class Segment implements ComponentInterface {
this.valueAfterGesture = value; this.valueAfterGesture = value;
} }
} }
if (this.scrollable) {
const buttons = this.getButtons();
const activeButton = buttons.find((button) => button.value === value);
if (activeButton !== undefined) {
/**
* Scrollable segment buttons should be
* centered within the view including
* buttons that are partially offscreen.
*/
activeButton.scrollIntoView({
behavior: 'smooth',
inline: 'center',
});
}
}
} }
/** /**

11
core/src/components/segment/test/basic/index.html
View File

@ -29,6 +29,17 @@
</ion-segment> </ion-segment>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-segment value="2" scrollable="true">
<ion-segment-button value="1">Button 1</ion-segment-button>
<ion-segment-button value="2">Button 3</ion-segment-button>
<ion-segment-button value="3">Button 3</ion-segment-button>
<ion-segment-button value="4">Button 4</ion-segment-button>
<ion-segment-button value="5">Button 5</ion-segment-button>
<ion-segment-button value="6">Button 6</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-segment name="dynamicPropDisable" disabled color="danger"> <ion-segment name="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks"> Bookmarks </ion-segment-button> <ion-segment-button value="Bookmarks"> Bookmarks </ion-segment-button>