blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity
vant/src/badge
History
neverland 4ccd7c1cb5
feat: add more color variables (#8861) 
* style: add --van-warning-color

* style: add --van-success-color

* feat: add more color variables
2021-06-14 15:21:05 +08:00
..
demo
docs(Badge): fix missing demo (#7976)
2021-01-23 16:38:09 +08:00
test
feat(Badge): offset prop support custom unit
2021-04-14 09:35:08 +08:00
Badge.tsx
perf: add truthProp util (#8522)
2021-04-14 10:26:21 +08:00
index.less
feat(style): component using basic css variables
2021-06-12 15:52:22 +08:00
index.ts
types: improve generated component typing (#8308)
2021-03-08 16:52:15 +08:00
README.md
feat: add more color variables (#8861)
2021-06-14 15:21:05 +08:00
README.zh-CN.md
feat: add more color variables (#8861)
2021-06-14 15:21:05 +08:00
var.less
feat: add more color variables (#8861)
2021-06-14 15:21:05 +08:00

README.md

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 for more registration ways.

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 :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

<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

<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.

<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>

.badge-icon {
  display: block;
  font-size: 10px;
  line-height: 16px;
}

Standalone

<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.

Name Default Value Description
--van-badge-size 16px -
--van-badge-color var(--van-white) -
--van-badge-padding 0 3px -
--van-badge-font-size var(--van-font-size-sm) -
--van-badge-font-weight var(--van-font-weight-bold) -
--van-badge-border-width var(--van-border-width-base) -
--van-badge-background-color var(--van-danger-color) -
--van-badge-dot-color var(--van-danger-color) -
--van-badge-dot-size 8px -
--van-badge-font-family -apple-system-font, Helvetica Neue, Arial, sans-serif -