mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
64 lines
1.5 KiB
Markdown
64 lines
1.5 KiB
Markdown
---
|
|
title: 组件
|
|
author: pengzhanbo
|
|
createTime: 2024/03/06 09:42:42
|
|
permalink: /guide/features/component/
|
|
---
|
|
|
|
## `<Badge />` <Badge type="tip" text="badge" />
|
|
|
|
### Props
|
|
|
|
- `type`
|
|
- 类型： `'info' | 'tip' | 'warning' | 'danger'`
|
|
- 默认值：`'tip'`
|
|
- `text`
|
|
- 类型：`string`
|
|
- 默认值：`''`
|
|
|
|
**输入：**
|
|
|
|
```md
|
|
- VuePress - <Badge type="info" text="v2" />
|
|
- VuePress - <Badge type="tip" text="v2" />
|
|
- VuePress - <Badge type="warning" text="v2" />
|
|
- VuePress - <Badge type="danger" text="v2" />
|
|
```
|
|
|
|
**输出：**
|
|
|
|
- VuePress - <Badge type="info" text="v2" />
|
|
- VuePress - <Badge type="tip" text="v2" />
|
|
- VuePress - <Badge type="warning" text="v2" />
|
|
- VuePress - <Badge type="danger" text="v2" />
|
|
|
|
## `<Iconify />`
|
|
|
|
支持 iconify 所有图标，支持通过 icon name 加载图标，可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
|
|
|
|
### Props
|
|
|
|
- `name`
|
|
- 类型：`string`
|
|
- 默认值：`''`
|
|
- `color`
|
|
- 类型：`string`
|
|
- 默认值：`'currentColor'`
|
|
- `size`
|
|
- 类型：`string`
|
|
- 默认值：`'1em'`
|
|
|
|
**输入：**
|
|
|
|
```md
|
|
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
|
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
|
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
|
|
```
|
|
|
|
**输出：**
|
|
|
|
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
|
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
|
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
|