95 lines
2.8 KiB
Markdown
95 lines
2.8 KiB
Markdown
---
|
||
title: 徽章
|
||
icon: iconamoon:badge-light
|
||
createTime: 2024/08/18 22:45:50
|
||
permalink: /guide/components/badge/
|
||
---
|
||
|
||
## 概述 <Badge type="tip" text="badge" />
|
||
|
||
使用 `<Badge>` 组件来显示 行内信息，如状态或标签。
|
||
|
||
将你想显示的内容传递给 `<Badge>` 组件的 `text` 属性。
|
||
|
||
## Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
|
||
| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
|
||
| text | `string` | `''` | 文本 |
|
||
| color | `string` | `''` | 文本颜色 |
|
||
| bg-color | `string` | `''` | 背景颜色 |
|
||
| border-color | `string` | `'transparent'` | 边框颜色 |
|
||
|
||
## 示例
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
- 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 - <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)" />
|
||
|
||
使用自定义`type`，可以实现更丰富的表现。
|
||
|
||
**输入：**
|
||
|
||
1. 在主题 [自定义样式文件](../custom/style.md.md) 中，添加预定的样式：
|
||
|
||
```css
|
||
/* 浅色主题 */
|
||
.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 类型
|
||
*/
|
||
```
|
||
|
||
2. 使用自定义`type`：
|
||
|
||
```md :no-line-numbers
|
||
VuePress - <Badge type="important" text="v2" />
|
||
```
|
||
|
||
**输出：**
|
||
|
||
VuePress - <Badge type="important" text="v2" />
|
||
|
||
<style>
|
||
/* 浅色主题 */
|
||
.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;
|
||
}
|
||
</style>
|