yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

docs: update <Badge /> details

Browse Source
This commit is contained in:
pengzhanbo 2025-02-09 01:14:45 +08:00
parent f8e6246841
commit 06752c3d70
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
docs/notes/theme/guide/组件/徽章.md
View File

@ -31,7 +31,7 @@ permalink: /guide/components/badge/
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
- VuePress - <Badge text="v2" color="#8e5cd9" bg-color="rgba(159, 122, 234, 0.16)" />
```
**输出：**
@ -40,56 +40,56 @@ permalink: /guide/components/badge/
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
- VuePress - <Badge text="v2" color="#8e5cd9" bg-color="rgba(159, 122, 234, 0.16)" />
使用自定义`type`，可以实现更丰富的表现。
**输入：**
1. 在主题任意样式文件中，添加预定的样式：
1. 在主题 [自定义样式文件](../自定义样式.md) 中，添加预定的样式：
```css
/* 浅色主题 */
.vp-badge.important {
color: #cccccc;
background-color: #f40f40;
border-color: transparent;
}
```css
/* 浅色主题 */
.vp-badge.important {
color: #8e5cd9;
background-color: rgba(159, 122, 234, 0.14);
border-color: transparent;
}
/* 深色主题 */
[data-theme="dark"] .vp-badge.important {
color: #f40f40;
background-color: #ffffff;
border-color: transparent;
}
/* 深色主题 */
[data-theme="dark"] .vp-badge.important {
color: #8e5cd9;
background-color: rgba(159, 122, 234, 0.16);
border-color: transparent;
}
/**
important 为自定义 type 类型
*/
```
/**
important 为自定义 type 类型
*/
```
2. 使用自定义`type`：
```md :no-line-numbers
- VuePress - <Badge type="important" text="v2" />
```
```md :no-line-numbers
VuePress - <Badge type="important" text="v2" />
```
**输出：**
**输出：**
- VuePress - <Badge type="important" text="v2" />
VuePress - <Badge type="important" text="v2" />
<style>
/* 浅色主题 */
.vp-badge.important {
color: #cccccc;
background-color: #f40f40;
color: #8e5cd9;
background-color: rgba(159, 122, 234, 0.14);
border-color: transparent;
}
/* 深色主题 */
[data-theme="dark"] .vp-badge.important {
color: #f40f40;
background-color: #ffffff;
color: #8e5cd9;
background-color: rgba(159, 122, 234, 0.16);
border-color: transparent;
}
</style>