Skip to content

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 参数

参数类型默认说明
textstring''缎带文字(slot text 优先)
colorstring''预设色名 / CSS color 字符串;预设色走 modifier,其余走 inline 背景
placement'start''end'end

BadgeRibbon 插槽

插槽名说明
default被装饰的内容(缎带浮于其右/左上角)
text缎带内文字 / 节点,优先级高于 text prop

Released under the MIT License.