Element-React Badge 标记

2020-10-17 10:18 更新

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

基础用法

展示新消息数量。

定义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>
  )
}

最大值

可自定义最大值。

max属性定义,它接受一个Number,需要注意的是,只有当valueNumber时,它才会生效。

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

自定义内容

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

定义valueString类型是时可以用于显示自定义文本。

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

小红点

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

除了数字外,设置isDot属性,它接受一个Boolean

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

Attributes

参数 说明 类型 可选值 默认值
value 显示值 string, number
max 最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型 number
isDot 小圆点 boolean false
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号