徽章
概述 badge
使用 <Badge> 组件来显示 行内信息，如状态或标签。
将你想显示的内容传递给 <Badge> 组件的 text 属性。
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string | 'tip' | 类型，内置值: 'info' | 'tip' | 'warning' | 'danger'，允许自定义 |
| text | string | '' | 文本 |
| color | string | '' | 文本颜色 |
| bg-color | string | '' | 背景颜色 |
| border-color | string | 'transparent' | 边框颜色 |
示例
输入：
- 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 text="v2" color="#8e5cd9" bg-color="rgba(159, 122, 234, 0.16)" />输出：
- VuePress - v2
- VuePress - v2
- VuePress - v2
- VuePress - v2
- VuePress - v2
使用自定义type，可以实现更丰富的表现。
输入：
在主题 自定义样式文件 中，添加预定的样式：
/* 浅色主题 */ .vp-badge.important { color: #8e5cd9; background-color: rgba(159, 122, 234, 0.14); border-color: transparent; } /* 深色主题 */ [data-theme="dark"] .vp-badge.important { color: #8e5cd9; background-color: rgba(159, 122, 234, 0.16); border-color: transparent; } /** important 为自定义 type 类型 */使用自定义
type：VuePress - <Badge type="important" text="v2" />输出：
VuePress - v2
