Skip to content

Commit a2282f5

Browse files
sunnyboy-musunnyboy-mu
authored
feat(theme): add custom color support for badge components, close #453 (#455)
* feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components * feat(theme): add custom color support for badge components
1 parent 6a8ba55 commit a2282f5

File tree

3 files changed

+144
-11
lines changed

3 files changed

+144
-11
lines changed

‎docs/notes/theme/guide/功能/组件.md

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,13 @@ VuePress 支持在 Markdown 文件中使用 组件。
2121

2222
### Props
2323

24-
| 名称 | 类型 | 默认值 | 说明 |
25-
| ---- | ------------------------------------------ | ------- | ---- |
26-
| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
27-
| text | `string` | `''` | 文本 |
24+
| 名称 | 类型 | 默认值 | 说明 |
25+
| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
26+
| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
27+
| text | `string` | `''` | 文本 |
28+
| color | `string` | `''` | 文本颜色 |
29+
| bg-color | `string` | `''` | 背景颜色 |
30+
| border-color | `string` | `'transparent'` | 边框颜色 |
2831

2932
**输入：**
3033

@@ -33,6 +36,7 @@ VuePress 支持在 Markdown 文件中使用 组件。
3336
- VuePress - <Badge type="tip" text="v2" />
3437
- VuePress - <Badge type="warning" text="v2" />
3538
- VuePress - <Badge type="danger" text="v2" />
39+
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
3640
```
3741

3842
**输出：**
@@ -41,6 +45,43 @@ VuePress 支持在 Markdown 文件中使用 组件。
4145
- VuePress - <Badge type="tip" text="v2" />
4246
- VuePress - <Badge type="warning" text="v2" />
4347
- VuePress - <Badge type="danger" text="v2" />
48+
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
49+
50+
使用自定义`type`，可以实现更丰富的表现。
51+
52+
**输入：**
53+
54+
1. 在主题任意样式文件中，添加预定的样式：
55+
56+
```css
57+
/* 浅色主题 */
58+
.vp-badge.important {
59+
color: #cccccc;
60+
background-color: #f40f40;
61+
border-color: transparent;
62+
}
63+
64+
/* 深色主题 */
65+
[data-theme="dark"] .vp-badge.important {
66+
color: #f40f40;
67+
background-color: #ffffff;
68+
border-color: transparent;
69+
}
70+
71+
/**
72+
important 为自定义 type 类型
73+
*/
74+
```
75+
76+
2. 使用自定义`type`：
77+
78+
```md :no-line-numbers
79+
- VuePress - <Badge type="important" text="v2" />
80+
```
81+
82+
**输出：**
83+
84+
- VuePress - <Badge type="important" text="v2" />
4485

4586
## 图标
4687

@@ -326,3 +367,19 @@ export default defineUserConfig({
326367
<LinkCard title="链接卡片" href="/" />
327368
<LinkCard icon="twemoji:astonished-face" title="链接卡片" href="/" />
328369
</CardGrid>
370+
371+
<style>
372+
/* 浅色主题 */
373+
.vp-badge.important {
374+
color: #cccccc;
375+
background-color: #f40f40;
376+
border-color: transparent;
377+
}
378+
379+
/* 深色主题 */
380+
[data-theme="dark"] .vp-badge.important {
381+
color: #f40f40;
382+
background-color: #ffffff;
383+
border-color: transparent;
384+
}
385+
</style>

‎docs/notes/theme/guide/组件/徽章.md

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ permalink: /guide/components/badge/
1414

1515
## Props
1616

17-
| 名称 | 类型 | 默认值 | 说明 |
18-
| ---- | ------------------------------------------ | ------- | ---- |
19-
| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
20-
| text | `string` | `''` | 文本 |
17+
| 名称 | 类型 | 默认值 | 说明 |
18+
| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
19+
| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
20+
| text | `string` | `''` | 文本 |
21+
| color | `string` | `''` | 文本颜色 |
22+
| bg-color | `string` | `''` | 背景颜色 |
23+
| border-color | `string` | `'transparent'` | 边框颜色 |
2124

2225
## 示例
2326

@@ -28,6 +31,7 @@ permalink: /guide/components/badge/
2831
- VuePress - <Badge type="tip" text="v2" />
2932
- VuePress - <Badge type="warning" text="v2" />
3033
- VuePress - <Badge type="danger" text="v2" />
34+
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
3135
```
3236

3337
**输出：**
@@ -36,3 +40,56 @@ permalink: /guide/components/badge/
3640
- VuePress - <Badge type="tip" text="v2" />
3741
- VuePress - <Badge type="warning" text="v2" />
3842
- VuePress - <Badge type="danger" text="v2" />
43+
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
44+
45+
使用自定义`type`，可以实现更丰富的表现。
46+
47+
**输入：**
48+
49+
1. 在主题任意样式文件中，添加预定的样式：
50+
51+
```css
52+
/* 浅色主题 */
53+
.vp-badge.important {
54+
color: #cccccc;
55+
background-color: #f40f40;
56+
border-color: transparent;
57+
}
58+
59+
/* 深色主题 */
60+
[data-theme="dark"] .vp-badge.important {
61+
color: #f40f40;
62+
background-color: #ffffff;
63+
border-color: transparent;
64+
}
65+
66+
/**
67+
important 为自定义 type 类型
68+
*/
69+
```
70+
71+
2. 使用自定义`type`：
72+
73+
```md :no-line-numbers
74+
- VuePress - <Badge type="important" text="v2" />
75+
```
76+
77+
**输出：**
78+
79+
- VuePress - <Badge type="important" text="v2" />
80+
81+
<style>
82+
/* 浅色主题 */
83+
.vp-badge.important {
84+
color: #cccccc;
85+
background-color: #f40f40;
86+
border-color: transparent;
87+
}
88+
89+
/* 深色主题 */
90+
[data-theme="dark"] .vp-badge.important {
91+
color: #f40f40;
92+
background-color: #ffffff;
93+
border-color: transparent;
94+
}
95+
</style>

‎theme/src/client/components/global/VPBadge.vue

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,35 @@
11
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
24
interface Props {
35
text?: string
4-
type?: 'info' | 'tip' | 'warning' | 'danger'
6+
type?: string
7+
color?: string
8+
bgColor?: string
9+
borderColor?: string
510
}
6-
withDefaults(defineProps<Props>(), {
11+
const props = withDefaults(defineProps<Props>(), {
712
type: 'tip',
813
text: undefined,
14+
color: undefined,
15+
bgColor: undefined,
16+
borderColor: 'transparent',
17+
})
18+
19+
const customStyle = computed(() => {
20+
if (props.color || props.bgColor) {
21+
return {
22+
color: props.color,
23+
backgroundColor: props.bgColor,
24+
borderColor: props.borderColor,
25+
}
26+
}
27+
return {}
928
})
1029
</script>
1130

1231
<template>
13-
<span class="vp-badge" :class="type">
32+
<span class="vp-badge" :class="type" :style="customStyle">
1433
<slot>{{ text }}</slot>
1534
</span>
1635
</template>

0 commit comments

Comments
 (0)