基础使用

标签一
<template>
  <c-tag label="标签一" />
</template>
点击展开/收起代码
点击打开交互式编辑器

主题

主色(默认)
辅色
警告色
消极色
<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <div>
      <c-tag label="主色(默认)" />
    </div>
    <div>
      <c-tag label="辅色" theme="secondary" rounded />
    </div>
    <div>
      <c-tag label="警告色" theme="warning" />
    </div>
    <div>
      <c-tag label="消极色" theme="negative" />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

圆角

圆角标签
<template>
  <c-tag rounded label="圆角标签" />
</template>
点击展开/收起代码
点击打开交互式编辑器

尺寸

超小标签
小标签
中等(默认)标签
大标签
超大标签
<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <div>
      <c-tag label="超小标签" size="xs" />
    </div>
    <div>
      <c-tag label="小标签" size="sm" />
    </div>
    <div>
      <c-tag label="中等(默认)标签" />
    </div>
    <div>
      <c-tag label="大标签" size="lg" />
    </div>
    <div>
      <c-tag label="超大标签" size="xl" />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

可关闭

可关闭
可关闭
可关闭
可关闭
可关闭
<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <div>
      <c-tag
        closeable
        label="可关闭"
        size="xs"
        theme="secondary"
      />
    </div>
    <div>
      <c-tag closeable label="可关闭" size="sm" />
    </div>
    <div>
      <c-tag closeable label="可关闭" theme="warning" />
    </div>
    <div>
      <c-tag closeable label="可关闭" size="lg" />
    </div>
    <div>
      <c-tag
        closeable
        label="可关闭"
        size="xl"
        theme="negative"
      />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

CTag API

Props
Slots
Events
label
string
默认值  ''

标签内文字

theme
CTheme
默认值  'primary'

主题

size
CSize
默认值  'md'

尺寸

rounded
boolean
默认值  false

是否为圆角

closeable
boolean
默认值  false

是否可关闭,设置为true会展示一个关闭图标