Tag

用于标记和选择。

用法

type

使用 type 属性定义 Tag 的类型。

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag>tag</pl-tag>
      <pl-tag mode="outline">
        tag
      </pl-tag>
      <pl-tag mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag>tag</pl-tag>
      <pl-tag mode="outline">
        tag
      </pl-tag>
      <pl-tag mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

state

您可以定义不同的状态。

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag value="6" state="info">
        tag
      </pl-tag>
      <pl-tag value="6" state="success">
        tag
      </pl-tag>
      <pl-tag value="6" state="warning">
        tag
      </pl-tag>
      <pl-tag value="6" state="danger">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag value="6" state="info">
        tag
      </pl-tag>
      <pl-tag value="6" state="success">
        tag
      </pl-tag>
      <pl-tag value="6" state="warning">
        tag
      </pl-tag>
      <pl-tag value="6" state="danger">
        tag
      </pl-tag>
    </div>
  </div>
</template>

shape

预定义标记的形状。

rounded

pilled

<template>
  <div space-y-2>
    <div fscw gap-2>
      <pl-tag mode="solid">
        rounded
      </pl-tag>
      <pl-tag mode="outline" shape="pilled">
        pilled
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-2>
      <pl-tag mode="solid">
        rounded
      </pl-tag>
      <pl-tag mode="outline" shape="pilled">
        pilled
      </pl-tag>
    </div>
  </div>
</template>

closable

使用 closable 属性定义可移除标记。

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag closable>
        tag
      </pl-tag>
      <pl-tag closable mode="outline">
        tag
      </pl-tag>
      <pl-tag closable mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag closable>
        tag
      </pl-tag>
      <pl-tag closable mode="outline">
        tag
      </pl-tag>
      <pl-tag closable mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

indicator

使用 indicator 显示标记。

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag indicator>
        tag
      </pl-tag>
      <pl-tag indicator mode="outline">
        tag
      </pl-tag>
      <pl-tag indicator mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag indicator>
        tag
      </pl-tag>
      <pl-tag indicator mode="outline">
        tag
      </pl-tag>
      <pl-tag indicator mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

属性

属性名	可选值	默认值	描述
type	`solid` \| `outline` \| `soft`	`solid`	Set custom type attribute.
color	`blue` \| `teal` \| `red` \| `yellow` \| `gray` \| `deepGray`	`teal`	Set tag color.
shape	`rounded` \| `pilled`	`rounded`	Set tag shape.
closable	`boolean`	`false`	Use the closable attribute to define a removable tag.
indicator	`boolean`	`false`	Use an indicator appearance to show indication.

Tag ​

用法 ​

type ​

state ​

shape ​

closable ​

indicator ​

属性 ​

Tag

用法

type

state

shape

closable

indicator

属性