archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(tabs): tab cursor (#5769)

Browse Source
This commit is contained in:
WK 2025-10-04 17:42:05 +08:00 committed by GitHub
parent 1f17962932
commit 812f7939d9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/components/tabs/src/tabs.tsx
View File

@ -66,17 +66,6 @@ const Tabs = forwardRef(function Tabs<T extends object>(
};
}
if (variant === "bordered") {
const borderWidth = 2;
return {
...baseStyles,
top: `${relativeTop - borderWidth}px`,
width: `${tabRect.width - borderWidth}px`,
height: `${tabRect.height}px`,
};
}
return {
...baseStyles,
top: `${relativeTop}px`,
@ -84,16 +73,13 @@ const Tabs = forwardRef(function Tabs<T extends object>(
};
};
const updateCursorPosition = (
node: HTMLSpanElement,
selectedTab: HTMLElement,
parentRect: DOMRect,
) => {
const tabRect = selectedTab.getBoundingClientRect();
const relativeLeft = tabRect.left - parentRect.left;
const relativeTop = tabRect.top - parentRect.top;
const updateCursorPosition = (node: HTMLSpanElement, selectedTab: HTMLElement) => {
const tabRect = {
width: selectedTab.offsetWidth,
height: selectedTab.offsetHeight,
} as DOMRect;
const styles = getCursorStyles(tabRect, relativeLeft, relativeTop);
const styles = getCursorStyles(tabRect, selectedTab.offsetLeft, selectedTab.offsetTop);
node.style.left = styles.left;
node.style.top = styles.top;
@ -116,9 +102,7 @@ const Tabs = forwardRef(function Tabs<T extends object>(
prevSelectedKey.current = selectedKey;
prevVariant.current = variant;
const parentRect = domRef.current.getBoundingClientRect();
updateCursorPosition(node, selectedTab, parentRect);
updateCursorPosition(node, selectedTab);
};
const renderTabs = useMemo(