2021-10-22 19:32:39 +08:00
|
|
|
---
|
2021-10-25 15:21:08 +08:00
|
|
|
title: Badge
|
2021-10-22 19:32:39 +08:00
|
|
|
lang: en-US
|
|
|
|
|
---
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
# Badge
|
|
|
|
|
|
|
|
|
|
A number or status mark on buttons and icons.
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
## Basic Usage
|
2021-09-17 00:18:50 +08:00
|
|
|
|
|
|
|
|
Displays the amount of new messages.
|
|
|
|
|
|
|
|
|
|
:::demo The amount is defined with `value` which accepts `Number` or `String`.
|
|
|
|
|
|
|
|
|
|
badge/basic
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
## Max Value
|
2021-09-17 00:18:50 +08:00
|
|
|
|
|
|
|
|
You can customize the max value.
|
|
|
|
|
|
|
|
|
|
:::demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
|
|
|
|
|
|
|
|
|
|
badge/max
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
## Customizations
|
|
|
|
|
|
|
|
|
|
Displays text content other than numbers.
|
|
|
|
|
|
|
|
|
|
:::demo When `value` is a `String`, it can display customized text.
|
|
|
|
|
|
|
|
|
|
badge/customize
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
## Red Dot
|
2021-09-17 00:18:50 +08:00
|
|
|
|
|
|
|
|
Use a red dot to mark content that needs to be noticed.
|
|
|
|
|
|
|
|
|
|
:::demo Use the attribute `is-dot`. It is a `Boolean`.
|
|
|
|
|
|
|
|
|
|
badge/dot
|
|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
## Badge API
|
2021-09-17 00:18:50 +08:00
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
### Badge Attributes
|
2021-10-04 08:26:51 +08:00
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
| Attribute | Description | Type | Default |
|
|
|
|
|
| --------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------- | ---------- |
|
|
|
|
|
| `value` | display value. | `string \| number` | `''` |
|
|
|
|
|
| `max` | maximum value, shows `{max}+` when exceeded. Only works if `value` is a number. | `number` | `99` |
|
|
|
|
|
| `is-dot` | if a little dot is displayed. | `boolean` | `false` |
|
|
|
|
|
| `hidden` | hidden badge. | `boolean` | `false` |
|
2022-05-04 12:10:25 +08:00
|
|
|
| `type` | badge type. | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'danger'` |
|
2021-10-04 08:26:51 +08:00
|
|
|
|
2022-03-24 15:35:15 +08:00
|
|
|
### Badge Slots
|
|
|
|
|
|
|
|
|
|
| Name | Description |
|
|
|
|
|
| --------- | ------------------------- |
|
|
|
|
|
| `default` | customize default content |
|
