mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
06dff86287
* fix: Badge count style when customize color close #31590 close #31591 * add demo for debug * update badge demos * create ribbon.test.tsx
1.6 KiB
1.6 KiB
order | title | ||||
---|---|---|---|---|---|
10 |
|
zh-CN
使用缎带型的徽标。
en-US
Use ribbon badge.
import { Badge, Card } from 'antd';
ReactDOM.render(
<>
<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>
</>,
mountNode,
);
.ant-card {
margin-bottom: 16px;
}