Badge 徽标数

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

无障碍

可通过添加如下class，使内容仅能被读屏软件读取，但不会展示到页面上<span className="next-sr-only">unread messages</span>

API

Badge

代码示例

基本

简单的徽章展示。

查看源码在线预览

import { Badge } from '@alifd/next';
ReactDOM.render(
    <div>
        <Badge count={5}>
            <a href="#" className="basic-example"></a>
        </Badge>
        <Badge count={5}>
            <a href="#" className="basic-example"><span className="next-sr-only">unread messages</span></a>
        </Badge>
    </div>
    , mountNode);

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

大数字

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

查看源码在线预览

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

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

讨嫌的小红点

没有具体的数字。

查看源码在线预览

import { Badge, Icon } from '@alifd/next';
ReactDOM.render(
    <div>
        <Badge dot>
            <Icon type="email" />
        </Badge>
        <Badge dot>
            <a href="#">A Link</a>
        </Badge>
    </div>, mountNode);

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

动态

展示动态变化的效果。

查看源码在线预览

import { Badge, Button, Icon } from '@alifd/next';
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"><span className="next-sr-only">unread messages</span></a>
                    </Badge>
                    <Badge count={this.state.count} showZero>
                        <a href="#" className="head-example"><span className="next-sr-only">unread messages</span></a>
                    </Badge>
                    <ButtonGroup>
                        <Button aria-label="add" onClick={this.increase}>
                            <Icon type="add"/>
                        </Button>
                        <Button aria-label="minus" onClick={this.decrease}>
                            <Icon type="minus"/>
                        </Button>
                    </ButtonGroup>
                </div>
                <div>
                    <Badge dot={this.state.show}>
                        <a href="#" className="head-example"></a>
                    </Badge>
                    <Button onClick={this.onClick}>
                        Toggle Display
                    </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: 8px;
    background: #eee;
}

自定义徽标内容

通过 content 属性可以自定义徽标的内容，自定义内容不包含任何色彩样式，完全由使用者自己定义。

查看源码在线预览

import { Badge, Icon } from '@alifd/next';
ReactDOM.render(
    <div>
        <Badge content="hot" style={{backgroundColor: '#FC0E3D', color: '#FFFFFF'}}>
            <a href="#" className="head-example"></a>
        </Badge>
        <Badge content={<Icon type="error" />} style={{backgroundColor: 'transparent', color: 'red', padding: 0}}>
            <a href="#" className="head-example"></a>
        </Badge>
    </div>, mountNode);

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

独立使用

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

查看源码在线预览

import { Badge } from '@alifd/next';
ReactDOM.render(
    <div>
        <Badge count={25} />
        <Badge count={4} style={{backgroundColor: '#fff', color: '#999', border: '1px solid #d9d9d9'}} />
        <Badge count={109} style={{backgroundColor: '#87d068'}} />
        <Badge dot />
        <Badge content="hot" style={{backgroundColor: '#FC0E3D', color: '#FFFFFF'}} />
    </div>, mountNode);

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

相关区块

暂无相关区块