## Badge 组件示例
### 基本
简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
```tsx
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
}>
);
export default App;
```
### 独立使用
不包裹任何元素即是独立使用，可自定样式展现。
> 在右上角的 badge 则限定为红色。
```tsx
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 (
setShow(!show)} />
: 0} />
);
};
export default App;
```
### 封顶数字
超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
```tsx
import React from 'react';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 讨嫌的小红点
没有具体的数字。
```tsx
import React from 'react';
import { NotificationOutlined } from '@ant-design/icons';
import { Badge, Space } from 'antd';
const App: React.FC = () => (
Link something
);
export default App;
```
### 动态
展示动态变化的效果。
```tsx
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
import { Avatar, Badge, Button, Space, Switch } from 'antd';
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 (
} />
} />
} />
);
};
export default App;
```
### 可点击
用 a 标签进行包裹即可。
```tsx
import React from 'react';
import { Avatar, Badge } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 自定义位置偏移
设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
```tsx
import React from 'react';
import { Avatar, Badge } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 大小
可以设置有数字徽标的大小。
```tsx
import React from 'react';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 状态点
用于表示状态的小圆点。
```tsx
import React from 'react';
import { Badge, Space } from 'antd';
const App: React.FC = () => (
<>
);
export default App;
```
### 多彩徽标
我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
```tsx
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 = () => (
<>
Presets
{colors.map((color) => (
))}
Custom
);
export default App;
```
### 缎带
使用缎带型的徽标。
```tsx
import React from 'react';
import { Badge, Card, Space } from 'antd';
const App: React.FC = () => (
and raises the spyglass.
and raises the spyglass.
and raises the spyglass.
and raises the spyglass.
and raises the spyglass.
and raises the spyglass.
and raises the spyglass.
and raises the spyglass.
);
export default App;
```
### 自定义语义结构的样式和类
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Badge 的[语义化结构](#semantic-dom)样式。
```tsx
import React from 'react';
import { Avatar, Badge, Card, Flex, Space } from 'antd';
import type { BadgeProps } from 'antd';
import { createStaticStyles } from 'antd-style';
import type { RibbonProps } from 'antd/es/badge/Ribbon';
const badgeClassNames = createStaticStyles(({ css }) => ({
indicator: css`
font-size: 10px;
`,
}));
const ribbonClassNames = createStaticStyles(({ css }) => ({
root: css`
width: 400px;
border: 1px solid #d9d9d9;
border-radius: 10px;
`,
}));
const badgeStyles: BadgeProps['styles'] = {
root: {
borderRadius: 8,
},
};
const ribbonStyles: RibbonProps['styles'] = {
indicator: {
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
},
};
const badgeStylesFn: BadgeProps['styles'] = (info) => {
if (info.props.size === 'medium') {
return {
indicator: {
fontSize: 14,
backgroundColor: '#696FC7',
},
} satisfies BadgeProps['styles'];
}
return {};
};
const ribbonStylesFn: RibbonProps['styles'] = (info) => {
if (info.props.color === '#696FC7') {
return {
content: {
fontWeight: 'bold',
},
indicator: {
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
},
} satisfies RibbonProps['styles'];
}
return {};
};
const App: React.FC = () => {
return (
This card has a customized ribbon with semantic classNames and styles.
This card has a customized ribbon with semantic classNames and styles.
);
};
export default App;
```
### Ribbon Debug
Buggy!
```tsx
import React from 'react';
import { Badge, Card, Space } from 'antd';
const App: React.FC = () => (
推开窗户举起望远镜
推开窗户举起望远镜
推开窗户举起望远镜
推开窗户举起望远镜
推开窗户举起望远镜
);
export default App;
```
### 各种混用的情况
测试 `count` `status` `color` `dot` 共用的情况。
```tsx
import React from 'react';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 自定义标题
设置鼠标放在状态点上时显示的文字。
```tsx
import React from 'react';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 多彩徽标支持 count 显示 Debug
在使用多彩徽标的同时，支持 count 属性显示
```tsx
import React from 'react';
import { Badge, Space } from 'antd';
const colors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
];
const AvatarItem = ({ color }: { color: string }) => (
{color}
);
const App: React.FC = () => (
<>
{colors.map((color) => (
))}
{colors.map((color) => (
))}
);
export default App;
```
### 组件 Token
Component Token Debug.
```tsx
import React from 'react';
import { NotificationOutlined } from '@ant-design/icons';
import { Avatar, Badge, ConfigProvider, Space } from 'antd';
/** Test usage. Do not use in your production. */
export default () => (
);
```