javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +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-content,shadow
ion-segment-view,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,shadow
ion-select,prop,cancelText,string,'Cancel',false,false 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. * If `true`, the segment view cannot be interacted with.
*/ */
"disabled": boolean; "disabled": boolean;
"setContent": (id: string) => Promise<void>; "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
} }
interface IonSelect { interface IonSelect {
/** /**

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

@ -37,7 +37,7 @@ export class SegmentView implements ComponentInterface {
} }
@Method() @Method()
async setContent(id: string) { async setContent(id: string, smoothScroll = true) {
const contents = this.getSegmentContents(); const contents = this.getSegmentContents();
const index = contents.findIndex((content) => content.id === id); const index = contents.findIndex((content) => content.id === id);
@ -47,7 +47,7 @@ export class SegmentView implements ComponentInterface {
this.el.scrollTo({ this.el.scrollTo({
top: 0, top: 0,
left: index * contentWidth, 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> <style>
ion-segment-view { 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; background: lightblue;
} }
ion-segment-content:nth-of-type(odd) { ion-segment-content:nth-of-type(3) {
background: lightpink; background: lightgreen;
} }
</style> </style>
</head> </head>
@ -38,14 +48,42 @@
<ion-content> <ion-content>
<ion-toolbar> <ion-toolbar>
<ion-segment value="Paid"> <ion-segment>
<ion-segment-button content-id="paid" value="Paid"> <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-label>Paid</ion-label>
</ion-segment-button> </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-label>Free</ion-label>
</ion-segment-button> </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-label>Top</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -57,14 +95,14 @@
</ion-segment-view> </ion-segment-view>
<ion-toolbar> <ion-toolbar>
<ion-segment disabled color="danger"> <ion-segment disabled value="reading-list">
<ion-segment-button content-id="bookmarks" value="Bookmarks"> <ion-segment-button content-id="bookmarks" value="bookmarks">
<ion-label>Bookmarks</ion-label> <ion-label>Bookmarks</ion-label>
</ion-segment-button> </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-label>Reading List</ion-label>
</ion-segment-button> </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-label>Shared Links</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>

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

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