logo
努力加载中 ……

组件

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

组件

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 链接的图标。

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

  • 示例

    open in new window

Element Plus

内置 Element Plus 组件库和图标库

TIP

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