KeCheng

2.1 KiB

Raw Permalink Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

title	description	spline	isComponent
Badge 徽标	用于告知用户，该区域的状态变化或者待处理任务的数量。	data	true

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-badge": "tdesign-miniprogram/badge/badge"
}

代码演示

组件类型

组件样式

组件尺寸

API

Badge Props

名称	类型	默认值	说明	必传
color	String	-	颜色	N
content	String	-	徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义	N
count	String / Number / Slot	0	徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染	N
dot	Boolean	false	是否为红点	N
external-classes	Array	-	组件类名，分别用于设置外层元素、默认内容、右上角内容等元素类名。`['t-class', 't-class-content', 't-class-count']`	N
max-count	Number	99	封顶的数字值	N
offset	Array	-	设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>`	N
shape	String	circle	形状。可选项：circle/round/ribbon/bubble	N
show-zero	Boolean	false	当数值为 0 时，是否展示徽标	N
size	String	medium	尺寸。可选项：small/medium	N

2.1 KiB Raw Permalink Blame History Unescape Escape

引入