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

disabled buttons

Browse Source
This commit is contained in:
Tanner Reits
2024-10-11 15:11:26 -04:00
parent ca3e43bc3b
commit 26c2697830
4 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/segment-content/segment-content.ios.scss
View File

@@ -3,7 +3,3 @@
// iOS Segment Content
// --------------------------------------------------
:host(.segment-content-disabled) {
opacity: $segment-button-ios-opacity-disabled;
}

4
core/src/components/segment-content/segment-content.md.scss
View File

@@ -3,7 +3,3 @@
// Material Design Segment Content
// --------------------------------------------------
:host(.segment-content-disabled) {
opacity: $segment-button-md-opacity-disabled;
}

4
core/src/components/segment-content/segment-content.scss
View File

@@ -9,3 +9,7 @@
width: 100%;
}
:host(.segment-content-disabled) {
display: none;
}

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

@@ -401,7 +401,38 @@ export class Segment implements ComponentInterface {
const { scrollDistancePercentage, scrollDistance } = ev.detail;
const nextIndex = scrollDistance > 0 ? currentIndex + 1 : currentIndex - 1;
const findIndexFrom = (
array: HTMLIonSegmentButtonElement[],
predicate: (button: HTMLIonSegmentButtonElement) => boolean,
startIndex: number
) => {
for (let i = startIndex; i < array.length; i++) {
if (predicate(array[i])) {
return i;
}
}
return -1;
};
const findIndexFromReverse = (
array: HTMLIonSegmentButtonElement[],
predicate: (button: HTMLIonSegmentButtonElement) => boolean,
startIndex: number
) => {
for (let i = startIndex; i >= 0; i--) {
if (predicate(array[i])) {
return i;
}
}
return -1;
};
// Find the next valid button (i.e. we need to ignore any disabled buttons)
const nextIndex =
scrollDistance > 0
? findIndexFrom(buttons, (ref) => !ref.disabled, currentIndex + 1)
: findIndexFromReverse(buttons, (ref) => !ref.disabled, currentIndex - 1);
if (nextIndex >= 0 && nextIndex < buttons.length) {
const nextButton = buttons[nextIndex];
const nextButtonWidth = nextButton.getBoundingClientRect().width;
@@ -420,8 +451,10 @@ export class Segment implements ComponentInterface {
.reduce((acc, ref) => acc + ref.getBoundingClientRect().width, 0);
indicator.style.left =
scrollDistance > 0
? `${distanceToCurrentButton + currentButton.getBoundingClientRect().width * scrollDistancePercentage}px`
: `${distanceToNextButton + nextButtonWidth - nextButtonWidth * scrollDistancePercentage}px`;
? `${distanceToCurrentButton + distanceToNextButton * scrollDistancePercentage}px`
: `${
distanceToNextButton + distanceToCurrentButton - distanceToCurrentButton * scrollDistancePercentage
}px`;
// Transition the color of the indicator if we've crossed the halfway point
if (scrollDistancePercentage > 0.5) {