Badge 徽标数
图标右上角的圆形徽标数字。
何时使用
一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。
代码演示
基本
简单的徽章展示,当 count
为 0
时,默认不显示,但是可以使用 showZero
修改为显示。
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge } from 'choerodon-ui';
ReactDOM.render(
<div>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={0} showZero>
<a href="#" className="head-example" />
</Badge>
</div>,
document.getElementById('container'));
独立使用
不包裹任何元素即是独立使用,可自定样式展现。
在右上角的 badge 则限定为红色。
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge } from 'choerodon-ui';
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: '#52c41a' }} />
</div>,
document.getElementById('container'));
封顶数字
超过 overflowCount
的会显示为 ${overflowCount}+
,默认的 overflowCount
为 99
。
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge } from 'choerodon-ui';
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>,
document.getElementById('container'));
文字提示红点
没有具体的数字。
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge, Icon } from 'choerodon-ui';
ReactDOM.render(
<div>
<Badge dot>
<Icon type="notification" />
</Badge>
<Badge count={0} dot>
<Icon type="notification" />
</Badge>
<Badge dot>
<a href="#">Link something</a>
</Badge>
</div>,
document.getElementById('container'));
可点击
用 a 标签进行包裹即可。
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge } from 'choerodon-ui';
ReactDOM.render(
<a href="#">
<Badge count={5}>
<span className="head-example" />
</Badge>
</a>,
document.getElementById('container'));
动态
展示动态变化的效果。
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge, Button, Icon, Switch } from 'choerodon-ui';
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>
状态点
用于表示状态的小圆点。
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge } from 'choerodon-ui';
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>,
document.getElementById('container'));
API
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={5} />
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
count | 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+ ,为 0 时隐藏 | number|ReactNode | |
dot | 不展示数字,只有一个小红点 | boolean | false |
offset | 设置状态点的位置偏移,格式为 [x, y] | [number, number] | - |
overflowCount | 展示封顶的数字值 | number | 99 |
showZero | 当数值为 0 时,是否展示 Badge | boolean | false |
status | 设置 Badge 为状态点 | Enum{ ‘success’, ‘processing, ‘default’, ‘error’, ‘warning’ } | ‘’ |
text | 在设置了 status 的前提下有效,设置状态点的文本 | string | ‘’ |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .