Badge 徽标数

徽标,用于承载数字/符号信息。

Badge

Props

Prop NameTypeRequiredDefaultDescription
valueReactNode
显示内容
maxValuenumber99
为数字时能显示的最大值,超过将显示最大值+
dotboolean
显示为点状
placement
'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom' | 'left' | 'right'
'topRight'
badge 的位置
hideWhenZeroboolean
为 0 时是否隐藏
badgeStyleCSSProperties
badge的样式
offsettuple
定义 badge 的偏移,第一个参数 x 轴偏移量,第二个值为 y 轴偏移量
childrenReactNode
定位的内容,为空时仅展示 Badge,定位等属性不生效
color
'red' | 'green' | 'yellow' | 'primary'
'red'
选择预设的颜色
zIndexnumber9
badge 的 zIndex

说明

  • 这是 Badge 组件,用作角标展示
  • 支持点状角标
  • 预设部分颜色和角标位置
  • 不传 children 时会将角标单独展示,可用来作标记
  • 角标的 zIndex 默认为 9,无 children 时无 zIndex

演示

演示

VIEW CODE ( LIVE )

placement - 位置

VIEW CODE ( LIVE )

dot - 显示为点

VIEW CODE ( LIVE )

hideWhenZero - 为 0 时自动隐藏

VIEW CODE ( LIVE )

maxValue - 最大值

VIEW CODE ( LIVE )

value - 自定义内容

VIEW CODE ( LIVE )

color - 预设颜色

VIEW CODE ( LIVE )

badgeStyle - 自定义样式

VIEW CODE ( LIVE )

无内容时展示

VIEW CODE ( LIVE )

案例展示

VIEW CODE ( LIVE )

Bubble

Props

deprecated : 后续会移除,请使用 Badge 替代
Prop NameTypeRequiredDefaultDescription
bubble
node
泡泡内容
styleType
enum
required
内置样式风格
size
enum
'md'
尺寸
customStyle
shape
自定义样式
offset
array
[12, -4]
自定义偏移量

说明

  • 这是 Bubble 组件,特殊的角标样式提示

演示

演示

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司