连载中未分级全年龄推荐科幻
<script setup lang="ts">
import { Inline, Tag } from '@hina-ui/vue'
</script>
<template>
<Inline align="center">
<Tag tone="success">连载中</Tag>
<Tag tone="warning">未分级</Tag>
<Tag tone="info">全年龄</Tag>
<Tag tone="accent" variant="solid">推荐</Tag>
<Tag variant="outline">科幻</Tag>
</Inline>
</template>
vue
用法
import { Tag } from '@hina-ui/vue'
ts
标签渲染为 span，内容放在默认插槽中。
标签只做标注，没有点击、选中与移除。需要点击触发操作时使用 Button。
科幻
<script setup lang="ts">
import { Tag } from '@hina-ui/vue'
</script>
<template>
<Tag>科幻</Tag>
</template>
vue
示例
变体
共三种：soft 带浅色底，solid 带实心底，outline 只有边框。默认为 soft。
同一处列表中的标签应当使用同一种变体，只用色调区分含义。
variant
tone
pill
连载中
<template>
<Tag>连载中</Tag>
</template>vue
色调
共六种色调。neutral 用于分类与属性，其余五种用于表达状态：accent 表示强调，success 表示成功，warning 表示需要注意，danger 表示错误或者失败，info 表示补充说明。
草稿推荐已通过待复核已驳回全年龄
<script setup lang="ts">
import { Inline, Tag } from '@hina-ui/vue'
</script>
<template>
<Inline align="center">
<Tag tone="neutral">草稿</Tag>
<Tag tone="accent">推荐</Tag>
<Tag tone="success">已通过</Tag>
<Tag tone="warning">待复核</Tag>
<Tag tone="danger">已驳回</Tag>
<Tag tone="info">全年龄</Tag>
</Inline>
</template>
vue
尺寸
sm 用于列表与表格，与正文并排时高度更协调；md 用于详情页的标题旁；lg 高 28px，与 sm 尺寸的按钮等高。
size
variant
科幻
<template>
<Tag>科幻</Tag>
</template>vue
胶囊
设置 pill 之后两端变为半圆。
默认圆角胶囊胶囊
<script setup lang="ts">
import { Inline, Tag } from '@hina-ui/vue'
</script>
<template>
<Inline align="center">
<Tag>默认圆角</Tag>
<Tag pill>胶囊</Tag>
<Tag pill variant="solid" tone="accent">胶囊</Tag>
</Inline>
</template>
vue
带图标
图标直接放入默认插槽，位于文字之前，尺寸随标签的尺寸变化。
已通过 待复核 已驳回
<script setup lang="ts">
import { Check, CircleAlert, Clock } from '@lucide/vue'
import { Inline, Tag } from '@hina-ui/vue'
</script>
<template>
<Inline align="center">
<Tag tone="success">
<Check />
已通过
</Tag>
<Tag tone="warning">
<Clock />
待复核
</Tag>
<Tag tone="danger" variant="outline">
<CircleAlert />
已驳回
</Tag>
</Inline>
</template>
vue
超长内容
标签内的文字不换行。内容可能很长时，为标签设置最大宽度，并让内部的文字截断。
很长很长的标签名称会在容器边界处截断
<script setup lang="ts">
import { Tag, Text } from '@hina-ui/vue'
</script>
<template>
<Tag class="max-w-40" tone="accent">
<Text as="span" truncate>很长很长的标签名称会在容器边界处截断</Text>
</Tag>
</template>
vue
语义标签
as 指定渲染的标签。一组标签在语义上是列表，容器用 ul，每个标签用 li。它只改变标签名，不会让标签变成可点击的控件：需要点击或删除的标签是 Chip，不是 Tag。
- 科幻
- 悬疑
- 校园
<script setup lang="ts">
import { Inline, Tag } from '@hina-ui/vue'
</script>
<template>
<Inline as="ul" gap="xs">
<Tag as="li">科幻</Tag>
<Tag as="li">悬疑</Tag>
<Tag as="li">校园</Tag>
</Inline>
</template>
vue
无障碍
- 标签本身是普通文本，不带角色，屏幕阅读器按正文朗读。
- 颜色不能作为唯一的区分方式，文字应当说明状态本身，例如“已驳回”而不只是红色。
- 标签不可聚焦，键盘操作不会停留在它上面。
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'soft' | 'solid' | 'outline' | 'soft' | 视觉样式 |
tone | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 语义色调 |
size | 'sm' | 'md' | 'lg' | 'sm' | 尺寸 |
pill | boolean | false | 是否呈胶囊形 |
as | string | 'span' | 渲染的标签 |
class | string | — | 追加至根元素的类名 |
Slots
| 插槽 | 说明 |
|---|---|
default | 标签的图标与文字 |