feat: 为 FaTabs 组件添加 listClass 和 contentClass 属性,以支持自定义样式

This commit is contained in:
Hooray
2025-06-11 10:08:35 +08:00
parent 6febfea146
commit e3aa58e892
+6 -3
View File
@@ -13,8 +13,11 @@ const props = defineProps<{
icon?: string
label: string
value: string | number
class?: HTMLAttributes['class']
}[]
class?: HTMLAttributes['class']
listClass?: HTMLAttributes['class']
contentClass?: HTMLAttributes['class']
}>()
const emits = defineEmits<{
@@ -35,15 +38,15 @@ function handleChange(value: string | number) {
<template>
<Tabs v-model="activeTab" :class="cn('flex flex-col', props.class)" @update:model-value="handleChange">
<TabsList class="flex items-center justify-center">
<TabsTrigger v-for="item in list" :key="item.value" :value="item.value" class="w-full">
<TabsList :class="cn('flex items-center justify-center', props.listClass)">
<TabsTrigger v-for="item in list" :key="item.value" :value="item.value" :class="cn('w-full', item.class)">
<div class="flex-center gap-1">
<FaIcon v-if="item.icon" :name="item.icon" class="flex-shrink-0" />
{{ item.label }}
</div>
</TabsTrigger>
</TabsList>
<TabsContent v-for="item in list" :key="item.value" :value="item.value">
<TabsContent v-for="item in list" :key="item.value" :value="item.value" :class="props.contentClass">
<slot :name="item.value" />
</TabsContent>
</Tabs>