vuepress-theme-plume/docs/notes/theme/guide/components/badge.md

title, icon, createTime, permalink

title	icon	createTime	permalink
徽章	iconamoon:badge-light	2024/08/18 22:45:50	/guide/components/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 -
• VuePress -
• VuePress -
• VuePress -
• VuePress -

使用自定义type，可以实现更丰富的表现。

输入：

1. 在主题 自定义样式文件 中，添加预定的样式：

   /* 浅色主题 */
   .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：

   VuePress - <Badge type="important" text="v2" />
   

   输出：

   VuePress -