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

chore(): sync with main

Browse Source
This commit is contained in:
Liam DeBeasi
2022-11-21 11:37:08 -05:00
parent 08c0a5520a 0932f89f5d
commit 961e1bddd3
100 changed files with 11970 additions and 22320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,6 +84,22 @@ export class Segment implements ComponentInterface {
* Used by `ion-segment-button` to determine if the button should be checked.
*/
this.ionSelect.emit({ 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-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-segment name="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks"> Bookmarks </ion-segment-button>