Badge 徽标

徽标,红点、数字或文字。用于告诉用户待处理的事物或更新数。

何时使用

在右上角展示数字、文字、小红点 适用于产品化的新消息、新功能、新服务等内容的提醒,通过醒目视觉形式吸引用户处理

代码示例

基本使用

属性

属性类型必填默认值说明
type'dot' | 'text' | 'bubble' | 'number''dot'badge 类型
'dot':红点
'number':数字类型,会自动做>99转换
'text':文字气泡
'bubble':气泡形态(带箭头)
textstring | number-红点内容,为空时表示只显示红点;可以是数字,也可以是文字;如果是数字,超过 99 会自动变成 ...
position'top-left' | 'top-right''top-right'相对于 children 所在方位,left-top(左上角) top-right(右上角)
offsetXstring'-50%'水平方向偏移量
offsetYstring'-50%'垂直方向偏移量
strokebooleanfalse是否有描边
iconTypestring-自定义图标
bgColorstring-自定义背景色,css色值
classNamestring-类名

样式类

类名说明
amd-badge整体样式
amd-badge-inner-text内部文本样式
amd-badge-text文本样式
amd-badge-dot红点样式
amd-badge-icon图标样式