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` 默认选中的选项卡。
`同步`		`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`	`{}`

主题

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

更新日志

e5c11— fix: 确保徽章正确显示

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

340fc— 修复：对项目值使用空值合并

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

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

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

fbec2— 修复：添加缺失的徽章导入 (#4594)

b2289— fix: display badge when not undefined

62ab0— 功能：在项目上添加徽章 (#4553)

7a2bd— feat: expose trigger refs

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

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

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

3447a— 功能：添加 list-leading 和 list-trailing 插槽 (#3837)

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

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

步骤

将标题转换为带编号的循序渐进指南和教程。