Fighting DesignBadge 角标
用于展示角标提示信息
基本使用
type 属性可以配置角标的主题
10
11
12
13
14
15
开启
最大值
max 属性可以配置角标的最大值，该值仅在 value 的值是 Number 时生效
20
20
开启
小红点
设置 dot 属性，展示为一个点
消息
开启
自定义文字
value 除了 Number 类型，还可以是 String，自定义内容
hot
new
开启
自定义颜色
你也可以自定义 badge 的颜色
99+
开启
是否展示
show 属性可控制展示状态
20
20
开启
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
value | 显示值 | string / number | —— | —— |
max | value 为数字时的最大值，超出显示为 value+ | number | —— | 99 |
dot | 展示为一个点 | boolean | —— | false |
show | 是否显示 | boolean | —— | true |
type | 样式主题 | FightingType | default primary success danger warning info | danger |
background | 自定义背景颜色 | string | —— | —— |
color | 自定义文字颜色 | string | —— | —— |
Interface
组件导出以下类型定义：
ts
import type { BadgeInstance, BadgeProps } from 'fighting-design'样式变量
组件提供了下列 CSS 变量，可用于自定义样式
| 名称 | 描述 |
|---|---|
--badge-border-radius | 圆角大小 |
--badge-color | 文字颜色 |
--badge-background | 背景颜色 |