使用 tabs 和 tabs-item 组件在您的内容中显示选项卡。
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
::tabs
:::tabs-item{label="Code" icon="i-lucide-code"}
```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```
:::
:::tabs-item{label="Preview" icon="i-lucide-eye"}
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
:::
::
| 属性 | 默认值 | 类型 |
|---|---|---|
defaultValue | '0' | string默认选中的选项卡。 |
同步 | string将选定的选项卡与本地存储键同步。 | |
哈希 | string选择选项卡时要滚动的哈希值。 | |
modelValue | string | |
ui | { root?: ClassNameValue; } & { root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; label?: ClassNameValue; trailingBadge?: ClassNameValue; trailingBadgeSize?: ClassNameValue; content?: ClassNameValue; }
|
| 插槽 | 类型 |
|---|---|
default | {} |
export default defineAppConfig({
ui: {
prose: {
tabs: {
slots: {
root: 'my-5 gap-4'
}
},
tabsItem: {
base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
tabs: {
slots: {
root: 'my-5 gap-4'
}
},
tabsItem: {
base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
]
})