vant/src/tag

Tag

Install

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

import { createApp } from 'vue';
import { Tag } from 'vant';

const app = createApp();
app.use(Tag);

Usage

Basic Usage

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

Plain style

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

Round style

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

Mark style

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

Closeable

<van-tag :show="show" closeable size="medium" type="primary" @close="close">
  Tag
</van-tag>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(true);
    const close = () => {
      show.value = false;
    };

    return {
      show,
      close,
    };
  },
};

Custom Size

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

Custom Color

<van-tag color="#7232dd">Tag</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
<van-tag color="#7232dd" plain>Tag</van-tag>

API

Props

Attribute	Description	Type	Default
type	Type, can be set to primary success danger warning	string	default
size	Size, can be set to large medium	string	-
color	Custom color	string	-
show	Whether to show tag	boolean	true
plain	Whether to be plain style	boolean	false
round	Whether to be round style	boolean	false
mark	Whether to be mark style	boolean	false
text-color	Text color	string	white
closeable	Whether to be closeable	boolean	false

Slots

Name	Description
default	Default slot

Events

Event	Description	Arguments
click	Emitted when component is clicked	event: MouseEvent
close	Emitted when close icon is clicked	event: MouseEvent

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@tag-padding	0 @padding-base	-
@tag-text-color	@white	-
@tag-font-size	@font-size-sm	-
@tag-border-radius	2px	-
@tag-line-height	16px	-
@tag-medium-padding	2px 6px	-
@tag-large-padding	@padding-base @padding-xs	-
@tag-large-border-radius	@border-radius-md	-
@tag-large-font-size	@font-size-md	-
@tag-round-border-radius	@border-radius-max	-
@tag-danger-color	@red	-
@tag-primary-color	@blue	-
@tag-success-color	@green	-
@tag-warning-color	@orange	-
@tag-default-color	@gray-6	-
@tag-plain-background-color	@white	-