Badge
Install
import { createApp } from 'vue';
import { Badge } from 'vant';
const app = createApp();
app.use(Badge);
Usage
Basic Usage
<van-badge content="5">
<div class="child" />
</van-badge>
<van-badge dot>
<div class="child" />
</van-badge>
<style>
.child {
width: 36px;
height: 36px;
background: #f2f3f5;
border-radius: 4px;
}
</style>
Max
<van-badge content="20" max="9">
<div class="child" />
</van-badge>
<van-badge content="200" max="99">
<div class="child" />
</van-badge>
Custom Color
<van-badge content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot color="#1989fa">
<div class="child" />
</van-badge>
Standaline
<van-badge content="200" max="99" />
API
Props
| Attribute |
Description |
Type |
Default |
| content |
Badge content |
number | string |
- |
| color |
Background color |
string |
#ee0a24 |
| dot |
Whether to show dot |
boolean |
false |
| max |
Max value，show {max}+ when exceed，only works when content is number |
number | string |
- |
Slots
| Name |
Description |
| default |
Default slot |
Less Variables
How to use: Custom Theme.
| Name |
Default Value |
Description |
| @badge-size |
16px |
- |
| @badge-color |
@white |
- |
| @badge-padding |
0 3px |
- |
| @badge-font-size |
@font-size-sm |
- |
| @badge-font-weight |
@font-weight-bold |
- |
| @badge-border-width |
@border-width-base |
- |
| @badge-background-color |
@red |
- |
| @badge-dot-color |
@red |
- |
| @badge-dot-size |
8px |
- |
| @badge-font-family |
-apple-system-font, Helvetica Neue, Arial, sans-serif |
- |
