codecamp

Element-React Badge 标记

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

基础用法

展示新消息数量。

定义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
Element-React Pagination 分页
Element-React Alert 警告
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }