Element-React Badge 标记

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

基础用法

展示新消息数量。

定义value属性,它接受Number或者String

Element-React Badge 标记

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时,它才会生效。

Element-React Badge 标记

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类型是时可以用于显示自定义文本。
Element-React Badge 标记

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

小红点

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

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

Element-React Badge 标记

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小圆点booleanfalse

作者:冒牌SEO,如若转载,请注明出处:https://www.web176.com/elementreact/19984.html

(0)
打赏 支付宝 支付宝 微信 微信
冒牌SEO冒牌SEO
上一篇 2023年5月11日
下一篇 2023年5月11日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注