概述 badge

使用 <Badge> 组件来显示 行内信息，如状态或标签。

将你想显示的内容传递给 <Badge> 组件的 text 属性。

Props

typeOptional'info' | 'tip' | 'warning' | 'danger' | string

'tip'

徽章类型，不同的类型使用不同的颜色方案。支持自定义类型

textOptionalstring

''

徽章文本

colorOptionalstring

自定义徽章文本颜色

bgColorOptionalstring

自定义徽章背景颜色

borderColorOptionalstring

自定义徽章边框颜色

示例

输入：

- 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 - v2
• VuePress - v2
• VuePress - v2
• VuePress - v2
• VuePress - v2

使用自定义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 - v2

贡献者

pengzhanbo小沐沐吖

更新日志

2026/6/8 18:40

查看所有更新日志

• 16c2d-docs: update field container于 2026/6/8
• 4d236-feat(theme)!: add collections support (#704)于 2025/10/7
• d1496-docs: update docs于 2025/4/30
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• 06752-docs: update <Badge /> details于 2025/2/8
• a2282-feat(theme): add custom color support for badge components, close #453 (#455)于 2025/2/7
• e3b1c-docs: improve docs于 2024/8/18

编辑此页

上一页LLMs txt

下一页图标