Tabs

在交互式选项卡界面中组织相关内容。

用法

使用 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.
::

:::

::

API

属性

属性	默认值	类型
`defaultValue`	`'0'`	`string` 默认选中的选项卡。
`sync`		`string` 将选中的选项卡与本地存储的键同步。
`hash`		`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`	`{}`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      tabs: {
        slots: {
          root: 'my-5 gap-4'
        }
      },
      tabsItem: {
        base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
      }
    }
  }
})

vite.config.ts

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'
          }
        }
      }
    })
  ]
})

更新日志

340fc— fix: 使用空值合并运算符处理 item value

11a03— fix: labelKey 和 valueKey 的点表示法类型支持 (#4933)

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

fbec2— fix: 添加缺失的 Badge 导入 (#4594)

b2289— fix: display badge when not undefined

62ab0— feat: 在 item 中添加 badge (#4553)

7a2bd— feat: expose trigger refs

b9adc— feat: 在 items 中添加 ui 字段 (#4060)

e6e51— fix：class 应该优先于 ui 属性

39c86— fix：@nuxt/module-builder 升级后重构类型（#3855)

3447a— feat: 添加 list-leading 和 list-trailing 插槽 (#3837)

b9983— 修复：改进泛型类型 (#3331)

ef861— chore: 在 script 标签中添加 eol 以修复语法高亮

步骤

将标题转换为编号的逐步指南和教程。