Skip to content

Commit cbee05e

Browse files
committed
fix(segment): move indicator as a percentage of the width on scroll
1 parent bdc6933 commit cbee05e

File tree

6 files changed

+14
-9
lines changed

6 files changed

+14
-9
lines changed

core/api.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1613,7 +1613,7 @@ ion-segment-content,prop,disabled,boolean,false,false,false
16131613
ion-segment-view,shadow
16141614
ion-segment-view,prop,disabled,boolean,false,false,false
16151615
ion-segment-view,method,setContent,setContent(id: string, smoothScroll?: boolean) => Promise<void>
1616-
ion-segment-view,event,ionSegmentViewScroll,{ scrollDirection: string; scrollDistance: number; },true
1616+
ion-segment-view,event,ionSegmentViewScroll,{ scrollDirection: string; scrollDistancePercentage: number; },true
16171617
ion-segment-view,event,ionSegmentViewScrollEnd,void,true
16181618

16191619
ion-select,shadow

core/src/components.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4442,7 +4442,7 @@ declare global {
44424442
new (): HTMLIonSegmentContentElement;
44434443
};
44444444
interface HTMLIonSegmentViewElementEventMap {
4445-
"ionSegmentViewScroll": { scrollDirection: string; scrollDistance: number };
4445+
"ionSegmentViewScroll": { scrollDirection: string; scrollDistancePercentage: number };
44464446
"ionSegmentViewScrollEnd": void;
44474447
}
44484448
interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
@@ -7538,7 +7538,7 @@ declare namespace LocalJSX {
75387538
/**
75397539
* Emitted when the segment view is scrolled.
75407540
*/
7541-
"onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{ scrollDirection: string; scrollDistance: number }>) => void;
7541+
"onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>) => void;
75427542
/**
75437543
* Emitted when the segment view scroll has ended.
75447544
*/

core/src/components/segment-view/segment-view.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class SegmentView implements ComponentInterface {
2525
/**
2626
* Emitted when the segment view is scrolled.
2727
*/
28-
@Event() ionSegmentViewScroll!: EventEmitter<{ scrollDirection: string; scrollDistance: number }>;
28+
@Event() ionSegmentViewScroll!: EventEmitter<{ scrollDirection: string; scrollDistancePercentage: number }>;
2929

3030
/**
3131
* Emitted when the segment view scroll has ended.
@@ -46,12 +46,14 @@ export class SegmentView implements ComponentInterface {
4646
this.previousScrollLeft = scrollLeft;
4747

4848
// Calculate the distance scrolled based on the initial scroll position
49+
// and then transform it to a percentage of the segment view width
4950
const scrollDistance = scrollLeft - initialScrollLeft!;
51+
const scrollDistancePercentage = Math.abs(scrollDistance) / offsetWidth;
5052

5153
// Emit the scroll direction and distance
5254
this.ionSegmentViewScroll.emit({
5355
scrollDirection,
54-
scrollDistance,
56+
scrollDistancePercentage,
5557
});
5658

5759
const atSnappingPoint = scrollLeft % offsetWidth === 0;

core/src/components/segment/segment.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -358,11 +358,14 @@ export class Segment implements ComponentInterface {
358358
const current = buttons[index];
359359
const indicatorEl = this.getIndicator(current);
360360

361-
const { scrollDistance } = ev.detail;
361+
const { scrollDirection, scrollDistancePercentage } = ev.detail;
362362

363363
if (indicatorEl) {
364364
indicatorEl.style.transition = 'transform 0.3s ease-out';
365365

366+
const scrollDistance = scrollDistancePercentage * current.getBoundingClientRect().width;
367+
const transformValue = scrollDirection === 'left' ? -scrollDistance : scrollDistance;
368+
366369
// Calculate total width of buttons to the left of the current button
367370
const totalButtonWidthBefore = buttons
368371
.slice(0, index)
@@ -378,7 +381,7 @@ export class Segment implements ComponentInterface {
378381
const maxTransform = totalButtonWidthAfter;
379382

380383
// Clamp the transform value to ensure it doesn't go out of bounds
381-
const clampedTransform = Math.max(minTransform, Math.min(scrollDistance, maxTransform));
384+
const clampedTransform = Math.max(minTransform, Math.min(transformValue, maxTransform));
382385

383386
// Apply the clamped transform value to the indicator element
384387
const transform = `translate3d(${clampedTransform}px, 0, 0)`;

packages/angular/src/directives/proxies.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2052,7 +2052,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
20522052
/**
20532053
* Emitted when the segment view is scrolled.
20542054
*/
2055-
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistance: number }>>;
2055+
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>>;
20562056
/**
20572057
* Emitted when the segment view scroll has ended.
20582058
*/

packages/angular/standalone/src/directives/proxies.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1891,7 +1891,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
18911891
/**
18921892
* Emitted when the segment view is scrolled.
18931893
*/
1894-
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistance: number }>>;
1894+
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>>;
18951895
/**
18961896
* Emitted when the segment view scroll has ended.
18971897
*/

0 commit comments

Comments
 (0)