hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: adjust padding for tab indicator and tab items

Browse source
This commit is contained in:
codytseng 2026-01-20 23:17:06 +08:00
parent 8aca9efe68
commit 2dd4e866d2
1 changed files with 2 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Tabs/index.tsx
View file

@ -36,7 +36,7 @@ export default function Tabs({
if (activeIndex >= 0 && tabRefs.current[activeIndex]) { if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
const activeTab = tabRefs.current[activeIndex] const activeTab = tabRefs.current[activeIndex]
const { offsetWidth, offsetLeft } = activeTab const { offsetWidth, offsetLeft } = activeTab
const padding = 24 // 12px padding on each side const padding = 16 // 8px padding on each side
setIndicatorStyle({ setIndicatorStyle({
width: offsetWidth - padding, width: offsetWidth - padding,
left: offsetLeft + padding / 2 left: offsetLeft + padding / 2
@ -103,7 +103,7 @@ export default function Tabs({
key={tab.value} key={tab.value}
ref={(el) => (tabRefs.current[index] = el)} ref={(el) => (tabRefs.current[index] = el)}
className={cn( className={cn(
`w-fit text-center py-2 px-6 my-1 font-semibold whitespace-nowrap clickable cursor-pointer rounded-xl transition-all duration-200`, `w-fit text-center py-2 px-4 my-1 font-semibold whitespace-nowrap clickable cursor-pointer rounded-xl transition-all duration-200`,
value === tab.value value === tab.value
? 'text-foreground' ? 'text-foreground'
: 'text-muted-foreground hover:text-foreground' : 'text-muted-foreground hover:text-foreground'