Status 状态指示器

显示在线、离线、错误等状态的小指示点。

导入

import { Status } from 'asterui'

示例

基础

不同状态的简单状态指示器。

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md">
        <Status type="success" />
        <Status type="warning" />
        <Status type="error" />
        <Status type="info" />
      </Space>
    )
}

export default App

尺寸

可用的尺寸变体。

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md" align="center">
        <Status type="primary" size="xs" />
        <Status type="primary" size="sm" />
        <Status type="primary" size="md" />
        <Status type="primary" size="lg" />
        <Status type="primary" size="xl" />
      </Space>
    )
}

export default App

动画

Ping 和弹跳动画效果。

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="lg" align="center">
        <Status type="error" ping />
        <Status type="success" ping />
        <Status type="info" bounce />
      </Space>
    )
}

export default App

所有颜色

所有可用的颜色类型。

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md">
        <Status type="neutral" />
        <Status type="primary" />
        <Status type="secondary" />
        <Status type="accent" />
        <Status type="info" />
        <Status type="success" />
        <Status type="warning" />
        <Status type="error" />
      </Space>
    )
}

export default App

API

属性	描述	类型	默认值
type	状态颜色类型	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	'neutral'
size	状态大小	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
ping	Ping 动画效果	boolean	false
bounce	弹跳动画效果	boolean	false
label	可访问性标签	string	-
className	额外的 CSS 类	string	-

可访问性

• 使用 label 属性提供可访问的名称
• 考虑将其与文本配对以供屏幕阅读器用户使用
• Ping 动画吸引人们对重要状态更改的注意