BadgeRibbon 缎带徽标
带折角缎带的徽标,作为独立顶层组件存在(不挂在 Badge 命名空间下)。
何时使用
- 卡片 / 商品 / 列表项需要在角落标注「新」「热」「限时」等带视觉冲击的徽标。
基本使用
text 设置缎带文字,默认 slot 是被装饰的内容。
不同位置
placement: 'start' | 'end',默认 end(右上)。
预设色
13 种预设色名:pink / magenta / red / volcano / orange / yellow / gold / cyan / lime / green / blue / geekblue / purple。
自定义色
非预设字符串作为 CSS color 字面量(#hex / rgb() / 命名色)。
文字 slot
需要图标 + 文字时用 text slot 完全自定义。
BadgeRibbon 参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| text | string | '' | 缎带文字(slot text 优先) |
| color | string | '' | 预设色名 / CSS color 字符串;预设色走 modifier,其余走 inline 背景 |
| placement | 'start' | 'end' | end |
BadgeRibbon 插槽
| 插槽名 | 说明 |
|---|---|
| default | 被装饰的内容(缎带浮于其右/左上角) |
| text | 缎带内文字 / 节点,优先级高于 text prop |