Components

CodeGroup 代码分组

专为文档与教程设计的选项卡式代码块容器，常用于多包管理器安装命令与不同语言代码对比。

结合 CodeBlock 展示不同包管理器的命令。

bash

bun add @recloudstudio/ui

<CodeGroup v-model="activePm" :tabs="['bun', 'pnpm', 'npm', 'yarn']">
<CodeBlock :code="pmCommands[activePm]" language="bash" />
</CodeGroup>

属性	类型	默认值	说明
`modelValue / v-model`	`string \| number`	`首个选项卡`	当前选中的选项卡 key。
`tabs`	`(string \| CodeGroupTab)[]`	`[]`	选项卡列表配置：可为字符串或对象 { label, key?, icon? }。
`slot: default`	`slot`	`—`	默认插槽，接收 activeKey 与 activeIndex。
`slot: [key]`	`slot`	`—`	支持按 tab key 名称命名的具名插槽。