chore: 新增是否开启首选项导航栏(外观、布局、快捷键、通用)吸顶效果,调整部分样式 (#6804)
This commit is contained in:
@@ -35,16 +35,24 @@ const tabsIndicatorStyle = computed(() => {
|
||||
width: `${(100 / props.tabs.length).toFixed(0)}%`,
|
||||
};
|
||||
});
|
||||
|
||||
function activeClass(tab: string): string[] {
|
||||
return tab === activeTab.value ? ['!font-bold', 'text-primary'] : [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs v-model="activeTab" :default-value="getDefaultValue">
|
||||
<TabsList :style="tabsStyle" class="bg-accent relative grid w-full">
|
||||
<TabsList
|
||||
:style="tabsStyle"
|
||||
class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
|
||||
>
|
||||
<TabsIndicator :style="tabsIndicatorStyle" />
|
||||
<template v-for="tab in tabs" :key="tab.value">
|
||||
<TabsTrigger
|
||||
:value="tab.value"
|
||||
class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
|
||||
:class="activeClass(tab.value)"
|
||||
class="hover:text-primary z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</TabsTrigger>
|
||||
|
||||
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
|
||||
v-bind="forwardedProps"
|
||||
:class="
|
||||
cn(
|
||||
'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-1 transition-[width,transform] duration-300',
|
||||
'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
|
||||
Reference in New Issue
Block a user