Element-React Badge 標記

出現(xiàn)在按鈕、圖標旁的數(shù)字或狀態(tài)標記。

基礎(chǔ)用法

展示新消息數(shù)量。

定義value屬性，它接受Number或者String。

render() {
  return (
    <div>
      <Badge value={ 12 }>
        <Button size="small">評論</Button>
      </Badge>
      <Badge value={ 3 }>
        <Button size="small">回復(fù)</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>回復(fù)</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，需要注意的是，只有當(dāng)value為Number時，它才會生效。

render() {
  return (
    <div>
      <Badge value={ 200 } max={ 99 }>
        <Button size="small">評論</Button>
      </Badge>
      <Badge value={ 100 } max={ 10 }>
        <Button size="small">回復(fù)</Button>
      </Badge>
    </div>
  )
}

自定義內(nèi)容

可以顯示數(shù)字以外的文本內(nèi)容。

定義value為String類型是時可以用于顯示自定義文本。

render() {
  return (
    <div>
      <Badge value={ 'new' }>
        <Button size="small">評論</Button>
      </Badge>
      <Badge value={ 'hot' }>
        <Button size="small">回復(fù)</Button>
      </Badge>
    </div>
  )
}

小紅點

以紅點的形式標注需要關(guān)注的內(nèi)容。

除了數(shù)字外，設(shè)置isDot屬性，它接受一個Boolean。

render() {
  return (
    <div>
      <Badge isDot>
        數(shù)據(jù)查詢
      </Badge>
      <Badge isDot>
        <Button className="share-button" icon="share" type="primary"></Button>
      </Badge>
    </div>
  )
}

Attributes