Components

CodeGroup 代码分组

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

包管理器切换

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

bun add @recloudstudio/ui

<CodeGroup v-model="activePm" :tabs="['bun', 'pnpm', 'npm', 'yarn']">
  <div v-if="activePm === 'bun'">bun add @recloudstudio/ui</div>
  <div v-else-if="activePm === 'pnpm'">pnpm add @recloudstudio/ui</div>
  ...
</CodeGroup>

API 参考

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