Indicator 状态点

表示状态的小圆点。

连载中

已完结

已停更

未开始

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

<template>
  <Inline gap="lg" align="center">
    <Inline gap="sm" align="center">
      <Indicator tone="success" pulse />
      <Text>连载中</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator tone="info" />
      <Text>已完结</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator tone="danger" />
      <Text>已停更</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator />
      <Text>未开始</Text>
    </Inline>
  </Inline>
</template>

vue

用法

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

圆点只有颜色，没有文字。放在文字前表示该项的状态，或者用 Badge 钉在头像的角上表示在线状态。

连载中

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

<template>
  <Inline gap="sm" align="center">
    <Indicator tone="success" />
    <Text>连载中</Text>
  </Inline>
</template>

vue

示例

色调

共六种色调，默认为 neutral。

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

<template>
  <Inline gap="lg" align="center">
    <Indicator />
    <Indicator tone="accent" />
    <Indicator tone="success" />
    <Indicator tone="warning" />
    <Indicator tone="danger" />
    <Indicator tone="info" />
  </Inline>
</template>

vue

尺寸

三档尺寸，默认为 md。

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

<template>
  <Inline gap="lg" align="center">
    <Indicator tone="accent" size="sm" />
    <Indicator tone="accent" />
    <Indicator tone="accent" size="lg" />
  </Inline>
</template>

vue

脉冲

设置 pulse 后圆点向外扩散光晕，表示正在进行的状态，例如连载中、直播中。

直播中

正在更新

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

<template>
  <Inline gap="lg" align="center">
    <Inline gap="sm" align="center">
      <Indicator tone="danger" pulse />
      <Text>直播中</Text>
    </Inline>
    <Inline gap="sm" align="center">
      <Indicator tone="accent" size="lg" pulse />
      <Text>正在更新</Text>
    </Inline>
  </Inline>
</template>

vue

朗读文字

圆点旁边没有说明状态的文字时，用 label 提供屏幕阅读器朗读的文字。

在线

星见书音

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

<template>
  <Inline gap="sm" align="center">
    <Indicator tone="success" label="在线" />
    <Text>星见书音</Text>
  </Inline>
</template>

vue

钉在头像上

用 Badge 的 bare 模式把圆点钉在头像的角上，圆点放入 content 插槽。

在线星离开

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

<template>
  <Inline gap="lg">
    <Badge content="online" bare label="在线" placement="bottom-end" shape="circle">
      <template #content>
        <Indicator tone="success" size="lg" />
      </template>
      <Avatar src="/avatars/paper.webp" alt="星见书音" />
    </Badge>
    <Badge content="away" bare label="离开" placement="bottom-end" shape="circle">
      <template #content>
        <Indicator tone="warning" size="lg" />
      </template>
      <Avatar name="星见书音" />
    </Badge>
  </Inline>
</template>

vue

行为

圆点不可交互，也不随宿主的状态变化。
系统开启减弱动态效果时，pulse 的光晕不显示。

API

Props

属性	类型	默认值	说明
`tone`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	色调
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`pulse`	`boolean`	`false`	是否向外扩散光晕
`label`	`string`	—	屏幕阅读器朗读的文字
`as`	`string`	`'span'`	渲染的标签
`class`	`string`	—	追加至根元素的类名

用法

示例

色调

尺寸

脉冲

朗读文字

钉在头像上

行为

无障碍

API

Props