You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.2 KiB
52 lines
1.2 KiB
6 years ago
|
---
|
||
|
|
order: 8
|
||
|
|
title:
|
||
|
|
zh-CN: 多彩徽标
|
||
|
|
en-US: Colorful Badge
|
||
|
|
---
|
||
|
|
|
||
|
|
## zh-CN
|
||
|
|
|
||
|
|
3.16.0 后新增。我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
|
||
|
|
|
||
|
|
## en-US
|
||
|
|
|
||
|
|
New feature after 3.16.0. We preset a series of colorful Badge style for different situation usage.
|
||
|
|
And you can always set it to a hex color string for custom color.
|
||
|
|
|
||
|
|
````jsx
|
||
|
|
import { Badge } from 'antd';
|
||
|
|
|
||
|
|
const colors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
|
||
|
|
|
||
|
|
ReactDOM.render(
|
||
|
|
<div>
|
||
|
|
<h4 style={{ marginBottom: 16 }}>Presets:</h4>
|
||
|
|
<div>
|
||
|
|
{colors.map((color) => (
|
||
|
|
<div key={color}>
|
||
|
|
<Badge color={color} text={color} />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<h4 style={{ margin: '16px 0' }}>Custom:</h4>
|
||
|
|
<div>
|
||
|
|
<Badge color="#f50" text="#f50" />
|
||
|
|
<br />
|
||
|
|
<Badge color="#2db7f5" text="#2db7f5" />
|
||
|
|
<br />
|
||
|
|
<Badge color="#87d068" text="#87d068" />
|
||
|
|
<br />
|
||
|
|
<Badge color="#108ee9" text="#108ee9" />
|
||
|
|
</div>
|
||
|
|
</div>,
|
||
|
|
mountNode
|
||
|
|
);
|
||
|
|
````
|
||
|
|
|
||
|
|
````css
|
||
|
|
.ant-tag {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
````
|