Badge 徽标数

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

规则

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

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

代码演示

基本

简单的徽章展示。 

  1. import { Badge } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div className="badge-container" style={{ padding: '40px 16px' }}>
  5.     <Badge text={9}>
  6.       <span className="head-example" />
  7.     </Badge>
  8.     <p style={{ marginBottom: 20 }} />
  9.     <Badge text={'new'}>
  10.       <span className="head-example" />
  11.     </Badge>
  13.   </div>
  14. , mountNode);

小红点

只有个小红点，没有具体数字 

  1. import { Badge } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div className="badge-container" style={{ padding: '40px 16px' }}>
  5.     <Badge dot>
  6.       <span className="dot-example" />
  7.     </Badge>
  8.   </div>
  9. , mountNode);
  1. .dot-example {
  2.   width: 0.56rem;
  3.   height: 0.56rem;
  4.   background: #ddd;
  5.   display: inline-block;
  6. }

大数字

数字大于99，会显示 99+
  1. import { Badge } from 'antd-mobile';ReactDOM.render(  <div className="badge-container" style={{ padding: '40px 16px' }}>    <Badge text={99}>      <span className="head-example" />    </Badge>    <p style={{ marginBottom: 20 }} />    <Badge text={108}>      <span className="head-example" />    </Badge>  </div>, mountNode);

综合示例

结合列表的案例参考 

  1. import { List, Badge } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div className="badge-container">
  5.     <form>
  6.       <List>
  7.         <List.Header>列表</List.Header>
  8.         <List.Body>
  9.           <List.Item extra="内容内容">
  10.             文本内容<Badge dot style={{ marginLeft: 12 }} />
  11.           </List.Item>
  12.           <List.Item extra="内容内容" arrow="horizontal">
  13.             文本内容<Badge text={'new'} style={{ marginLeft: 12 }} />
  14.           </List.Item>
  15.           <List.Item extra="内容内容" arrow="horizontal">
  16.             文本内容<Badge text={4} style={{ marginLeft: 12 }} />
  17.           </List.Item>
  18.           <List.Item extra="内容内容" arrow="horizontal">
  19.             文本内容<Badge text={100} style={{ marginLeft: 12 }} />
  20.           </List.Item>
  21.         </List.Body>
  22.       </List>
  23.       <List>
  24.         <List.Header>带icon</List.Header>
  25.         <List.Body>
  26.           <List.Item extra="内容内容" arrow="horizontal">
  27.             <Badge dot>
  28.               <span style={{ width: '0.52rem', height: '0.52rem', background: '#ddd', display: 'inline-block' }} />
  29.             </Badge>
  30.             <span style={{ marginLeft: 12 }}>小圆点</span>
  31.           </List.Item>
  32.           <List.Item
  33.             thumb="https://zos.alipayobjects.com/rmsportal/faMhXAxhCzLvveJ.png"
  34.             extra={<Badge text={77} />}
  35.             arrow="horizontal"
  36.           >
  37.             右侧内容
  38.           </List.Item>
  39.         </List.Body>
  40.       </List>
  41.       <List>
  42.         <List.Header>大号icon</List.Header>
  43.         <List.Body>
  44.           <List.Item extra="内容内容" arrow="horizontal">
  45.             <Badge text={9}>
  46.               <span style={{ width: '1.04rem', height: '1.04rem', background: '#ddd', display: 'inline-block' }} />
  47.             </Badge>
  48.             <span style={{ marginLeft: 12 }}>数字</span>
  49.           </List.Item>
  50.           <List.Item extra="内容内容" arrow="horizontal">
  51.             <Badge text={108}>
  52.               <span style={{ width: '1.04rem', height: '1.04rem', background: '#ddd', display: 'inline-block' }} />
  53.             </Badge>
  54.             <span style={{ marginLeft: 12 }}>超出99</span>
  55.           </List.Item>
  56.         </List.Body>
  57.       </List>
  58.     </form>
  59.   </div>
  60. , mountNode);
  1. .head-example {
  2.   width: 1.04rem;
  3.   height: 1.04rem;
  4.   background: #ddd;
  5.   display: inline-block;
  6. }

Badge徽标数 - 图1

API

成员说明类型默认值
text展示的数字或文案，当为数字时候，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏String|Number-
dot不展示数字，只有一个小红点Booleanfalse
overflowCount展示封顶的数字值Number99