mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-06-21 03:49:15 +08:00
152 lines
3.2 KiB
Markdown
152 lines
3.2 KiB
Markdown
# Badge
|
||
|
||
### Intro
|
||
|
||
Display a small badge or a red dot to the top-right of its child.
|
||
|
||
### Install
|
||
|
||
Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
|
||
|
||
```js
|
||
import { createApp } from 'vue';
|
||
import { Badge } from 'vant';
|
||
|
||
const app = createApp();
|
||
app.use(Badge);
|
||
```
|
||
|
||
## Usage
|
||
|
||
### Basic Usage
|
||
|
||
```html
|
||
<van-badge :content="5">
|
||
<div class="child" />
|
||
</van-badge>
|
||
<van-badge :content="10">
|
||
<div class="child" />
|
||
</van-badge>
|
||
<van-badge content="Hot">
|
||
<div class="child" />
|
||
</van-badge>
|
||
<van-badge dot>
|
||
<div class="child" />
|
||
</van-badge>
|
||
|
||
<style>
|
||
.child {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #f2f3f5;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### Max
|
||
|
||
```html
|
||
<van-badge :content="20" max="9">
|
||
<div class="child" />
|
||
</van-badge>
|
||
<van-badge :content="50" max="20">
|
||
<div class="child" />
|
||
</van-badge>
|
||
<van-badge :content="200" max="99">
|
||
<div class="child" />
|
||
</van-badge>
|
||
```
|
||
|
||
### Custom Color
|
||
|
||
```html
|
||
<van-badge :content="5" color="#1989fa">
|
||
<div class="child" />
|
||
</van-badge>
|
||
<van-badge :content="10" color="#1989fa">
|
||
<div class="child" />
|
||
</van-badge>
|
||
<van-badge dot color="#1989fa">
|
||
<div class="child" />
|
||
</van-badge>
|
||
```
|
||
|
||
### Custom Content
|
||
|
||
Use `content` slot to custom :content of badge.
|
||
|
||
```html
|
||
<van-badge>
|
||
<div class="child" />
|
||
<template #content>
|
||
<van-icon name="success" class="badge-icon" />
|
||
</template>
|
||
</van-badge>
|
||
<van-badge>
|
||
<div class="child" />
|
||
<template #content>
|
||
<van-icon name="cross" class="badge-icon" />
|
||
</template>
|
||
</van-badge>
|
||
<van-badge>
|
||
<div class="child" />
|
||
<template #content>
|
||
<van-icon name="down" class="badge-icon" />
|
||
</template>
|
||
</van-badge>
|
||
```
|
||
|
||
```css
|
||
.badge-icon {
|
||
display: block;
|
||
font-size: 10px;
|
||
line-height: 16px;
|
||
}
|
||
```
|
||
|
||
### Standalone
|
||
|
||
```html
|
||
<van-badge :content="20" />
|
||
|
||
<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_ | - |
|
||
| offset `v3.0.5` | Offset of badge dot | _[number \| string, number \| string]_ | - |
|
||
| show-zero `v3.0.10` | Whether to show badge when content is zero | _boolean_ | `true` |
|
||
|
||
### Slots
|
||
|
||
| Name | Description |
|
||
| ------- | -------------------- |
|
||
| default | Default slot |
|
||
| content | Custom badge content |
|
||
|
||
### CSS Variables
|
||
|
||
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
|
||
|
||
| Name | Default Value | Description |
|
||
| --- | --- | --- |
|
||
| --van-badge-size | `16px` | - |
|
||
| --van-badge-color | `@white` | - |
|
||
| --van-badge-padding | `0 3px` | - |
|
||
| --van-badge-font-size | `@font-size-sm` | - |
|
||
| --van-badge-font-weight | `@font-weight-bold` | - |
|
||
| --van-badge-border-width | `@border-width-base` | - |
|
||
| --van-badge-background-color | `@red` | - |
|
||
| --van-badge-dot-color | `@red` | - |
|
||
| --van-badge-dot-size | `8px` | - |
|
||
| --van-badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |
|