39 lines
1.0 KiB
Markdown
39 lines
1.0 KiB
Markdown
---
|
|
title: 徽章
|
|
author: pengzhanbo
|
|
icon: iconamoon:badge-light
|
|
createTime: 2024/08/18 22:45:50
|
|
permalink: /guide/components/badge/
|
|
---
|
|
|
|
## 概述 <Badge type="tip" text="badge" />
|
|
|
|
使用 `<Badge>` 组件来显示 行内信息，如状态或标签。
|
|
|
|
将你想显示的内容传递给 `<Badge>` 组件的 `text` 属性。
|
|
|
|
## Props
|
|
|
|
| 名称 | 类型 | 默认值 | 说明 |
|
|
| ---- | ------------------------------------------ | ------- | ---- |
|
|
| type | `'info' \| 'tip' \| 'warning' \| 'danger'` | `'tip'` | 类型 |
|
|
| text | `string` | `''` | 文本 |
|
|
|
|
## 示例
|
|
|
|
**输入：**
|
|
|
|
```md :no-line-numbers
|
|
- 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 type="info" text="v2" />
|
|
- VuePress - <Badge type="tip" text="v2" />
|
|
- VuePress - <Badge type="warning" text="v2" />
|
|
- VuePress - <Badge type="danger" text="v2" />
|