/*! For license information please see 5132.b6920b11.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["5132"],{86063: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:'

Tag

\n

Intro

\n

Used to mark keywords and summarize the main content.

\n

Install

\n

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

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

Usage

\n

Basic Usage

\n
<van-tag type="primary">Tag</van-tag>\n<van-tag type="success">Tag</van-tag>\n<van-tag type="danger">Tag</van-tag>\n<van-tag type="warning">Tag</van-tag>\n
\n

Plain style

\n
<van-tag plain type="primary">Tag</van-tag>\n
\n

Round style

\n
<van-tag round type="primary">Tag</van-tag>\n
\n

Mark style

\n
<van-tag mark type="primary">Tag</van-tag>\n
\n

Closeable

\n
<van-tag :show="show" closeable size="medium" type="primary" @close="close">\n  Tag\n</van-tag>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const show = ref(true);\n    const close = () => {\n      show.value = false;\n    };\n\n    return {\n      show,\n      close,\n    };\n  },\n};\n
\n

Custom Size

\n
<van-tag type="primary">Tag</van-tag>\n<van-tag type="primary" size="medium">Tag</van-tag>\n<van-tag type="primary" size="large">Tag</van-tag>\n
\n

Custom Color

\n
<van-tag color="#7232dd">Tag</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>\n<van-tag color="#7232dd" plain>Tag</van-tag>\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\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
typeType, can be set to primary success danger warningstringdefault
sizeSize, can be set to large mediumstring-
colorCustom colorstring-
showWhether to show tagbooleantrue
plainWhether to be plain stylebooleanfalse
roundWhether to be round stylebooleanfalse
markWhether to be mark stylebooleanfalse
text-colorText colorstringwhite
closeableWhether to be closeablebooleanfalse
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultDefault slot
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when component is clickedevent: MouseEvent
closeEmitted when close icon is clickedevent: MouseEvent
\n

Types

\n

The component exports the following type definitions:

\n
import type { TagSize, TagType, TagProps } 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\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-tag-padding0 var(--van-padding-base)-
--van-tag-text-colorvar(--van-white)-
--van-tag-font-sizevar(--van-font-size-sm)-
--van-tag-radius2px-
--van-tag-line-height16px-
--van-tag-medium-padding2px 6px-
--van-tag-large-paddingvar(--van-padding-base) var(--van-padding-xs)-
--van-tag-large-radiusvar(--van-radius-md)-
--van-tag-large-font-sizevar(--van-font-size-md)-
--van-tag-round-radiusvar(--van-radius-max)-
--van-tag-danger-colorvar(--van-danger-color)-
--van-tag-primary-colorvar(--van-primary-color)-
--van-tag-success-colorvar(--van-success-color)-
--van-tag-warning-colorvar(--van-warning-color)-
--van-tag-default-colorvar(--van-gray-6)-
--van-tag-plain-backgroundvar(--van-background-2)-
\n
'},null,8,l))}}}]);