ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

Tag 标签

标签 —— 3 种 variant、6 种 tone、3 种尺寸，可关闭、可圆角。

基础用法

tone 控制语义色，默认 neutral（灰色）。其他选项：primary / success / warning / danger / info。

背景 视口
DefaultPrimarySuccessWarningDangerInfo
src/App.vue 
<script setup lang="ts">
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row">
    <CfTag>Default</CfTag>
    <CfTag tone="primary">Primary</CfTag>
    <CfTag tone="success">Success</CfTag>
    <CfTag tone="warning">Warning</CfTag>
    <CfTag tone="danger">Danger</CfTag>
    <CfTag tone="info">Info</CfTag>
  </div>
</template>
<script setup>
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row">
    <CfTag>Default</CfTag>
    <CfTag tone="primary">Primary</CfTag>
    <CfTag tone="success">Success</CfTag>
    <CfTag tone="warning">Warning</CfTag>
    <CfTag tone="danger">Danger</CfTag>
    <CfTag tone="info">Info</CfTag>
  </div>
</template>
import { CfTag } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfTag>Default</CfTag>
    <CfTag tone="primary">Primary</CfTag>
    <CfTag tone="success">Success</CfTag>
    <CfTag tone="warning">Warning</CfTag>
    <CfTag tone="danger">Danger</CfTag>
    <CfTag tone="info">Info</CfTag>
  </>
);
}
import { CfTag } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfTag>Default</CfTag>
    <CfTag tone="primary">Primary</CfTag>
    <CfTag tone="success">Success</CfTag>
    <CfTag tone="warning">Warning</CfTag>
    <CfTag tone="danger">Danger</CfTag>
    <CfTag tone="info">Info</CfTag>
  </>
);
}

变体、尺寸与圆角

variant 与 tone 正交：solid / soft（默认）/ outline。rounded 切换到 pill 圆角。

背景 视口
solidsoftoutline
solidsoftoutline
smmdlgrounded
src/App.vue 
<script setup lang="ts">
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag variant="solid" tone="primary">solid</CfTag>
      <CfTag variant="soft" tone="primary">soft</CfTag>
      <CfTag variant="outline" tone="primary">outline</CfTag>
    </div>
    <div class="demo-row">
      <CfTag variant="solid" tone="danger">solid</CfTag>
      <CfTag variant="soft" tone="danger">soft</CfTag>
      <CfTag variant="outline" tone="danger">outline</CfTag>
    </div>
    <div class="demo-row">
      <CfTag size="sm" tone="success">sm</CfTag>
      <CfTag size="md" tone="success">md</CfTag>
      <CfTag size="lg" tone="success">lg</CfTag>
      <CfTag tone="success" rounded>rounded</CfTag>
    </div>
  </div>
</template>
<script setup>
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag variant="solid" tone="primary">solid</CfTag>
      <CfTag variant="soft" tone="primary">soft</CfTag>
      <CfTag variant="outline" tone="primary">outline</CfTag>
    </div>
    <div class="demo-row">
      <CfTag variant="solid" tone="danger">solid</CfTag>
      <CfTag variant="soft" tone="danger">soft</CfTag>
      <CfTag variant="outline" tone="danger">outline</CfTag>
    </div>
    <div class="demo-row">
      <CfTag size="sm" tone="success">sm</CfTag>
      <CfTag size="md" tone="success">md</CfTag>
      <CfTag size="lg" tone="success">lg</CfTag>
      <CfTag tone="success" rounded>rounded</CfTag>
    </div>
  </div>
</template>
import { CfTag } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfTag variant="solid" tone="primary">solid</CfTag>
      <CfTag variant="soft" tone="primary">soft</CfTag>
      <CfTag variant="outline" tone="primary">outline</CfTag>
      <CfTag size="sm" tone="success">sm</CfTag>
      <CfTag size="md" tone="success">md</CfTag>
      <CfTag size="lg" tone="success">lg</CfTag>
      <CfTag tone="success" rounded>rounded</CfTag>
    </>
  );
}
import { CfTag } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfTag variant="solid" tone="primary">solid</CfTag>
      <CfTag variant="soft" tone="primary">soft</CfTag>
      <CfTag variant="outline" tone="primary">outline</CfTag>
      <CfTag size="sm" tone="success">sm</CfTag>
      <CfTag size="md" tone="success">md</CfTag>
      <CfTag size="lg" tone="success">lg</CfTag>
      <CfTag tone="success" rounded>rounded</CfTag>
    </>
  );
}

可关闭

打开 closable 显示 × 按钮，点击触发 close / onClose。

背景 视口
VueAstroTailwindTypeScript
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfButton, CfTag } from '@chufix-design/vue';

const tags = ref(['Vue', 'Astro', 'Tailwind', 'TypeScript']);

function remove(t: string) {
  tags.value = tags.value.filter((x) => x !== t);
}
function reset() {
  tags.value = ['Vue', 'Astro', 'Tailwind', 'TypeScript'];
}
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag v-for="t in tags" :key="t" tone="primary" closable @close="remove(t)">
        {{ t }}
      </CfTag>
      <CfButton
        v-if="!tags.length"
        class="cf-btn cf-btn--soft cf-btn--sm"
        @click="reset"
      >全部清空，点这里恢复</CfButton>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfButton, CfTag } from '@chufix-design/vue';

const tags = ref(['Vue', 'Astro', 'Tailwind', 'TypeScript']);

function remove(t) {
  tags.value = tags.value.filter((x) => x !== t);
}
function reset() {
  tags.value = ['Vue', 'Astro', 'Tailwind', 'TypeScript'];
}
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfTag v-for="t in tags" :key="t" tone="primary" closable @close="remove(t)">
        {{ t }}
      </CfTag>
      <CfButton
        v-if="!tags.length"
        class="cf-btn cf-btn--soft cf-btn--sm"
        @click="reset"
      >全部清空，点这里恢复</CfButton>
    </div>
  </div>
</template>
import { useState } from 'react';
import { CfButton, CfTag } from '@chufix-design/react';

export default function Demo() {
  const [tags, setTags] = useState(['Vue', 'Astro', 'Tailwind', 'TypeScript']);

  function remove(t: string) {
    setTags(tags.filter((x) => x !== t));
  }
  function reset() {
    setTags(['Vue', 'Astro', 'Tailwind', 'TypeScript']);
  }
  return (
    <>
      <div className="demo-stack">
          <div className="demo-row">
            <CfTag v-for="t in tags" key={t} tone="primary" closable onClose={() => remove(t)}>
              {t}
            </CfTag>
            <CfButton v-if="!tags.length" className="cf-btn cfBtn-Soft cf-btn--sm" onClick={reset} >全部清空，点这里恢复</CfButton>
          </div>
        </div>
    </>
  );
}
import { useState } from 'react';
import { CfButton, CfTag } from '@chufix-design/react';

export default function Demo() {
  const [tags, setTags] = useState(['Vue', 'Astro', 'Tailwind', 'TypeScript']);

  function remove(t) {
    setTags(tags.filter((x) => x !== t));
  }
  function reset() {
    setTags(['Vue', 'Astro', 'Tailwind', 'TypeScript']);
  }
  return (
    <>
      <div className="demo-stack">
          <div className="demo-row">
            <CfTag v-for="t in tags" key={t} tone="primary" closable onClose={() => remove(t)}>
              {t}
            </CfTag>
            <CfButton v-if="!tags.length" className="cf-btn cfBtn-Soft cf-btn--sm" onClick={reset} >全部清空，点这里恢复</CfButton>
          </div>
        </div>
    </>
  );
}

前置图标 / 状态点

leading 具名插槽（React 端：leading prop）渲染在文本左侧。常见做法是放一个小 SVG 图标或纯色圆点，用来表示状态（已发布 / 草稿 / 已归档）或区别同色 tag。

背景 视口
已发布 草稿 已归档 Beta
src/App.vue 
<script setup lang="ts">
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <CfTag tone="success">
    <template #leading>
      <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 8.5l3 3L13 5" />
      </svg>
    </template>
    已发布
  </CfTag>
  <CfTag tone="warning">
    <template #leading>
      <span class="adm-dot" />
    </template>
    草稿
  </CfTag>
  <CfTag tone="neutral">
    <template #leading>
      <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <rect x="2" y="3" width="12" height="10" rx="1" />
        <path d="M6 7h4M6 10h4" />
      </svg>
    </template>
    已归档
  </CfTag>
  <CfTag tone="info" variant="outline">
    <template #leading>
      <span class="adm-pulse" />
    </template>
    Beta
  </CfTag>
</template>
<style scoped>
.adm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.adm-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
  box-shadow: 0 0 0 0 currentColor;
  animation: adm-pulse 1.4s ease-out infinite;
}
@keyframes adm-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, currentColor 60%, transparent); }
  100% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%,  transparent); }
}
</style>
<script setup>
import { CfTag } from '@chufix-design/vue';
</script>
<template>
  <CfTag tone="success">
    <template #leading>
      <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 8.5l3 3L13 5" />
      </svg>
    </template>
    已发布
  </CfTag>
  <CfTag tone="warning">
    <template #leading>
      <span class="adm-dot" />
    </template>
    草稿
  </CfTag>
  <CfTag tone="neutral">
    <template #leading>
      <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
        <rect x="2" y="3" width="12" height="10" rx="1" />
        <path d="M6 7h4M6 10h4" />
      </svg>
    </template>
    已归档
  </CfTag>
  <CfTag tone="info" variant="outline">
    <template #leading>
      <span class="adm-pulse" />
    </template>
    Beta
  </CfTag>
</template>
<style scoped>
.adm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.adm-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
  box-shadow: 0 0 0 0 currentColor;
  animation: adm-pulse 1.4s ease-out infinite;
}
@keyframes adm-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, currentColor 60%, transparent); }
  100% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%,  transparent); }
}
</style>
import { CfTag } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfTag tone="success" leading={<CheckIcon />}>已发布</CfTag>
      <CfTag tone="warning" leading={<span className="dot" />}>草稿</CfTag>
    </>
  );
}
import { CfTag } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfTag tone="success" leading={<CheckIcon />}>已发布</CfTag>
      <CfTag tone="warning" leading={<span className="dot" />}>草稿</CfTag>
    </>
  );
}

API

Props

Prop类型默认值说明
variant'solid' | 'soft' | 'outline''soft'视觉变体
tone'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info''neutral'语义色
size'sm' | 'md' | 'lg''md'高度与字号
roundedbooleanfalse圆角到 pill
closablebooleanfalse显示 × 关闭按钮

Events

Vue 事件React 回调载荷类型说明
closeonCloseMouseEvent点击 × 关闭按钮时触发

Slots / Children

Slot作用域参数说明
default—tag 文本（React 端：children）
leading—文本左侧的图标 / 状态点（React 端：leading prop）

反馈与讨论

Tag 标签 的讨论

0
0 / 600
正在加载评论...