mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
cb2094265e
* feat(tooltip): Tooltip support colour background Closes #23127 * patch: update test case * chore: repalce h1 tag to Divider * chore: update demo
1.2 KiB
1.2 KiB
order | title | ||||
---|---|---|---|---|---|
8 |
|
zh-CN
我们添加了多种预设色彩的徽标样式,用作不同场景使用。如果预设值不能满足你的需求,可以设置为具体的色值。
en-US
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
import { Badge, Divider } from 'antd';
const colors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
];
ReactDOM.render(
<>
<Divider orientation="left">Presets</Divider>
<div>
{colors.map(color => (
<div key={color}>
<Badge color={color} text={color} />
</div>
))}
</div>
<Divider orientation="left">Custom</Divider>
<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>
</>,
mountNode,
);
.ant-tag {
margin-bottom: 8px;
}