* 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
This commit is contained in:
小沐沐吖
GitHub
parent
6a8ba55bbf
commit
a2282f51c6
@ -21,10 +21,13 @@ VuePress 支持在 Markdown 文件中使用 组件。
|
||||
|
||||
### Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ---- | ------------------------------------------ | ------- | ---- |
|
||||
| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
|
||||
| text | `string` | `''` | 文本 |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
|
||||
| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
|
||||
| text | `string` | `''` | 文本 |
|
||||
| color | `string` | `''` | 文本颜色 |
|
||||
| bg-color | `string` | `''` | 背景颜色 |
|
||||
| border-color | `string` | `'transparent'` | 边框颜色 |
|
||||
|
||||
**输入：**
|
||||
|
||||
@ -33,6 +36,7 @@ VuePress 支持在 Markdown 文件中使用 组件。
|
||||
- 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" />
|
||||
```
|
||||
|
||||
**输出：**
|
||||
@ -41,6 +45,43 @@ VuePress 支持在 Markdown 文件中使用 组件。
|
||||
- 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" />
|
||||
|
||||
使用自定义`type`，可以实现更丰富的表现。
|
||||
|
||||
**输入：**
|
||||
|
||||
1. 在主题任意样式文件中，添加预定的样式：
|
||||
|
||||
```css
|
||||
/* 浅色主题 */
|
||||
.vp-badge.important {
|
||||
color: #cccccc;
|
||||
background-color: #f40f40;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
[data-theme="dark"] .vp-badge.important {
|
||||
color: #f40f40;
|
||||
background-color: #ffffff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
important 为自定义 type 类型
|
||||
*/
|
||||
```
|
||||
|
||||
2. 使用自定义`type`：
|
||||
|
||||
```md :no-line-numbers
|
||||
- VuePress - <Badge type="important" text="v2" />
|
||||
```
|
||||
|
||||
**输出：**
|
||||
|
||||
- VuePress - <Badge type="important" text="v2" />
|
||||
|
||||
## 图标
|
||||
|
||||
@ -326,3 +367,19 @@ export default defineUserConfig({
|
||||
<LinkCard title="链接卡片" href="/" />
|
||||
<LinkCard icon="twemoji:astonished-face" title="链接卡片" href="/" />
|
||||
</CardGrid>
|
||||
|
||||
<style>
|
||||
/* 浅色主题 */
|
||||
.vp-badge.important {
|
||||
color: #cccccc;
|
||||
background-color: #f40f40;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
[data-theme="dark"] .vp-badge.important {
|
||||
color: #f40f40;
|
||||
background-color: #ffffff;
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,10 +14,13 @@ permalink: /guide/components/badge/
|
||||
|
||||
## Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ---- | ------------------------------------------ | ------- | ---- |
|
||||
| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
|
||||
| text | `string` | `''` | 文本 |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
|
||||
| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
|
||||
| text | `string` | `''` | 文本 |
|
||||
| color | `string` | `''` | 文本颜色 |
|
||||
| bg-color | `string` | `''` | 背景颜色 |
|
||||
| border-color | `string` | `'transparent'` | 边框颜色 |
|
||||
|
||||
## 示例
|
||||
|
||||
@ -28,6 +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" />
|
||||
```
|
||||
|
||||
**输出：**
|
||||
@ -36,3 +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" />
|
||||
|
||||
使用自定义`type`，可以实现更丰富的表现。
|
||||
|
||||
**输入：**
|
||||
|
||||
1. 在主题任意样式文件中，添加预定的样式：
|
||||
|
||||
```css
|
||||
/* 浅色主题 */
|
||||
.vp-badge.important {
|
||||
color: #cccccc;
|
||||
background-color: #f40f40;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
[data-theme="dark"] .vp-badge.important {
|
||||
color: #f40f40;
|
||||
background-color: #ffffff;
|
||||
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: #cccccc;
|
||||
background-color: #f40f40;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
[data-theme="dark"] .vp-badge.important {
|
||||
color: #f40f40;
|
||||
background-color: #ffffff;
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
text?: string
|
||||
type?: 'info' | 'tip' | 'warning' | 'danger'
|
||||
type?: string
|
||||
color?: string
|
||||
bgColor?: string
|
||||
borderColor?: string
|
||||
}
|
||||
withDefaults(defineProps<Props>(), {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'tip',
|
||||
text: undefined,
|
||||
color: undefined,
|
||||
bgColor: undefined,
|
||||
borderColor: 'transparent',
|
||||
})
|
||||
|
||||
const customStyle = computed(() => {
|
||||
if (props.color || props.bgColor) {
|
||||
return {
|
||||
color: props.color,
|
||||
backgroundColor: props.bgColor,
|
||||
borderColor: props.borderColor,
|
||||
}
|
||||
}
|
||||
return {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="vp-badge" :class="type">
|
||||
<span class="vp-badge" :class="type" :style="customStyle">
|
||||
<slot>{{ text }}</slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user