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

fix(segment): set the view to the initial value without scrolling

Browse Source
This commit is contained in:
Brandy Carney
2024-09-23 15:40:38 -04:00
parent 44e8374791
commit ba285306d6
5 changed files with 64 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/api.txt
View File

@ -1610,7 +1610,8 @@ ion-segment-button,part,native
ion-segment-content,shadow
ion-segment-view,shadow
ion-segment-view,method,setContent,setContent(id: string) => Promise<void>
ion-segment-view,prop,disabled,boolean,false,false,false
ion-segment-view,method,setContent,setContent(id: string, smoothScroll?: boolean) => Promise<void>
ion-select,shadow
ion-select,prop,cancelText,string,'Cancel',false,false

2
core/src/components.d.ts vendored
View File

@ -2723,7 +2723,7 @@ export namespace Components {
* If `true`, the segment view cannot be interacted with.
*/
"disabled": boolean;
"setContent": (id: string) => Promise<void>;
"setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
}
interface IonSelect {
/**

4
core/src/components/segment-view/segment-view.tsx
View File

@ -37,7 +37,7 @@ export class SegmentView implements ComponentInterface {
}
@Method()
async setContent(id: string) {
async setContent(id: string, smoothScroll = true) {
const contents = this.getSegmentContents();
const index = contents.findIndex((content) => content.id === id);
@ -47,7 +47,7 @@ export class SegmentView implements ComponentInterface {
this.el.scrollTo({
top: 0,
left: index * contentWidth,
behavior: 'smooth',
behavior: smoothScroll ? 'smooth' : 'auto',
});
}

62
core/src/components/segment-view/test/basic/index.html
View File

@ -15,15 +15,25 @@
<style>
ion-segment-view {
height: 200px;
height: 100px;
}
ion-segment-content:nth-of-type(even) {
ion-segment-content {
display: flex;
justify-content: center;
align-items: center;
}
ion-segment-content:nth-of-type(1) {
background: lightpink;
}
ion-segment-content:nth-of-type(2) {
background: lightblue;
}
ion-segment-content:nth-of-type(odd) {
background: lightpink;
ion-segment-content:nth-of-type(3) {
background: lightgreen;
}
</style>
</head>
@ -38,14 +48,42 @@
<ion-content>
<ion-toolbar>
<ion-segment value="Paid">
<ion-segment-button content-id="paid" value="Paid">
<ion-segment>
<ion-segment-button content-id="no" value="no">
<ion-label>No</ion-label>
</ion-segment-button>
<ion-segment-button content-id="value" value="value">
<ion-label>Value</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-segment-view>
<ion-segment-content id="no">No</ion-segment-content>
<ion-segment-content id="value">Value</ion-segment-content>
</ion-segment-view>
<ion-segment value="all">
<ion-segment-button content-id="all" value="all">
<ion-label>All</ion-label>
</ion-segment-button>
<ion-segment-button content-id="favorites" value="favorites">
<ion-label>Favorites</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-segment-view>
<ion-segment-content id="all">All</ion-segment-content>
<ion-segment-content id="favorites">Favorites</ion-segment-content>
</ion-segment-view>
<ion-segment value="free">
<ion-segment-button content-id="paid" value="paid">
<ion-label>Paid</ion-label>
</ion-segment-button>
<ion-segment-button content-id="free" value="Free">
<ion-segment-button content-id="free" value="free">
<ion-label>Free</ion-label>
</ion-segment-button>
<ion-segment-button content-id="top" value="Top">
<ion-segment-button content-id="top" value="top">
<ion-label>Top</ion-label>
</ion-segment-button>
</ion-segment>
@ -57,14 +95,14 @@
</ion-segment-view>
<ion-toolbar>
<ion-segment disabled color="danger">
<ion-segment-button content-id="bookmarks" value="Bookmarks">
<ion-segment disabled value="reading-list">
<ion-segment-button content-id="bookmarks" value="bookmarks">
<ion-label>Bookmarks</ion-label>
</ion-segment-button>
<ion-segment-button content-id="reading-list" value="Reading List">
<ion-segment-button content-id="reading-list" value="reading-list">
<ion-label>Reading List</ion-label>
</ion-segment-button>
<ion-segment-button content-id="shared-links" value="Shared Links">
<ion-segment-button content-id="shared-links" value="shared-links">
<ion-label>Shared Links</ion-label>
</ion-segment-button>
</ion-segment>

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

@ -180,6 +180,10 @@ export class Segment implements ComponentInterface {
if (this.disabled) {
this.disabledChanged();
}
// Update segment view based on the initial value,
// but do not animate the scroll
this.updateSegmentView(false);
}
onStart(detail: GestureDetail) {
@ -322,11 +326,11 @@ export class Segment implements ComponentInterface {
/**
* Finds the related segment view and sets its current content
* based on the selected segment button. This method
* should be called only after the gesture is completed
* (if dragging between segments) or when a segment button
* is clicked directly.
* should be called on initial load of the segment,
* after the gesture is completed (if dragging between segments)
* and when a segment button is clicked directly.
*/
private updateSegmentView() {
private updateSegmentView(smoothScroll = true) {
const buttons = this.getButtons();
const button = buttons.find((btn) => btn.value === this.value);
@ -340,7 +344,7 @@ export class Segment implements ComponentInterface {
const segmentView = content?.closest('ion-segment-view');
if (segmentView) {
segmentView.setContent(button.contentId);
segmentView.setContent(button.contentId, smoothScroll);
}
}