Badge 提示框

使用场景

展示标记信息，状态标签等等

示例

基本用法

99普通标签

inline

() => ( <Group> <Badge shape="pill">99</Badge> <Badge shape="dot" /> <Badge shape="badge">普通标签</Badge> </Group> )

() => (
  <Group>
    <Badge shape="pill">99</Badge>
    <Badge shape="dot" />
    <Badge shape="badge">普通标签</Badge>
  </Group>
)

状态标签

普通成功错误警告

inline

() => ( <Group> <Badge status="normal">普通</Badge> <Badge status="success">成功</Badge> <Badge status="error">错误</Badge> <Badge status="warning">警告</Badge> </Group> )

() => (
  <Group>
    <Badge status="normal">普通</Badge>
    <Badge status="success">成功</Badge>
    <Badge status="error">错误</Badge>
    <Badge status="warning">警告</Badge>
  </Group>
)

自定义标签

#BADA55#FFA500#0000FF

inline

() => ( <Group> <Badge bg="#BADA55" color="#FFF"> #BADA55 </Badge> <Badge bg="#FFA500" color="#FFF"> #FFA500 </Badge> <Badge bg="#0000FF" color="#FFF"> #0000FF </Badge> </Group> )

() => (
  <Group>
    <Badge bg="#BADA55" color="#FFF">
      #BADA55
    </Badge>
    <Badge bg="#FFA500" color="#FFF">
      #FFA500
    </Badge>
    <Badge bg="#0000FF" color="#FFF">
      #0000FF
    </Badge>
  </Group>
)

数字标签

199129

inline

() => ( <Group> <Badge shape="pill">1</Badge> <Badge shape="pill">99</Badge> <Badge shape="pill">129</Badge> </Group> )

() => (
  <Group>
    <Badge shape="pill">1</Badge>
    <Badge shape="pill">99</Badge>
    <Badge shape="pill">129</Badge>
  </Group>
)

右上角

99+

inline

() => ( <Box display="inline-block" position="relative"> <Box display="inline-block" size="40px" borderRadius="2px" bg="#333" /> <Badge shape="pill" style={{ verticalAlign: 'top' }}> 99+ </Badge> </Box> )

() => (
  <Box display="inline-block" position="relative">
    <Box display="inline-block" size="40px" borderRadius="2px" bg="#333" />
    <Badge shape="pill" style={{ verticalAlign: 'top' }}>
      99+
    </Badge>
  </Box>
)

API

字段	描述
shape	"pill" | "dot" | "badge" 外观
status	BadgeStatusType 状态
color	Color 文字颜色
bg	Color 背景色
className	string
style	CSSProperties