CodeGroup

GitHub
将多个代码示例分组到标签式界面中，方便比较。

用法

将代码块包装在 code-group 组件中，即可在标签中将它们分组。

pnpm add @nuxt/ui

::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```

::
与 ProsePre 组件一样，CodeGroup 也能处理文件名、图标和复制代码按钮。

API

属性

属性默认值类型
defaultValue

'0'

string

默认选中的标签。

sync

string

使用本地存储键同步选定的标签。

modelValue

string

ui

{ root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; }

插槽

插槽类型
default

{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeGroup: {
        slots: {
          root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
          list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
          indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
          trigger: [
            'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0',
          triggerLabel: 'truncate'
        }
      }
    }
  }
})
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: {
          codeGroup: {
            slots: {
              root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
              list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
              indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
              trigger: [
                'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
                'transition-colors'
              ],
              triggerIcon: 'size-4 shrink-0',
              triggerLabel: 'truncate'
            }
          }
        }
      }
    })
  ]
})

更新日志

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

CodeCollapse

使长的代码块可折叠，以节省空间并提高可读性。

CodePreview

显示代码示例及其预览和来源，以获得更清晰的文档。