/*! For license information please see 3624.20d235bc.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["3624"],{20874:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Badge

\n

Intro

\n

Display a small badge or a red dot to the top-right of its child.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Badge } from 'vant';\n\nconst app = createApp();\napp.use(Badge);\n
\n

Usage

\n

Basic Usage

\n
<van-badge :content="5">\n  <div class="child" />\n</van-badge>\n<van-badge :content="10">\n  <div class="child" />\n</van-badge>\n<van-badge content="Hot">\n  <div class="child" />\n</van-badge>\n<van-badge dot>\n  <div class="child" />\n</van-badge>\n\n<style>\n  .child {\n    width: 40px;\n    height: 40px;\n    background: #f2f3f5;\n    border-radius: 4px;\n  }\n</style>\n
\n

Max

\n
<van-badge :content="20" max="9">\n  <div class="child" />\n</van-badge>\n<van-badge :content="50" max="20">\n  <div class="child" />\n</van-badge>\n<van-badge :content="200" max="99">\n  <div class="child" />\n</van-badge>\n
\n

Custom Color

\n
<van-badge :content="5" color="#1989fa">\n  <div class="child" />\n</van-badge>\n<van-badge :content="10" color="#1989fa">\n  <div class="child" />\n</van-badge>\n<van-badge dot color="#1989fa">\n  <div class="child" />\n</van-badge>\n
\n

Custom Content

\n

Use content slot to custom the content of badge.

\n
<van-badge>\n  <div class="child" />\n  <template #content>\n    <van-icon name="success" class="badge-icon" />\n  </template>\n</van-badge>\n<van-badge>\n  <div class="child" />\n  <template #content>\n    <van-icon name="cross" class="badge-icon" />\n  </template>\n</van-badge>\n<van-badge>\n  <div class="child" />\n  <template #content>\n    <van-icon name="down" class="badge-icon" />\n  </template>\n</van-badge>\n
\n
.badge-icon {\n  display: block;\n  font-size: 10px;\n  line-height: 16px;\n}\n
\n

Custom Position

\n

Use position prop to set the position of badge.

\n
<van-badge :content="10" position="top-left">\n  <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-left">\n  <div class="child" />\n</van-badge>\n<van-badge :content="10" position="bottom-right">\n  <div class="child" />\n</van-badge>\n
\n

Standalone

\n
<van-badge :content="20" />\n\n<van-badge :content="200" max="99" />\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
contentBadge contentnumber | string-
colorBackground colorstring#ee0a24
dotWhether to show dotbooleanfalse
maxMax value, show {max}+ when exceed, only works when content is numbernumber | string-
offsetOffset of badge dot, the two items of the array correspond to the horizontal and vertical offsets[number | string, number | string]-
show-zeroWhether to show badge when content is zerobooleantrue
positionBadge position, can be set to top-left bottom-left bottom-rightstringtop-right
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultDefault slot
contentCustom badge content
\n

Types

\n

The component exports the following type definitions:

\n
import type { BadgeProps, BadgePosition } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-badge-size16px-
--van-badge-colorvar(--van-white)-
--van-badge-padding0 3px-
--van-badge-font-sizevar(--van-font-size-sm)-
--van-badge-font-weightvar(--van-font-bold)-
--van-badge-border-widthvar(--van-border-width)-
--van-badge-backgroundvar(--van-danger-color)-
--van-badge-dot-colorvar(--van-danger-color)-
--van-badge-dot-size8px-
--van-badge-font-apple-system-font, Helvetica Neue, Arial, sans-serif-
\n
'},null,8,l))}}}]);