Badge 徽标数

定义／Definition

图标右上角的圆形徽标数字。一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

规则 / Rule

  • 展示的数字，根据业务需求设定最大值，例如：大于 99 时展示封顶数字值为 99+。

  • 展示数字为0时，徽标数隐藏。

  • 中间元素可以是数字／字母／汉字，保证两边到边框距离为8px。

代码演示

基本

简单的徽章展示。 

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

讨嫌的小红点

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

  1. import { Badge } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div className="badge-container" style={{ padding: '40px 16px' }}>
  5.     <Badge dot>
  6.       <a href="#">一个链接</a>
  7.     </Badge>
  9.     <Badge dot size="large">
  10.       <span className="head-example"></span>
  11.     </Badge>
  12.   </div>
  13. , mountNode);
  1. .am-badge {
  2.   margin-right: 8px;
  3. }

角标

像丝带一样的角标 

  1. import { Badge } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div className="badge-container" style={{ padding: '40px 16px' }}>
  5.     <Badge text={'new'} corner>
  6.       <span className="head-example"></span>
  7.     </Badge>
  8.     <Badge text={'限时优惠'} corner size="large">
  9.       <span className="head-example head-example-l"></span>
  10.     </Badge>
  11.   </div>
  12. , mountNode);
  1. .head-example {
  2.   width: 52px;
  3.   height: 52px;
  4.   background: rgba(255, 140, 101, 0.15);
  5.   display: inline-block;
  6. }
  7. .am-badge {
  8.   margin-right: 8px;
  9. }
  10. .head-example-l {
  11.   width: 72px;
  12.   height: 72px;
  13. }

大数字

数字大于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"></span>    </Badge>    <Badge text={108}>      <span className="head-example"></span>    </Badge>  </div>, mountNode);
  1. .am-badge {  margin-right: 8px;}

综合示例

结合列表的案例参考 

  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: 8 }} />
  11.           </List.Item>
  12.           <List.Item extra="内容内容" arrow="horizontal">
  13.             文本内容<Badge text={'new'} style={{ marginLeft: 8 }} />
  14.           </List.Item>
  15.           <List.Item extra="内容内容" arrow="horizontal">
  16.             文本内容<Badge text={4} style={{ marginLeft: 8 }} />
  17.           </List.Item>
  18.           <List.Item extra="内容内容" arrow="horizontal">
  19.             文本内容<Badge text={100} style={{ marginLeft: 8 }} />
  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.             <div style={{ padding: '4px 0' }}>
  28.               <Badge dot>
  29.                 <span style={{ width: 28, height: 28, background: 'rgba(255, 140, 101, 0.15)', display: 'inline-block' }}></span>
  30.               </Badge>小圆点
  31.             </div>
  32.           </List.Item>
  33.           <List.Item thumb="https://os.alipayobjects.com/rmsportal/JteFDJaPwHuwXgs.jpg" extra={<Badge text={77} />} arrow="horizontal">
  34.             右侧内容
  35.           </List.Item>
  36.           <List.Item thumb="https://os.alipayobjects.com/rmsportal/JteFDJaPwHuwXgs.jpg">
  37.             内容内容
  38.           </List.Item>
  39.         </List.Body>
  40.       </List>
  41.       <List>
  42.         <List.Body>
  43.           <List.Item extra="内容内容" arrow="horizontal">
  44.             <div style={{ padding: '4px 0' }}>
  45.               <Badge text={'new'} corner>
  46.                 <span style={{ width: 52, height: 52, background: 'rgba(255, 140, 101, 0.15)', display: 'inline-block' }}></span>
  47.               </Badge>有角标
  48.             </div>
  49.           </List.Item>
  50.           <List.Item extra="内容内容" arrow="horizontal">
  51.             <div style={{ padding: '10px 0' }}>
  52.               <Badge text={9}>
  53.                 <span style={{ width: 52, height: 52, background: 'rgba(255, 140, 101, 0.15)', display: 'inline-block' }}></span>
  54.               </Badge>数字
  55.             </div>
  56.           </List.Item>
  57.           <List.Item extra="内容内容" arrow="horizontal">
  58.             <div style={{ padding: '10px 0' }}>
  59.               <Badge text={108}>
  60.                 <span style={{ width: 52, height: 52, background: 'rgba(255, 140, 101, 0.15)', display: 'inline-block' }}></span>
  61.               </Badge>超出99
  62.             </div>
  63.           </List.Item>
  64.         </List.Body>
  65.       </List>
  66.       <List>
  67.         <List.Body>
  68.           <List.Item extra="内容内容" arrow="horizontal">
  69.             <div style={{ padding: '4px 0' }}>
  70.               <Badge text={'限时优惠'} corner size="large">
  71.                 <span style={{ width: 72, height: 72, background: 'rgba(255, 140, 101, 0.15)', display: 'inline-block' }}></span>
  72.               </Badge>角标
  73.             </div>
  74.           </List.Item>
  75.         </List.Body>
  76.       </List>
  77.     </form>
  78.   </div>
  79. , mountNode);
  1. .am-badge {
  2.   margin-right: 8px;
  3. }

Badge徽标数 - 图1

API

成员说明类型默认值
text展示的数字或文案，当为数字时候，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏String|Number-
dot不展示数字，只有一个小红点Booleanfalse
corner展示位角标样式Booleanfalse
overflowCount展示封顶的数字值Number99
size红点及角标状态下可选默认(null)或者大号(large)String-