ant-design-vue/components/badge/demo/ribbon.vue

44 lines
1.4 KiB
Vue

<docs>
---
order: 9
title:
zh-CN: 缎带
en-US: Ribbon
---
## zh-CN
使用缎带型的徽标
## en-US
Use ribbon badge.
</docs>
<template>
<a-badge-ribbon text="Hippies">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="pink">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="red">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="cyan">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="green">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="purple">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="volcano">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
<a-badge-ribbon text="Hippies" color="magenta">
<a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
</a-badge-ribbon>
</template>