如何引入
基本用法
设置显示数字最大值
设置徽标位置
设置徽标样式
独立使用
API参考
文案规范
设计变量
展示类 · Badge
徽章
用徽章来给用户提示。
API 文档
设计文档
代码演示
如何引入
import { Badge } from '@douyinfe/semi-ui';
基本用法
Badge 的基本类型为
count。如果传入 dot 则显示为小圆点，两者互斥，优先渲染小圆点。当传入是节点类型时，将直接渲染该节点。import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
import { IconLock } from '@douyinfe/semi-icons';
() => {
const style = {
width: '42px',
height: '42px',
borderRadius: '4px',
};
return (
<div>
<Badge count={5}>
<Avatar color='blue' shape='square' style={style}>BM</Avatar>
</Badge>
<br/>
<br/>
<Badge dot>
<Avatar color='blue' shape='square' style={style}>YL</Avatar>
</Badge>
<br/>
<br/>
<Badge count={<IconLock style={{ color: 'var(--semi-color-primary)' }}/>}>
<Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
</Badge>
<br/>
<br/>
<Badge count='NEW' >
<Avatar color='light-blue' shape='square' style={style}>WF</Avatar>
</Badge>
</div>
);
};
设置显示数字最大值
可以通过设置
overflowCount 值设置显示数字的最大值，当实际数值超过该值时将以 ${overflowCount}+ 的格式显示。import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
const style = {
width: '42px',
height: '42px',
borderRadius: '4px',
};
return (
<div>
<Badge count={99} >
<Avatar color='teal' shape='square' style={style}>ZH</Avatar>
</Badge>
<br/>
<br/>
<Badge count={100} >
<Avatar color='teal' shape='square' style={style}>HS</Avatar>
</Badge>
<br/>
<br/>
<Badge count={99} overflowCount={10} >
<Avatar color='green' shape='square' style={style}>DY</Avatar>
</Badge>
<br/>
<br/>
<Badge count={1000} overflowCount={999} >
<Avatar color='green' shape='square' style={style}>TT</Avatar>
</Badge>
</div>
);
};
设置徽标位置
可以通过设置
position 设置位置，支持：leftTop， leftBottom， rightTop（默认）， rightBottom。import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
const style = {
width: '42px',
height: '42px',
borderRadius: '4px',
};
return (
<div>
<Badge count='VIP' position='rightTop' type='danger'>
<Avatar color='amber' shape='square' style={style}>ZH</Avatar>
</Badge>
<br/>
<br/>
<Badge count='VIP' position='rightBottom' type='danger'>
<Avatar color='amber' shape='square' style={style}>HS</Avatar>
</Badge>
<br/>
<br/>
<Badge count='VIP' position='leftTop' type='danger'>
<Avatar color='orange' shape='square' style={style}>DY</Avatar>
</Badge>
<br/>
<br/>
<Badge count='VIP' position='leftBottom' type='danger'>
<Avatar color='orange' shape='square' style={style}>TT</Avatar>
</Badge>
</div>
);
};
设置徽标样式
可以通过设置
theme 和 type 设置徽标的样式。其中 theme 支持三种形式：solid, light, inverted。默认形式为 solid。import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
const bgStyle = {
padding: '8px',
};
const style = {
width: '42px',
height: '42px',
borderRadius: '4px',
};
return (
<div style={{ display: 'flex' }}>
<div style={bgStyle}>
<Badge count={5} theme='solid' >
<Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={5} theme='light' >
<Avatar color='indigo' shape='square' style={style}>YB</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={5} theme='inverted' >
<Avatar color='light-green' shape='square' style={style}>LX</Avatar>
</Badge>
</div>
<br/>
<div style={bgStyle}>
<Badge dot theme='solid' >
<Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='light' >
<Avatar color='lime' shape='square' style={style}>HW</Avatar>
</Badge>
</div>
<div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
<Badge dot theme='inverted' >
<Avatar color='lime' shape='square' style={style}>XM</Avatar>
</Badge>
</div>
</div>
);
};
type 支持如下类型：primary，secondary，tertiary，warning 和 danger。默认类型为 primary。import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
const bgStyle = {
padding: '8px 8px 3px 8px',
};
const style = {
width: '42px',
height: '42px',
borderRadius: '4px',
};
return (
<div style={{ display: 'flex' }}>
<div style={bgStyle}>
<Badge count={5} type='primary' >
<Avatar color='violet' shape='square' style={style}>MR</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={5} type='secondary' >
<Avatar color='violet' shape='square' style={style}>YL</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={5} type='tertiary' >
<Avatar color='red' shape='square' style={style}>ZW</Avatar>
</Badge>
</div>
<br/>
<div style={bgStyle}>
<Badge count={5} type='warning' >
<Avatar color='red' shape='square' style={style}>JL</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={5} type='danger' >
<Avatar color='pink' shape='square' style={style}>RT</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot type='primary' >
<Avatar color='pink' shape='square' style={style}>YF</Avatar>
</Badge>
</div>
</div>
);
};
独立使用
当 Badge 作为独立元素时可以单独使用。
import React from 'react';
import { Badge } from '@douyinfe/semi-ui';
() => (
<div>
<Badge count={5} />
<br/>
<br/>
<Badge count='NEW' theme='light' />
<br/>
<br/>
<Badge count={99} overflowCount={10} type='danger' />
<br/>
<br/>
<span><Badge dot type='primary' /> 进行中 processing</span>
<br/>
<span><Badge dot type='tertiary' /> 信息 info</span>
<br/>
<span><Badge dot type='success' /> 成功 success</span>
<br/>
<span><Badge dot type='warning' /> 提醒 warning</span>
<br/>
<span><Badge dot type='danger' /> 错误 error</span>
</div>
);
API参考
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 徽章的 base | ReactNode | 无 |
| className | 外侧 className | string | - |
| count | 展示的内容 | ReactNode | 无 |
| countClassName | 内容区域 className | string | 无 |
| dot | 不展示数字，显示小圆点 | boolean | false |
| overflowCount | 最大的展示数字值 | number | 无 |
| position | 徽章位置，可选 leftTop、 leftBottom、 rightTop、 rightBottom | string | rightTop |
| countStyle | 徽章内容的样式, v2.59.1后生效 | CSSProperties | 无 |
| theme | 徽章主题，可选 solid、 light、 inverted | string | solid |
| type | 徽章类型，可选 primary、 secondary、 tertiary、 danger、 warning、 success | string | primary |
文案规范
- Badge内容若为英文时，首字母应大写