跳转到内容
AsterUI v0.12.76

Badge 徽标

通知徽标、状态指示器和用于突出显示内容的缎带。

引入

Section titled “引入”
import { Badge } from 'asterui'

示例

Section titled “示例”

基本通知徽标

在元素上显示计数徽标。

5
99
 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge count={5}>
          <Button>Messages</Button>
        </Badge>
        <Badge count={99}>
          <Button color="secondary">Notifications</Button>
        </Badge>
        <Badge count={0}>
          <Button color="accent">No Count</Button>
        </Badge>
      </Space>
    )
}

export default App

溢出计数

超过溢出阈值时显示计数+。

99
U
99+
U
999+
U
 
import { Badge, Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" align="center" wrap>
        <Badge count={99}>
          <Avatar size="lg">U</Avatar>
        </Badge>
        <Badge count={100} overflowCount={99}>
          <Avatar size="lg">U</Avatar>
        </Badge>
        <Badge count={1000} overflowCount={999}>
          <Avatar size="lg">U</Avatar>
        </Badge>
      </Space>
    )
}

export default App

徽标位置

将徽标放置在 9 个角的任意位置。

5
TL
5
TC
5
TR
5
BL
5
BR
 
import { Badge, Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge count={5} position="top-start">
          <Avatar size="lg">TL</Avatar>
        </Badge>
        <Badge count={5} position="top-center">
          <Avatar size="lg">TC</Avatar>
        </Badge>
        <Badge count={5} position="top-end">
          <Avatar size="lg">TR</Avatar>
        </Badge>
        <Badge count={5} position="bottom-start">
          <Avatar size="lg">BL</Avatar>
        </Badge>
        <Badge count={5} position="bottom-end">
          <Avatar size="lg">BR</Avatar>
        </Badge>
      </Space>
    )
}

export default App

徽标偏移

使用像素偏移微调徽标位置。

5
Default
5
Offset
5
Down
 
import { Badge, Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg">
        <Badge count={5}>
          <Avatar size="lg">Default</Avatar>
        </Badge>
        <Badge count={5} offset={[-5, 5]}>
          <Avatar size="lg">Offset</Avatar>
        </Badge>
        <Badge count={5} offset={[0, 10]}>
          <Avatar size="lg">Down</Avatar>
        </Badge>
      </Space>
    )
}

export default App

状态徽标

带可选文本标签的状态指示器。

SuccessProcessingErrorWarningDefault
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Badge status="success" text="Success" />
        <Badge status="processing" text="Processing" />
        <Badge status="error" text="Error" />
        <Badge status="warning" text="Warning" />
        <Badge status="default" text="Default" />
      </Space>
    )
}

export default App

缎带徽标

使用 Badge.Ribbon 的装饰性缎带样式徽标。

Premium Plan

Best value for teams
Recommended

Pro Plan

For professionals
New
 
import { Badge, Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge.Ribbon text="Recommended">
          <Card title="Premium Plan" variant="border" className="w-48">
            Best value for teams
          </Card>
        </Badge.Ribbon>
        <Badge.Ribbon text="New" placement="start">
          <Card title="Pro Plan" variant="border" className="w-48">
            For professionals
          </Card>
        </Badge.Ribbon>
      </Space>
    )
}

export default App

缎带颜色

缎带支持不同的颜色类型和自定义颜色。

Primary Ribbon

Card content
Primary

Success Ribbon

Card content
Success

Custom Color

Card content
Custom
 
import { Badge, Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <Badge.Ribbon text="Primary" type="primary">
          <Card title="Primary Ribbon" variant="border" className="w-48">Card content</Card>
        </Badge.Ribbon>
        <Badge.Ribbon text="Success" type="success">
          <Card title="Success Ribbon" variant="border" className="w-48">Card content</Card>
        </Badge.Ribbon>
        <Badge.Ribbon text="Custom" color="#722ed1">
          <Card title="Custom Color" variant="border" className="w-48">Card content</Card>
        </Badge.Ribbon>
      </Space>
    )
}

export default App

点徽标

用于在线状态或状态的小圆形指示器。

 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <Badge dot type="error">
          <Button>Notifications</Button>
        </Badge>
        <Badge dot type="success">
          <Button variant="ghost">Online</Button>
        </Badge>
        <Badge dot type="warning">
          <Button color="secondary">Pending</Button>
        </Badge>
      </Space>
    )
}

export default App

徽标颜色

不同颜色的独立计数徽标。

55555555
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Badge count={5} />
        <Badge count={5} type="primary" />
        <Badge count={5} type="secondary" />
        <Badge count={5} type="accent" />
        <Badge count={5} type="info" />
        <Badge count={5} type="success" />
        <Badge count={5} type="warning" />
        <Badge count={5} type="error" />
      </Space>
    )
}

export default App

自定义颜色

使用 color 属性设置自定义徽标颜色。

5
5
5
5
 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md">
        <Badge count={5} color="#722ed1">
          <Button>Purple</Button>
        </Badge>
        <Badge count={5} color="#eb2f96">
          <Button>Magenta</Button>
        </Badge>
        <Badge count={5} color="#52c41a">
          <Button>Green</Button>
        </Badge>
        <Badge count={5} color="#faad14">
          <Button>Gold</Button>
        </Badge>
      </Space>
    )
}

export default App

徽标尺寸

徽标有五种可用尺寸。

55555
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" align="center">
        <Badge count={5} type="primary" size="xs" />
        <Badge count={5} type="primary" size="sm" />
        <Badge count={5} type="primary" size="md" />
        <Badge count={5} type="primary" size="lg" />
        <Badge count={5} type="primary" size="xl" />
      </Space>
    )
}

export default App

显示零

即使计数为 0 也显示徽标。

0
 
import { Badge, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg">
        <Badge count={0} showZero>
          <Button>Messages</Button>
        </Badge>
        <Badge count={0}>
          <Button color="secondary">Hidden Zero</Button>
        </Badge>
      </Space>
    )
}

export default App

徽标变体

徽标的不同视觉样式。

555
555
555
555
555
 
import { Badge, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="solid" />
          <Badge count={5} type="secondary" variant="solid" />
          <Badge count={5} type="accent" variant="solid" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="outline" />
          <Badge count={5} type="secondary" variant="outline" />
          <Badge count={5} type="accent" variant="outline" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="soft" />
          <Badge count={5} type="secondary" variant="soft" />
          <Badge count={5} type="accent" variant="soft" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="dash" />
          <Badge count={5} type="secondary" variant="dash" />
          <Badge count={5} type="accent" variant="dash" />
        </Space>
        <Space direction="horizontal" size="sm" wrap>
          <Badge count={5} type="primary" variant="ghost" />
          <Badge count={5} type="secondary" variant="ghost" />
          <Badge count={5} type="accent" variant="ghost" />
        </Space>
      </Space>
    )
}

export default App

API

Section titled “API”

Badge

Section titled “Badge”
属性描述类型默认值
count在徽标中显示的数字number-
showZero计数为 0 时是否显示徽标booleanfalse
overflowCount显示计数+ 前的最大计数number99
position包裹子元素时徽标的位置'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''top-end'
offset距离默认位置的像素偏移 [x, y][number, number]-
status带彩色点的状态徽标模式'success' | 'processing' | 'error' | 'default' | 'warning'-
text与状态徽标一起显示的文本string-
dot显示小圆点而不是计数booleanfalse
type徽标颜色类型'default' | 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error''error'
size徽标大小'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
variant徽标样式变体'solid' | 'outline' | 'dash' | 'soft' | 'ghost''solid'
color自定义背景颜色string-
children要用徽标包裹的元素（通知模式）ReactNode-

Badge.Ribbon

Section titled “Badge.Ribbon”
属性描述类型默认值
text缎带文本内容string必填
placement缎带位置'start' | 'end''end'
type缎带颜色类型与 Badge type 相同'primary'
color自定义背景颜色string-
children要用缎带包裹的元素ReactNode必填

无障碍

Section titled “无障碍”
  • 状态徽标使用 role="status"
  • 为屏幕阅读器提供带计数或通知状态的 aria-label
  • 处理中状态包含视觉脉冲动画