Badge 徽标

展示状态、数量或标记的小徽标

何时使用

  • 需要展示角标、状态点或未读数量时。

导入

import { Badge, BadgeRibbon } from "@reglow/reui";
5
10+
成功
错误
处理中
geekblue

基础用法

简单的徽章展示，当 count 为 0 时，默认不显示，但可以使用 showZero 修改为显示。

<template>
  <div class="flex gap-4">
    <Badge :count="5">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
    <Badge :count="0" show-zero>
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
    <Badge :count="'NEW'">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
  </div>
</template>

更多示例

封顶数字

超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99。

<template>
  <div class="flex gap-6">
    <Badge :count="99">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
    <Badge :count="100">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
    <Badge :count="99" :overflow-count="10">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
    <Badge :count="1000" :overflow-count="999">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
  </div>
</template>

小红点

没有具体的数字，只有一个小红点。

<template>
  <div class="flex gap-4 items-center">
    <Badge dot>
      <BellIcon class="size-4" />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
    </Badge>
  </div>
</template>

状态点

用于表示状态的小圆点。

<template>
  <div class="flex flex-col gap-4">
    <div class="flex gap-4 items-center">
      <Badge status="success" />
      <Badge status="error" />
      <Badge status="default" />
      <Badge status="processing" />
      <Badge status="warning" />
    </div>
    <div class="flex flex-col gap-2">
      <Badge status="success" text="Success" />
      <Badge status="error" text="Error" />
      <Badge status="default" text="Default" />
      <Badge status="processing" text="Processing" />
      <Badge status="warning" text="Warning" />
    </div>
  </div>
</template>

多彩徽标

多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值。

<script setup>
const colors = [
  "pink", "red", "yellow", "orange", "cyan", "green", "blue",
  "purple", "geekblue", "magenta", "volcano", "gold", "lime",
];
</script>

<template>
  <div class="flex flex-col gap-2">
    <Badge v-for="c in colors" :key="c" :color="c" :text="c" />
    <Badge color="#f50" text="#f50" />
    <Badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" />
  </div>
</template>

大小

设置有数字徽标的大小。

<template>
  <div class="flex gap-4">
    <Badge size="medium" :count="5">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
    <Badge size="small" :count="5">
      <div class="size-12 rounded-lg bg-muted" />
    </Badge>
  </div>
</template>

缎带 Ribbon

使用缎带型的徽标。

<template>
  <div class="flex flex-col gap-4">
    <BadgeRibbon text="Hippies">
      <Card title="Pushes open the window">
        and raises the spyglass.
      </Card>
    </BadgeRibbon>
    <BadgeRibbon text="Hippies" color="pink">
      <Card title="Pushes open the window">
        and raises the spyglass.
      </Card>
    </BadgeRibbon>
    <BadgeRibbon text="Hippies" color="green" placement="start">
      <Card title="Pushes open the window">
        and raises the spyglass.
      </Card>
    </BadgeRibbon>
  </div>
</template>

API

Badge Props

参数说明类型默认值
color自定义小圆点的颜色（预设色名或色值）string-
count展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏number | string-
dot不展示数字，只有一个小红点booleanfalse
offset设置状态点的位置偏移 [left, top][number, number]-
overflowCount展示封顶的数字值number99
showZero当数值为 0 时，是否展示 badgebooleanfalse
size设置徽标大小medium | smallmedium
status设置 Badge 为状态点success | processing | default | error | warning-
text在设置了 status 的前提下有效，设置状态点的文本string-
title设置鼠标放在状态点上时显示的文字string-

预设颜色

pink red yellow orange cyan green blue purple geekblue magenta volcano gold lime

BadgeRibbon Props

参数说明类型默认值
color自定义缎带的颜色string-
placement缎带的位置start | endend
text缎带中填入的内容string-
Avatar 头像
Avatar 头像
Calendar 日历
以日/周/多日视图展示日程事件