Badge 徽标

使用指南

组件介绍

右上角的圆形徽标。一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

引入方式

import { Badge } from 'feart';

components: {
  'fe-badge': Badge
}

代码演示

基本用法

简单的徽标展示，可以通过 text 设置显示文本，通过 offset 设置状态点的位置偏移。

<fe-badge text="6" :offset="[0, 0]">
  <a href="#">TEST</a>
</fe-badge>

独立使用

不包裹任何元素即是独立使用，可自定义颜色。

<fe-badge text="25"></fe-badge>
<fe-badge text="4" color="blue"></fe-badge>

小圆点

没有具体的文本。

<fe-badge dot>
  <div class="fe-badge-test"></div>
</fe-badge>

<fe-badge dot>小红点</fe-badge>

状态点

用于表示状态的小圆点。

<fe-badge status="success" />
<fe-badge text="success" status="success" />
<fe-badge text="自定义" status="default" color="#ccc" />

API

Slots