Badge 徽标数

图标右上角的红点、数字或者文字。用于告知用户,该区域的状态变化或者待处理任务的数量。

规则

  • 当用户只需知道大致有内容更新时,应该使用红点型,如:社交中的群消息通知。

  • 当用户有必要知晓每条更新时,应该使用数字型。如:社交中的一对一的消息通知。

代码演示

基本

结合列表的案例参考。

  1. import { List, Badge } from 'antd-mobile';
  2. const BadgeDemo = () => (
  3. <List>
  4. <List.Item extra="extra content" arrow="horizontal">
  5. <Badge dot>
  6. <span style={{ width: '26px', height: '26px', background: '#ddd', display: 'inline-block' }} />
  7. </Badge>
  8. <span style={{ marginLeft: 12 }}>Dot badge</span>
  9. </List.Item>
  10. <List.Item
  11. thumb="https://zos.alipayobjects.com/rmsportal/faMhXAxhCzLvveJ.png"
  12. extra={<Badge text={77} overflowCount={55} />}
  13. arrow="horizontal"
  14. >
  15. Content
  16. </List.Item>
  17. <List.Item><Badge text={'促'} corner>
  18. <div className="corner-badge">Use corner prop</div>
  19. </Badge></List.Item>
  20. <List.Item className="special-badge" extra={<Badge text={'促'} />}>
  21. Custom corner
  22. </List.Item>
  23. <List.Item extra="extra" arrow="horizontal">
  24. <Badge text={0} style={{ marginLeft: 12 }}>Text number 0</Badge>
  25. <Badge text={'new'} style={{ marginLeft: 12 }} />
  26. </List.Item>
  27. <List.Item>
  28. Marketing:
  29. <Badge text="减" hot style={{ marginLeft: 12 }} />
  30. <Badge text="惠" hot style={{ marginLeft: 12 }} />
  31. <Badge text="免" hot style={{ marginLeft: 12 }} />
  32. <Badge text="反" hot style={{ marginLeft: 12 }} />
  33. <Badge text="HOT" hot style={{ marginLeft: 12 }} />
  34. </List.Item>
  35. <List.Item>
  36. Customize
  37. <Badge text="券" style={{ marginLeft: 12, padding: '0 3px', backgroundColor: '#f19736', borderRadius: 2 }} />
  38. <Badge text="NEW" style={{ marginLeft: 12, padding: '0 3px', backgroundColor: '#21b68a', borderRadius: 2 }} />
  39. <Badge text="自动缴费"
  40. style={{
  41. marginLeft: 12,
  42. padding: '0 3px',
  43. backgroundColor: '#fff',
  44. borderRadius: 2,
  45. color: '#f19736',
  46. border: '1px solid #f19736',
  47. }}
  48. />
  49. </List.Item>
  50. </List>
  51. );
  52. ReactDOM.render(<BadgeDemo />, mountNode);
  1. .corner-badge {
  2. height: 50px;
  3. width: 200px;
  4. }
  5. .special-badge .am-list-line {
  6. padding-right: 0;
  7. }
  8. .special-badge .am-list-line .am-list-extra {
  9. padding: 0;
  10. height: 44px;
  11. }
  12. .special-badge .am-badge {
  13. transform: rotate(45deg);
  14. transform-origin: right bottom;
  15. right: 0;
  16. top: 13px;
  17. width: 50px;
  18. }
  19. .special-badge .am-badge-text {
  20. border-radius: 1px;
  21. }

Badge徽标数 - 图1

API

属性说明类型默认值
size大小,可选 largesmallstringsmall
text展示的数字或文案,当为数字时候,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时隐藏string|number-
corner置于角落booleanfalse
dot不展示数字,只有一个小红点booleanfalse
overflowCount展示封顶的数字值number99
hot营销样式booleanfalse