Ribbon 缎带

缎带用于卡片或容器的角落装饰，支持左侧和顶部两种位置，可配合文字或图标使用。

<TCard>
  <TRibbon color="red">Hot</TRibbon>
  <!-- ... -->
</TCard>

缎带位置

通过 position 属性切换位置：start（左侧，默认）、top（顶部）。

<TRibbon position="start" color="blue">Left</TRibbon>
<TRibbon position="top" color="purple">Top</TRibbon>

缎带颜色

通过 color 属性设置背景色，支持所有 Tabler 预设色。

<TRibbon color="red">Red</TRibbon>
<TRibbon color="blue">Blue</TRibbon>
<TRibbon color="green">Green</TRibbon>
<TRibbon color="orange">Orange</TRibbon>
<TRibbon color="purple">Purple</TRibbon>
<TRibbon color="cyan">Cyan</TRibbon>

文字内容

默认插槽可放置文字或 @tabler/icons-vue 图标。

<TRibbon color="red">新</TRibbon>
<TRibbon color="green">
  <IconStar :size="24"/>
</TRibbon>
<TRibbon color="orange">
  <IconAlertTriangle :size="24"/>
</TRibbon>

书签样式

设置 bookmark 属性启用书签样式（下角斜切效果）。

<TRibbon color="red" bookmark>Hot</TRibbon>
<TRibbon color="blue" position="top" bookmark>
  <IconBell :size="24"/>
</TRibbon>

与 TCard 结合使用

通过 TCard 的 ribbonColor/ribbonPosition props 可为卡片添加缎带。

<TCard ribbonColor="red" title="左侧缎带">
  <template #ribbon>Hot</template>
</TCard>

API

Props

Prop	说明	类型	默认值
position	缎带位置：左侧（start）/ 顶部（top）	'start' | 'top'	'start'
color	缎带背景色（Tabler 预设色）	TablerColor	undefined
bookmark	书签样式（下角斜切）	boolean	false

Slots

插槽	说明
default	缎带内容，支持文字和图标