- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
图标右上角的圆形徽标数字。
一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
<Space size="middle">
<Badge count={5}>
<Avatar shape="square" size="large" />
</Badge>
<Badge count={0} showZero>
<Avatar shape="square" size="large" />
</Badge>
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
<Avatar shape="square" size="large" />
</Badge>
</Space>
);
export default App;
import React from 'react';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
<Space size="large">
<Badge count={99}>
<Avatar shape="square" size="large" />
</Badge>
<Badge count={100}>
<Avatar shape="square" size="large" />
</Badge>
<Badge count={99} overflowCount={10}>
<Avatar shape="square" size="large" />
</Badge>
<Badge count={1000} overflowCount={999}>
<Avatar shape="square" size="large" />
</Badge>
</Space>
);
export default App;
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
import { Avatar, Badge, Button, Switch, Space } from 'antd';
const ButtonGroup = Button.Group;
const App: React.FC = () => {
const [count, setCount] = useState(5);
const [show, setShow] = useState(true);
const increase = () => {
setCount(count + 1);
};
const decline = () => {
let newCount = count - 1;
if (newCount < 0) {
newCount = 0;
}
setCount(newCount);
};
const random = () => {
const newCount = Math.floor(Math.random() * 100);
setCount(newCount);
};
const onChange = (checked: boolean) => {
setShow(checked);
};
return (
<Space direction="vertical">
<Space size="large">
<Badge count={count}>
<Avatar shape="square" size="large" />
</Badge>
<ButtonGroup>
<Button onClick={decline} icon={<MinusOutlined />} />
<Button onClick={increase} icon={<PlusOutlined />} />
<Button onClick={random} icon={<QuestionOutlined />} />
</ButtonGroup>
</Space>
<Space size="large">
<Badge dot={show}>
<Avatar shape="square" size="large" />
</Badge>
<Switch onChange={onChange} checked={show} />
</Space>
</Space>
);
};
export default App;
import React from 'react';
import { Avatar, Badge } from 'antd';
const App: React.FC = () => (
<Badge count={5} offset={[10, 10]}>
<Avatar shape="square" size="large" />
</Badge>
);
export default App;
import React from 'react';
import { Badge, Space } from 'antd';
const App: React.FC = () => (
<>
<Space>
<Badge status="success" />
<Badge status="error" />
<Badge status="default" />
<Badge status="processing" />
<Badge status="warning" />
</Space>
<br />
<Space direction="vertical">
<Badge status="success" text="Success" />
<Badge status="error" text="Error" />
<Badge status="default" text="Default" />
<Badge status="processing" text="Processing" />
<Badge status="warning" text="Warning" />
</Space>
</>
);
export default App;
import React from 'react';
import { Badge, Card, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Badge.Ribbon text="Hippies">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
<Badge.Ribbon text="Hippies" color="pink">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
<Badge.Ribbon text="Hippies" color="red">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
<Badge.Ribbon text="Hippies" color="cyan">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
<Badge.Ribbon text="Hippies" color="green">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
<Badge.Ribbon text="Hippies" color="purple">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
<Badge.Ribbon text="Hippies" color="volcano">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
<Badge.Ribbon text="Hippies" color="magenta">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
</Card>
</Badge.Ribbon>
</Space>
);
export default App;
import React, { useState } from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Badge, Space, Switch } from 'antd';
const App: React.FC = () => {
const [show, setShow] = useState(true);
return (
<Space>
<Switch checked={show} onChange={() => setShow(!show)} />
<Badge count={show ? 11 : 0} showZero color='#faad14' />
<Badge count={show ? 25 : 0} />
<Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
<Badge
className="site-badge-count-109"
count={show ? 109 : 0}
style={{ backgroundColor: '#52c41a' }}
/>
</Space>
);
};
export default App;
import React from 'react';
import { NotificationOutlined } from '@ant-design/icons';
import { Badge, Space } from 'antd';
const App: React.FC = () => (
<Space>
<Badge dot>
<NotificationOutlined style={{ fontSize: 16 }} />
</Badge>
<Badge dot>
<a href="#">Link something</a>
</Badge>
</Space>
);
export default App;
import React from 'react';
import { Avatar, Badge } from 'antd';
const App: React.FC = () => (
<a href="#">
<Badge count={5}>
<Avatar shape="square" size="large" />
</Badge>
</a>
);
export default App;
import React from 'react';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
<Space size="middle">
<Badge size="default" count={5}>
<Avatar shape="square" size="large" />
</Badge>
<Badge size="small" count={5}>
<Avatar shape="square" size="large" />
</Badge>
</Space>
);
export default App;
import React from 'react';
import { Badge, Divider, Space } from 'antd';
const colors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
];
const App: React.FC = () => (
<>
<Divider orientation="left">Presets</Divider>
<Space direction="vertical">
{colors.map((color) => (
<Badge key={color} color={color} text={color} />
))}
</Space>
<Divider orientation="left">Custom</Divider>
<Space direction="vertical">
<Badge color="#f50" text="#f50" />
<Badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" />
<Badge color="hsl(102, 53%, 61%)" text="hsl(102, 53%, 61%)" />
<Badge color="hwb(205 6% 9%)" text="hwb(205 6% 9%)" />
</Space>
</>
);
export default App;
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
color | 自定义小圆点的颜色 | string | - | |
count | 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+ ,为 0 时隐藏 | ReactNode | - | |
dot | 不展示数字,只有一个小红点 | boolean | false | |
offset | 设置状态点的位置偏移 | [number, number] | - | |
overflowCount | 展示封顶的数字值 | number | 99 | |
showZero | 当数值为 0 时,是否展示 Badge | boolean | false | |
size | 在设置了 count 的前提下有效,设置小圆点的大小 | default | small | - | 4.6.0 |
status | 设置 Badge 为状态点 | success | processing | default | error | warning | - | |
text | 在设置了 status 的前提下有效,设置状态点的文本 | ReactNode | - | |
title | 设置鼠标放在状态点上时显示的文字 | string | - |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
color | 自定义缎带的颜色 | string | - | |
placement | 缎带的位置,start 和 end 随文字方向(RTL 或 LTR)变动 | start | end | end | |
text | 缎带中填入的内容 | ReactNode | - |