Chip 可选标签

可选中或者可移除的条目。

<script setup lang="ts">
  import { ref } from 'vue'
  import { Chip, Inline } from '@hina-ui/vue'

  const genres = ['科幻', '奇幻', '日常', '悬疑', '恋爱']
  const picked = ref(['科幻', '日常'])

  function toggle(genre: string, on: boolean) {
    picked.value = on ? [...picked.value, genre] : picked.value.filter(item => item !== genre)
  }
</script>

<template>
  <Inline>
    <Chip
      v-for="genre in genres"
      :key="genre"
      selectable
      :selected="picked.includes(genre)"
      @update:selected="toggle(genre, $event)"
    >
      {{ genre }}
    </Chip>
  </Inline>
</template>

vue

用法

import { Chip } from '@hina-ui/vue'

条目有两种用法：selectable 使条目可以选中，removable 为条目添加移除按钮，两者只能取其一。不需要交互的短标注使用 Tag。

科幻

<script setup lang="ts">
  import { ref } from 'vue'
  import { Chip, Inline } from '@hina-ui/vue'

  const finished = ref(true)
  const kept = ref(true)
</script>

<template>
  <Inline>
    <Chip v-model:selected="finished" selectable>已完结</Chip>
    <Chip v-if="kept" removable @remove="kept = false">科幻</Chip>
  </Inline>
</template>

vue

示例

可选中

设置 selectable 后条目渲染为按钮，v-model:selected 绑定选中状态。选中的条目使用强调色，并在文字前显示勾选图标。

<script setup lang="ts">
  import { ref } from 'vue'
  import { Chip, Inline } from '@hina-ui/vue'

  const finished = ref(true)
  const translated = ref(false)
</script>

<template>
  <Inline>
    <Chip v-model:selected="finished" selectable>已完结</Chip>
    <Chip v-model:selected="translated" selectable>有汉化</Chip>
  </Inline>
</template>

vue

可移除

设置 removable 后条目末尾显示移除按钮，点击时触发 remove 事件，条目本身不可点击。

科幻校园恋爱群像

<script setup lang="ts">
  import { ref } from 'vue'
  import { Chip, Inline } from '@hina-ui/vue'

  const tags = ref(['科幻', '校园', '恋爱', '群像'])
</script>

<template>
  <Inline>
    <Chip
      v-for="tag in tags"
      :key="tag"
      removable
      @remove="tags = tags.filter(item => item !== tag)"
    >
      {{ tag }}
    </Chip>
  </Inline>
</template>

vue

变体与色调

soft 带浅色底，outline 只有边框，默认为 soft。色调有 neutral 与 accent 两种，默认为 neutral。

<script setup lang="ts">
  import { Chip, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Chip selectable>soft</Chip>
    <Chip selectable tone="accent">soft accent</Chip>
    <Chip selectable variant="outline">outline</Chip>
    <Chip selectable variant="outline" tone="accent">outline accent</Chip>
  </Inline>
</template>

vue

尺寸

md 与小号按钮同高，sm 用于输入框内与密集的列表。

小号中号

<script setup lang="ts">
  import { Chip, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <Chip size="sm" selectable selected>小号</Chip>
    <Chip size="sm" removable>小号</Chip>
    <Chip selectable selected>中号</Chip>
    <Chip removable>中号</Chip>
  </Inline>
</template>

vue

带图标

图标放入 icon 插槽。可选中的条目选中后，图标的位置改为显示勾选图标。

<script setup lang="ts">
  import { ref } from 'vue'
  import { Chip, Inline } from '@hina-ui/vue'
  import { Flame, Star } from '@lucide/vue'

  const hot = ref(true)
  const starred = ref(false)
</script>

<template>
  <Inline>
    <Chip v-model:selected="hot" selectable>
      <template #icon><Flame /></template>
      热门
    </Chip>
    <Chip v-model:selected="starred" selectable>
      <template #icon><Star /></template>
      收藏
    </Chip>
    <Chip removable>
      <template #icon><Star /></template>
      收藏
    </Chip>
  </Inline>
</template>

vue

禁用

disabled 的条目不响应点击，移除按钮也一并禁用。

不可移除

<script setup lang="ts">
  import { Chip, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Chip selectable disabled>未选中</Chip>
    <Chip selectable selected disabled>已选中</Chip>
    <Chip removable disabled>不可移除</Chip>
  </Inline>
</template>

vue

作为链接

as 设为 a 并给出 href，条目成为链接，带悬停与按下反馈。接入应用路由时，可通过 RouterLink 或 NuxtLink 的 custom 插槽传入 href 与 navigate，保留链接语义并使用 SPA 导航。

科幻校园恋爱

<script setup lang="ts">
  import { Chip, Inline } from '@hina-ui/vue'

  const localePath = useLocalePath()
</script>

<template>
  <NuxtLink v-slot="{ href, navigate }" :to="localePath('/components/tag')" custom>
    <Inline>
      <Chip as="a" :href="href" @click="navigate">科幻</Chip>
      <Chip as="a" :href="href" @click="navigate">校园</Chip>
      <Chip as="a" :href="href" variant="outline" @click="navigate">恋爱</Chip>
    </Inline>
  </NuxtLink>
</template>

vue

行为

可选中的条目是原生按钮，点击、回车键与空格键都可以切换选中状态。
选中后文字前显示勾选图标；带 icon 插槽时，图标改为显示勾选图标。
移除按钮聚焦时，回车键、空格键、退格键与删除键都会触发 remove；点击移除按钮不会触发条目的点击。
selectable 与 removable 同时设置时，开发环境输出警告并忽略 removable。
禁用的条目不响应点击，也不进入键盘焦点序列。

API

Props

属性	类型	默认值	说明
`selectable`	`boolean`	`false`	是否可以选中
`selected`	`boolean`	`false`	选中状态，支持 `v-model:selected`
`removable`	`boolean`	`false`	是否显示移除按钮
`variant`	`'soft' \| 'outline'`	`'soft'`	视觉样式
`tone`	`'neutral' \| 'accent'`	`'neutral'`	色调
`size`	`'sm' \| 'md'`	`'md'`	尺寸
`disabled`	`boolean`	`false`	是否禁用
`ripple`	`boolean`	`true`	按下时是否显示波纹
`as`	`string`	—	渲染的标签，可选中时默认为 `button`，否则为 `span`
`class`	`string`	—	追加至根元素的类名

Events

事件	参数	说明
`update:selected`	`selected: boolean`	选中状态变化
`remove`	—	点击了移除按钮

Slots

插槽	说明
`default`	条目的文字
`icon`	文字前的图标

用法

示例

可选中

可移除

变体与色调

尺寸

带图标

禁用

作为链接

行为

无障碍

API

Props

Events

Slots