内置组件

Badge

  • Props:

    • type
      • 类型： 'tip' | 'warning' | 'danger'
      • 默认值： 'tip'
    • text
      • 类型： string
      • 默认值： ''
    • vertical
      • 类型： 'top' | 'middle' | 'bottom' | undefined
      • 默认值： undefined

  • 示例：

输入

  1. - VuePress - <Badge type="tip" text="v2" vertical="top" />
  2. - VuePress - <Badge type="warning" text="v2" vertical="middle" />
  3. - VuePress - <Badge type="danger" text="v2" vertical="bottom" />

输出

  • VuePress -
  • VuePress -
  • VuePress -

CodeGroup

CodeGroupItem

  • Props:

    • title
      • 类型： string
      • 是否必需： true
    • active
      • 类型： boolean
      • 默认值： false

  • 详情：

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

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

  • 示例：

输入

  1. <CodeGroup>
  2.   <CodeGroupItem title="YARN">
  4. ```bash:no-line-numbers
  5. yarn
  6. ```
  8.   </CodeGroupItem>
  10.   <CodeGroupItem title="NPM" active>
  12. ```bash:no-line-numbers
  13. npm install
  14. ```
  16.   </CodeGroupItem>
  17. </CodeGroup>

输出

bash:no-line-numbers yarn bash:no-line-numbers npm install

::: warning 你必须在 <CodeGroupItem> 的开始标签和代码块之间添加一个空行，否则代码块无法被 Markdown 正确解析。

所有内容首先都必须是合法的 Markdown ，然后才是一个 Vue SFC 。

了解更多： Cookbook > Markdown 与 Vue SFC

或者你可以选择使用 自定义容器 。 :::