代码组
将代码块分组到选项卡中。
用法
将代码块包裹在 CodeGroup 组件中
pnpm add @nuxt/ui
::code-group
```bash [pnpm]
pnpm add @nuxt/ui
```
```bash [yarn]
yarn add @nuxt/ui
```
```bash [npm]
npm install @nuxt/ui
```
::
与 CodeBlock 组件类似，文件名、图标和复制按钮会自动支持。
export default defineNuxtConfig({
ui: {
prefix: 'Nuxt'
}
})
配置
{
wrapper: 'relative [&>div:last-child]:!my-0 [&>div:last-child]:!static my-5',
header: 'flex items-center gap-1 border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden p-2',
tab: {
base: 'px-2 py-1.5 focus:outline-none text-gray-700 dark:text-gray-200 text-sm rounded-md flex items-center gap-1.5',
active: 'bg-gray-100 dark:bg-gray-800',
inactive: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
icon: {
base: ''
}
}
}