logo
努力加载中 ……

CodeGroup

原创Starzkg12/19/2021, 8:14:03 AM2541 分钟

CodeGroup

在MarkDown中可用的代码块分组

详情

CodeGroupItem 组件的Wrapper

CodeGroupItem

在MarkDown中可用的代码块分组项

属性

title 必填

  • 类型: string

active

  • 类型: boolean
  • 默认值: false

详情

该组件必须放置在 CodeGroup 组件的内部。

可以通过 active Prop 来设置初始激活的元素。如果不设置,默认激活第一个元素。

使用

请使用 <CodeGroup /> 包裹 <CodeGroupItem />

对于每个 <CodeGroupItem />,你需要设置 title 属性作为选项卡的标题,并仅在选项卡内放置一个代码块。你还可以在其中一个 <CodeGroupItem /> 上设置 active 属性使其默认激活。

TIP

你需要在每个 <CodeGroupItem /> 之间放置一个空行,否则 VuePress 可能无法正确的解析它们。

示例

输入:

<CodeGroup>
<CodeGroupItem title="yarn">
```bash
  yarn add -D vuepress-theme-star
```
</CodeGroupItem>
<CodeGroupItem title="npm" active>
```bash
npm i -D vuepress-theme-star
```
</CodeGroupItem>
</CodeGroup>

输出:

yarn add -D vuepress-theme-star
npm i -D vuepress-theme-star