Press UI

# Tag

Used to mark keywords and summarize main content.

# Code Demo

# Basic usage

The label color is controlled by the type attribute, which defaults to gray.

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

# Hollow style

Set the plain property to hollow style.

<press-tag plain type="primary">label</press-tag>
<press-tag plain type="success">label</press-tag>
<press-tag plain type="danger">label</press-tag>
<press-tag plain type="warning">label</press-tag>

# rounded corner style

Rounded corners set by round.

<press-tag round type="primary">label</press-tag>
<press-tag round type="success">label</press-tag>
<press-tag round type="danger">label</press-tag>
<press-tag round type="warning">label</press-tag>

# markup style

Set to mark style (semi-rounded corners) by mark.

<press-tag mark type="primary">label</press-tag>
<press-tag mark type="success">label</press-tag>
<press-tag mark type="danger">label</press-tag>
<press-tag mark type="warning">label</press-tag>

# Custom Colors

<press-tag color="#f2826a">label</press-tag>
<press-tag color="#7232dd">label</press-tag>
<press-tag color="#7232dd" plain>label</press-tag>
<press-tag color="#ffe1e1" text-color="#ad0000">label</press-tag>

# Label size

<press-tag type="danger">label</press-tag>
<press-tag type="danger" size="medium">label</press-tag>
<press-tag type="danger" size="large">label</press-tag>

# Closable tags

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

  <press-tag
   v-if="show.primary"
   type="primary"
   closeable
   @close="onClose('primary')"
>
   Label
</press-tag>
<press-tag
   v-if="show.success"
   type="success"
   closeable
   @close="onClose('success')"
>
   Label
</press-tag>

export default {
   data() {
     return {
       show: {
         primary: true,
         success: true,
       },
     }
   },
   methods: {
     onClose(type) {
       this. show[type] = false;
     },
   },
}

# API

# Props

Parameter Description Type Default
type type, optional values are primary success danger warning string -
size size, optional value is large medium string -
color label color string -
plain Whether it is hollow style boolean false
round Whether it is a rounded corner style boolean false
mark Whether it is a mark style boolean false
text-color text color, takes precedence over color attribute string white
closeable Whether it is a closeable tag boolean false

# Slot

Name Description
- Custom Tag display content

# Events

Event Name Description Callback Parameters
close fires when a tab is closed -

# External style classes

class name description
custom-class root node style class

# Theme customization

--tag-padding：
--tag-text-color：
--tag-font-size：
--tag-border-radius：
--tag-line-height：
--tag-medium-padding：
--tag-large-padding：
--tag-large-border-radius：
--tag-large-font-size：
--tag-round-border-radius：
--tag-danger-color：
--tag-primary-color：
--tag-success-color：
--tag-warning-color：
--tag-default-color：
--tag-plain-background-color：
横屏

← BackTop →