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

transition indicator color

Browse Source
This commit is contained in:
Tanner Reits
2024-10-11 13:04:14 -04:00
parent b8dd17eae7
commit ca3e43bc3b
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/segment/segment.scss
View File

@@ -39,7 +39,8 @@
height: 100%;
div {
background: red;
background-color: red;
transition: background-color 0.3s linear;
height: 100%;
}
}

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

@@ -212,15 +212,17 @@ export class Segment implements ComponentInterface {
const buttons = this.getButtons();
const activeButtonIndex = buttons.findIndex((ref) => ref.value === this.value);
if (activeButtonIndex >= 0) {
const activeButtonStyles = buttons[activeButtonIndex].getBoundingClientRect();
const activeButtonPosition = buttons[activeButtonIndex].getBoundingClientRect();
const activeButtonStyles = getComputedStyle(buttons[activeButtonIndex]);
const indicator = this.el.shadowRoot!.querySelector('.segment-indicator') as HTMLDivElement | null;
if (indicator) {
const startingX = buttons
.slice(0, activeButtonIndex)
.reduce((acc, ref) => acc + ref.getBoundingClientRect().width, 0);
indicator.style.width = `${activeButtonStyles.width}px`;
indicator.style.width = `${activeButtonPosition.width}px`;
indicator.style.left = `${startingX}px`;
indicator.style.backgroundColor = activeButtonStyles.getPropertyValue('--indicator-color');
// setTimeout(() => {
// indicator.style.transition = 'left 0.3s linear, width 0.3s linear';
@@ -420,6 +422,12 @@ export class Segment implements ComponentInterface {
scrollDistance > 0
? `${distanceToCurrentButton + currentButton.getBoundingClientRect().width * scrollDistancePercentage}px`
: `${distanceToNextButton + nextButtonWidth - nextButtonWidth * scrollDistancePercentage}px`;
// Transition the color of the indicator if we've crossed the halfway point
if (scrollDistancePercentage > 0.5) {
const color = getComputedStyle(nextButton).getPropertyValue('--indicator-color');
indicator.querySelector('div')!.style.backgroundColor = color;
}
}
}
}