组件

Badge

在MarkDown中使用徽章

属性

text 必填

• 类型：string

• 默认值：“”

  徽章文字内容

type

• 类型："tip" | "wraning" | "danger"

• 默认值："tip"

  徽章类型

  • tip
  • warn
  • error

color 可选

• 类型：string

  徽章颜色，CSS合法的颜色值

vertical

• 类型："top" | "middle" | "bottom" | undefined

• 默认值："undefined"

  徽章垂直方向的位置

  • 顶部top
  • 居中middle
  • 底部bottom

is-dot

• 类型：Boolean

• 默认值：true

  不显示 text 内容，显示一个小圆点

小红点

使用

在MarkDown中为标题或链接添加一些状态

### Badge <Badge text="Building" type="warning" /> <Badge text="Starzkg" color="grey" />

示例

• type
• color

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

ExternalLinkIcon

• 使用

<ExternalLinkIcon/>

• 详情

  该组件会渲染一个标识外部 URL 链接的图标。

  该组件主要是为了开发主题时使用。在绝大多数情况下你不会用到它。

• 示例

Element Plus

内置 Element Plus 组件库和图标库

TIP

为了避免组件名称冲突，图标组件与Element相比需要加icon-前缀