Tag tag

introduce

Used to mark keywords and summarize main content.

Basic usage

Control the label color through the type attribute.

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

Hollow style

Set the plain attribute to hollow style.

<z-tag plain type="primary">tag</z-tag>

Rounded corner style

Set to rounded corner style via round.

<z-tag round type="primary">tag</z-tag>

Tag style

Set to mark style (semi-rounded) via mark.

<z-tag mark type="primary">tag</z-tag>

Closeable tags

Adding the closeable attribute indicates that the label can be closed. When the label is closed, the close event will be triggered. In the close event, the logic of hiding the label can be executed.

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

import { ref } from 'vue';
const show = ref(true);
const close = () => {
   show.value = false;
};

Label size

Resize the label via the size attribute.

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

Custom color

Set the label color via the color and text-color properties.

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

Props

Slots

Events

Style variables

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