Indicator 状态点

表示状态的小圆点。

连载中

已完结

已停更

未开始

import { Indicator, Inline, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <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>
  )
}

tsx

用法

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

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

连载中

import { Indicator, Inline, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="sm" align="center">
      <Indicator tone="success" />
      <Text>连载中</Text>
    </Inline>
  )
}

tsx

示例

色调

共六种色调，默认为 neutral。

import { Indicator, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="lg" align="center">
      <Indicator />
      <Indicator tone="accent" />
      <Indicator tone="success" />
      <Indicator tone="warning" />
      <Indicator tone="danger" />
      <Indicator tone="info" />
    </Inline>
  )
}

tsx

尺寸

三档尺寸，默认为 md。

import { Indicator, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="lg" align="center">
      <Indicator tone="accent" size="sm" />
      <Indicator tone="accent" />
      <Indicator tone="accent" size="lg" />
    </Inline>
  )
}

tsx

脉冲

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

直播中

正在更新

import { Indicator, Inline, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <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>
  )
}

tsx

朗读文字

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

在线

星见书音

import { Indicator, Inline, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="sm" align="center">
      <Indicator tone="success" label="在线" />
      <Text>星见书音</Text>
    </Inline>
  )
}

tsx

钉在头像上

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

在线星离开

import { Avatar, Badge, Indicator, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="lg">
      <Badge
        content={<Indicator tone="success" size="lg" />}
        bare
        label="在线"
        placement="bottom-end"
        shape="circle"
      >
        <Avatar src="/avatars/paper.webp" alt="星见书音" />
      </Badge>
      <Badge
        content={<Indicator tone="warning" size="lg" />}
        bare
        label="离开"
        placement="bottom-end"
        shape="circle"
      >
        <Avatar name="星见书音" />
      </Badge>
    </Inline>
  )
}

tsx

行为

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

API

Props

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

用法

示例

色调

尺寸

脉冲

朗读文字

钉在头像上

行为

无障碍

API

Props