Badge徽标数
图标右上角的圆形徽标数字。
何时使用#
一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。
代码演示
import { Badge } from 'antd';
ReactDOM.render(
<div>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={0} showZero>
<a href="#" className="head-example" />
</Badge>
</div>
, mountNode);
import { Badge } from 'antd';
ReactDOM.render(
<div>
<Badge count={99}>
<a href="#" className="head-example" />
</Badge>
<Badge count={100}>
<a href="#" className="head-example" />
</Badge>
<Badge count={99} overflowCount={10}>
<a href="#" className="head-example" />
</Badge>
<Badge count={1000} overflowCount={999}>
<a href="#" className="head-example" />
</Badge>
</div>
, mountNode);
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
import { Badge } from 'antd';
ReactDOM.render(
<a href="#">
<Badge count={5}>
<span className="head-example" />
</Badge>
</a>
, mountNode);
Success
Error
Default
Processing
Warning
import { Badge } from 'antd';
ReactDOM.render(
<div>
<Badge status="success" />
<Badge status="error" />
<Badge status="default" />
<Badge status="processing" />
<Badge status="warning" />
<br />
<Badge status="success" text="Success" />
<br />
<Badge status="error" text="Error" />
<br />
<Badge status="default" text="Default" />
<br />
<Badge status="processing" text="Processing" />
<br />
<Badge status="warning" text="Warning" />
</div>
, mountNode);
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
99+import { Badge } from 'antd';
ReactDOM.render(
<div>
<Badge count={25} />
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
<Badge count={109} style={{ backgroundColor: '#87d068' }} />
</div>
, mountNode);
import { Badge, Icon } from 'antd';
ReactDOM.render(
<div>
<Badge dot>
<Icon type="notification" />
</Badge>
<Badge dot>
<a href="#">Link something</a>
</Badge>
</div>
, mountNode);
import { Badge, Button, Icon, Switch } from 'antd';
const ButtonGroup = Button.Group;
class Demo extends React.Component {
state = {
count: 5,
show: true,
}
increase = () => {
const count = this.state.count + 1;
this.setState({ count });
}
decline = () => {
let count = this.state.count - 1;
if (count < 0) {
count = 0;
}
this.setState({ count });
}
onChange = (show) => {
this.setState({ show });
}
render() {
return (
<div>
<div>
<Badge count={this.state.count}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
<div style={{ marginTop: 10 }}>
<Badge dot={this.state.show}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={this.onChange} checked={this.state.show} />
</div>
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);
API#
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={5} />
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
count | 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+ ,为 0 时隐藏 | number | |
dot | 不展示数字,只有一个小红点 | boolean | false |
overflowCount | 展示封顶的数字值 | number | 99 |
showZero | 当数值为 0 时,是否展示 Badge | boolean | false |
status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
text | 在设置了 status 的前提下有效,设置状态点的文本 | string | '' |