先看 通用。同类：基础 · 表单 · 导航 · 展示 · 反馈 · 布局

基础

文案、图片、头像、按钮、省略、徽标。

Text 文本

text、title、label 三个字段都可以当文案，会做 {{path}} 替换。普通正文，可改颜色、字号、加粗和对齐。

参数名	类型	说明
text / title / label	String	文案，支持 {{path}}
style.fontSize	Number	字号 sp
style.color	String	文字颜色
style.fontWeight	String	bold / 默认
style.align	String	left / center / right

下面时钟每秒 setData 一次，预览里的时间会跟着变。

Title 标题

页面里的大标题，比 text 更醒目。不是顶部导航栏；导航栏写法见 页面结构。

参数名	类型	说明
text / title / label	String	标题文案，支持 {{path}}
style.fontSize	Number	字号 sp
style.color	String	文字颜色
style.align	String	left / center / right

Notice 提示

灰色小字，用来写说明、注释或次要信息。

参数名	类型	说明
text / title / label	String	提示文案，支持 {{path}}
style.color	String	文字颜色，默认灰色
style.align	String	left / center / right

Tag 标签

短标签。默认浅绿底、深绿字。需要纯色底、白字时写 variant: "solid"，再用 style.background 换颜色。多个标签用 Row，或横向 List 绑定数组。文案字段与 Text 相同，支持 {{path}}。

参数名	类型	说明
text / title / label	String	标签文案
variant	String	solid / 纯色 / 实心：纯色底、白字。别名：fill、filled
style.background	String	背景色。默认浅绿 #EEF2F1；纯色时默认 #006A65
style.color	String	文字颜色。默认深绿 #006A65；纯色时默认 #FFFFFF
style.radius	Number	圆角，默认 4
style.padding	Number	内边距；不写时为左右 8、上下 3
style.fontSize	Number	字号，默认 11

{ "type": "tag", "text": "进行中", "variant": "solid" }

{ "type": "tag", "text": "警告", "variant": "solid", "style": { "background": "#C45C26" } }

Badge 徽标

数字、红点、文字状态都可以。可以单独放在 row 里，也可以包住头像 / 图标（写 children），徽标出现在右上角。tabs 选项和底部菜单也可写 badge 字段。

常见场景：

• 未读数字：会话列表右侧 12
• 数量封顶：max: 99，超过显示 99+
• 红点：只提醒“有更新”，不显示数字（variant: "dot" 或不写 text）
• 状态文字：NEW / HOT / 官方
• 叠在头像上：客服头像、未读头像
• 飘带：内容卡片角上的 推荐

参数名	类型	说明
text / title / label	String	徽标内容；不写或 variant: "dot" 则显示圆点
max / overflowCount	Number	数字超过该值显示 N+，如 99 → 99+
variant	String	dot 红点；ribbon 小飘带；默认胶囊
color	String	danger（默认红）/ primary / warning / info / neutral，或 #RRGGBB
children	Array	有则叠在子节点右上角，常包 avatar / image
style.background	String	自定义底色，优先于 color 命名色

{ "type": "badge", "text": "12" }

{ "type": "badge", "text": "128", "max": 99 }

{ "type": "badge", "variant": "dot", "children": [{ "type": "avatar", "text": "客" }] }

{ "type": "badge", "text": "蓝", "style": { "background": "#1565C0" } }

Image 图片

src 为 http(s) 地址，或项目内 PNG / JPG / SVG（如 img/xhs.svg）。

宫格入口图见 Grid，需写出 "width": "50%"。

参数名	类型	说明
src / url	String	图片路径，支持 {{item.icon}}
fit	String	contain（默认，完整显示）或 cover（裁切铺满）。宫格入口图固定 contain，不裁剪
style.width / height	Number / String	宽高。数字是 dp，宽度也可写 "50%"。页面头图只写 height 会拉满宽度
style.radius	Number	圆角

Avatar 头像

圆形或方形头像。有 src 显示图片，没有则取 text 的首字。

参数名	类型	说明
src / url	String	图片路径，支持 {{path}}
text / title / label	String	无图时显示的文字，只取首字
size	Number	边长 dp，默认 40。也可写在 style.size
shape	String	circle（默认）、square、rounded / 圆角
style.borderWidth / borderColor	Number / String	描边。圆角头像常配 borderWidth: 2
style.color	String	文字头像的字色。不写则跟 window.theme.primary

{ "type": "avatar", "src": "img/avatar-1.svg", "size": 48 }

{ "type": "avatar", "text": "运", "size": 40, "shape": "square" }

{ "type": "avatar", "text": "蓝", "size": 40, "style": { "color": "#1565C0" } }

Button 按钮

主操作按钮。size 缺省为大（48dp）。可写 onTap 或 action（先调 JS 再执行动作）。loading 显示转圈；默认有按压涟漪。换颜色写 style.background，不要写在组件根上；不写就是默认绿 #006A65。

参数名	类型	说明
text / title / label	String	按钮文案
size	String	sm / 小 高 32dp；md / 中 高 40dp；lg / 大 高 48dp（默认）
onTap	String	轻触一次时调用的 Page 方法
action	Object	点击动作，见 页面结构 · JSON action
style.background	String	背景色，默认主题绿。可写 {{count1Bg}}，用 this.setData 切换选中态
style.color	String	文字颜色，同样支持 {{path}}
variant	String	outline / 描边：白底、描边和文字同色
style.borderColor / borderWidth	String / Number	描边色和宽度。outline 时默认跟 style.color
style.weight	Number	在 row 里撑开
loading	Boolean / String	显示转圈并禁止点击。可写 true 或 {{saving}}。别名：busy、加载中
loadingText	String	加载时替换按钮文案，不写则保留原文字
ripple	Boolean	按压涟漪，默认 true。false / 涟漪: false 可关

{ "type": "button", "text": "保存", "style": { "background": "#006A65", "color": "#FFFFFF" }, "loading": "{{saving}}", "loadingText": "保存中", "onTap": "onSave" }

Ellipsis 文本省略

超过指定行数显示省略号。expand 为 true（默认）时可展开 / 收起。

参数名	类型	说明
text / title / label	String	文案，支持 {{path}}
rows / maxLines	Number	折叠时最多几行，默认 2
expand	Boolean	是否显示「展开 / 收起」，默认 true
style.color	String	「展开 / 收起」文字颜色。不写则跟 window.theme.primary

{ "type": "ellipsis", "rows": 2, "expand": true, "text": "比较长的说明……" }

{ "type": "ellipsis", "rows": 2, "expand": true, "style": { "color": "#1565C0" }, "text": "展开链接为蓝色。" }