Badge 标记

Badge 标记

出现在按钮、图标旁的数字或状态标记。

基础用法

展示新消息数量。

:::demo 定义value属性，它接受Number或者String。

render() {
  return (
    <div>
      <Badge value={ 12 }>
        <Button size="small">评论</Button>
      </Badge>
      <Badge value={ 3 }>
        <Button size="small">回复</Button>
      </Badge>
      <Dropdown trigger="click" menu={(
        <Dropdown.Menu>
          <Dropdown.Item className="clearfix">
            <span>评论</span><Badge className="mark" value={ 12 } />
          </Dropdown.Item>
          <Dropdown.Item className="clearfix">
            <span>回复</span><Badge className="mark" value={ 3 } />
          </Dropdown.Item>
        </Dropdown.Menu>
        )}
      >
        <span className="el-dropdown-link">
          点我查看<i className="el-icon-caret-bottom el-icon--right"></i>
        </span>
      </Dropdown>
    </div>
  )
}

:::

最大值

可自定义最大值。

:::demo 由max属性定义，它接受一个Number，需要注意的是，只有当value为Number时，它才会生效。

render() {
  return (
    <div>
      <Badge value={ 200 } max={ 99 }>
        <Button size="small">评论</Button>
      </Badge>
      <Badge value={ 100 } max={ 10 }>
        <Button size="small">回复</Button>
      </Badge>
    </div>
  )
}

:::

自定义内容

可以显示数字以外的文本内容。

:::demo 定义value为String类型是时可以用于显示自定义文本。

render() {
  return (
    <div>
      <Badge value={ 'new' }>
        <Button size="small">评论</Button>
      </Badge>
      <Badge value={ 'hot' }>
        <Button size="small">回复</Button>
      </Badge>
    </div>
  )
}

:::

小红点

以红点的形式标注需要关注的内容。

:::demo 除了数字外，设置isDot属性，它接受一个Boolean。

render() {
  return (
    <div>
      <Badge isDot>
        数据查询
      </Badge>
      <Badge isDot>
        <Button className="share-button" icon="share" type="primary"></Button>
      </Badge>
    </div>
  )
}

:::

Attributes