Tag 标签

进行标记和分类的小标签。

导入

import { Tag, CheckableTag, CheckableTagGroup } from "@reglow/reui";

何时使用

用于标记事物的属性和维度。
进行分类。

代码演示

基础用法

<script setup lang="ts">
import { Tag } from '@reglow/reui'
</script>

<template>
  <Tag>Tag 1</Tag>
  <Tag>
    <a href="https://github.com" target="_blank">Link</a>
  </Tag>
</template>

可关闭标签

<script setup lang="ts">
import { Tag } from '@reglow/reui'

const handleClose = (e: Event) => {
  e.preventDefault()
  console.log('Closed!')
}
</script>

<template>
  <Tag closable @close="handleClose">可关闭</Tag>
  <Tag :close-icon="true" @close="console.log">默认关闭图标</Tag>
</template>

多彩标签

预设色彩和自定义色值。

<template>
  <!-- 预设颜色 -->
  <Tag color="magenta" variant="filled">magenta</Tag>
  <Tag color="red" variant="solid">red</Tag>
  <Tag color="blue" variant="outlined">blue</Tag>

  <!-- 状态色 -->
  <Tag color="success">success</Tag>
  <Tag color="error">error</Tag>
  <Tag color="warning">warning</Tag>
  <Tag color="processing">processing</Tag>

  <!-- 自定义颜色 -->
  <Tag color="#f50">#f50</Tag>
  <Tag color="#2db7f5" variant="solid">#2db7f5</Tag>
</template>

样式变体

filled、solid、outlined 三种样式。

<template>
  <Tag color="blue" variant="filled">Filled</Tag>
  <Tag color="blue" variant="solid">Solid</Tag>
  <Tag color="blue" variant="outlined">Outlined</Tag>
</template>

带图标

<script setup lang="ts">
import { Tag } from '@reglow/reui'
import { Twitter } from 'lucide-vue-next'
</script>

<template>
  <Tag color="#55acee" icon>
    <template #icon><Twitter class="size-3" /></template>
    Twitter
  </Tag>
</template>

可选择标签

<script setup lang="ts">
import { ref } from 'vue'
import { CheckableTag } from '@reglow/reui'

const checked = ref(true)
</script>

<template>
  <CheckableTag v-model:checked="checked" @change="console.log">
    可选择标签
  </CheckableTag>
</template>

标签组 - 单选

<script setup lang="ts">
import { ref } from 'vue'
import { CheckableTagGroup } from '@reglow/reui'

const selected = ref('Books')
const options = ['Movies', 'Books', 'Music', 'Sports']
</script>

<template>
  <CheckableTagGroup :options="options" v-model="selected" />
</template>

标签组 - 多选

<script setup lang="ts">
import { ref } from 'vue'
import { CheckableTagGroup } from '@reglow/reui'

const selected = ref(['Movies', 'Music'])
const options = ['Movies', 'Books', 'Music', 'Sports']
</script>

<template>
  <CheckableTagGroup multiple :options="options" v-model="selected" />
</template>

API

Tag Props

参数	说明	类型	默认值
color	标签颜色（预设或自定义色值）	`string`	`'default'`
variant	样式变体	`'filled' \| 'solid' \| 'outlined'`	`'filled'`
closable	是否可关闭	`boolean`	`false`
closeIcon	是否显示关闭图标	`boolean`	`false`
icon	是否显示图标插槽	`boolean`	`false`
bordered	是否有边框	`boolean`	`true`

Tag Events

事件名	说明	回调参数
close	关闭时的回调	`(e: Event)`
click	点击时的回调	`(e: MouseEvent)`

Tag Slots

插槽名	说明
default	标签内容
icon	自定义图标
closeIcon	自定义关闭图标

预设颜色

magenta red volcano orange gold lime green cyan blue geekblue purple

状态颜色

success processing error warning default

CheckableTag Props

参数	说明	类型	默认值
checked (v-model)	是否选中	`boolean`	`false`

CheckableTag Events

事件名	说明	回调参数
change	选中状态变化回调	`(checked: boolean)`

CheckableTagGroup Props

参数	说明	类型	默认值
options	选项数组	`T[]`	-
modelValue (v-model)	当前选中值	`T \| T[]`	-
multiple	是否多选	`boolean`	`false`

CheckableTagGroup Events

事件名	说明	回调参数
change	选中变化回调	`(value: T \| T[])`

Table 表格

基于 TanStack Table 的通用表格与分页表格，支持自动列、排序、行选择、展开行、搜索、分页、列管理与服务端排序

Timeline 时间轴

按照时间顺序展示事件、操作记录、流程进度。