mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-07 13:07:58 +08:00
为 FaTabs 组件添加 listClass 和 contentClass 属性,以支持自定义样式
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user