Badge 徽标数

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

在有新消息，讯息时，或者是app/插件/功能模块可以更新，升级时使用这个组件。

API

徽标数

代码示例

基本

简单的徽章展示。

查看源码在线预览

import { Badge } from "@icedesign/base";
ReactDOM.render(
  <Badge count={5}>
    <a href="#" className="basic-example" />
  </Badge>,
  mountNode
);

.basic-example {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eee;
}

动态

展示动态变化的效果。

查看源码在线预览

import { Badge, Button, Icon } from "@icedesign/base";
const ButtonGroup = Button.Group;
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 5,
      show: true
    };
    this.increase = this.increase.bind(this);
    this.decrease = this.decrease.bind(this);
    this.onClick = this.onClick.bind(this);
  }
  increase() {
    const count = this.state.count + 1;
    this.setState({ count });
  }
  decrease() {
    let count = this.state.count - 1;
    if (count < 0) {
      count = 0;
    }
    this.setState({ count });
  }
  onClick() {
    this.setState({
      show: !this.state.show
    });
  }
  render() {
    return (
      <div>
        <div className="change-count">
          <Badge count={this.state.count}>
            <a href="#" className="head-example" />
          </Badge>
          <ButtonGroup>
            <Button onClick={this.increase}>
              <Icon type="add" />
            </Button>
            <Button onClick={this.decrease}>
              <Icon type="subtract" />
            </Button>
          </ButtonGroup>
        </div>
        <div>
          <Badge dot={this.state.show}>
            <a href="#" className="head-example" />
          </Badge>
          <Button onClick={this.onClick}>切换红点显隐</Button>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.next-badge {
    margin-right: 16px;
}
.change-count {
    margin-bottom: 16px;
}
.head-example {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eee;
}

小红点展示在左侧

放在列表前面的小红点。

查看源码在线预览

import { Badge } from "@icedesign/base";
ReactDOM.render(
  <div>
    <ul className="next-badge-list-wrapper">
      <li>
        <Badge dot align="left">
          列表前面的小圆点
        </Badge>
      </li>
      <li>
        <Badge dot align="left">
          列表前面的小圆点
        </Badge>
      </li>
      <li>
        <Badge dot align="left">
          列表前面的小圆点
        </Badge>
      </li>
    </ul>
  </div>,
  mountNode
);

讨嫌的小红点

没有具体的数字。

查看源码在线预览

import { Badge, Icon } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Badge dot>
      <Icon type="email" />
    </Badge>
    <Badge dot>
      <a href="#">一个链接</a>
    </Badge>
  </div>,
  mountNode
);

.next-badge {
    margin-right: 16px;
}

独立使用

不包裹任何元素即独立使用，可自定样式展示。

查看源码在线预览

import { Badge } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Badge count={25} />
    <Badge
      count={4}
      style={{
        backgroundColor: "#fff",
        color: "#999",
        border: "1px solid #d9d9d9"
      }}
    />
    <Badge count={109} style={{ backgroundColor: "#87d068" }} />
  </div>,
  mountNode
);

.next-badge {
    margin-right: 16px;
}

大数字

超过overflow的数值，会显示${overflow}+，overflow默认值为99。

查看源码在线预览

import { Badge } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Badge count={100}>
      <a href="#" className="head-example" />
    </Badge>
    <Badge count={200} overflowCount={199}>
      <a href="#" className="head-example" />
    </Badge>
  </div>,
  mountNode
);

.next-badge {
    margin-right: 16px;
}
.head-example {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eee;
}

相关区块

暂无相关区块