Smart UI 介绍

智能小程序扩展组件库 Smart UI ，是对智能小程序基础组件的能力扩容，包含更多元的能力和组合样式，具备丰富、易用的特性，可帮助开发者低成本快速开发，同时保证小程序体验良好。

通用

名称解释
icon 图标包括天气、系统设置、互动社交、生活服务、书籍影音、政务服务、交通出行 7 个行业类别的图标

布局导航

名称解释
navigation 自定义导航顶部自定义的导航栏，其中不包含界面，仅仅是限制了开发者写顶部 bar 内容的区域，使之在安全区内完成顶部内容的渲染；支持配置返回首页、上一页按钮，和滑动切换效果主题
feed 信息流信息流组件，可配置下拉刷新、列表加载、上滑加载功能，适用于列表信息展示，并可放置在页面的任何部分；组件包含手势下拉以及 API 调用两种使用方式
feed-item 信息流子项信息流子项，包括左文右图、纯文本、上文下图、多图及视频模式
spin 加载加载组件，可用于全屏和半屏。用于展示加载状态，点击加载、正在加载、加载完成、重新加载四种状态
refresh 刷新可用于页面任意区域。使用时需自行添加下拉逻辑改变 offset-y 参数。smt-feed 组件对 smt-refresh 进行了封装，支持手势交互和 API 调起刷新
horizontal-scroll-list 横向滚动面板横向滚动面板，用于信息展示，可放置在页面的任何位置
anchor-img 标签图片标签图片组件，控制展开显示标签以及点击标签获取当前标签信息，可支持 aspectFit 和 widthFix 两种图片模式, 支持自动计算标签方向，支持更改标签颜色和风格
collapse 折叠面板折叠面板，支持配置主标题文案和副标题文案，并可点击展开折叠面板查看更多内容。适用于信息展示，并可放置在页面的任何位置
text-collapse 文本折行文本折行组件，支持多行文本折行展示
gradient-collapse 带渐变的展开收起带渐变的展开收起组件，可自定义组件内容( slot 插入)，并在收起的内容最后提供渐变效果
grid 宫格宫格组件，包含上图下文和左图右文两种样式。可配置图片、主标题文案、副标题文案。适用于信息展示，并可放置在页面的任何位置
person-card 个人信息卡个人信息卡组件，可配置卡片类型、卡片背景图、卡片名称、卡片信息功能，适用于信息展示，并可放置在页面的任何位置
timeline 时间轴时间轴组件，可配置时间轴内容，时间轴状态以及自定义图标。适用于信息展示，并可放置在页面的任何位置
list 列表列表组件，支持配置主标题文案、副标题文案、辅助信息、图标等。适用于信息展示，并可放置在页面的任何位置
list-item 列表项列表项，支持三种样式可配，单行、多行列表、左右布局等，具体可看代码示例。适用于信息展示，并可放置在页面的任何位置
chart 图表图表组件， 提供了常规的折线图、柱状图、饼图, 支持 SVG + Canvas 两种渲染引擎, 使用扁平化数据配置完成开发;

表单

名称解释
textarea 多行输入框多行输入框，支持白色主题（默认）、 边框主题和深色模式主题，可配置字符限制、错误提示方式等
search-bar 自定义搜索框自定义搜索框，支持配置多种主题，搜索默认文案，容器样式等
voice-recognizer 语音识别语音识别，支持短语音和长语音两种模式，并可配置手动听音等功能。暂不支持 web 化
captcha 图形验证码图形验证码组件，一般用于表单项提交时后端校验。防止连续提交，高效拦截机器行为
filter 筛选筛选，由筛头部（filter-header）以及筛选面板（filter-body）组成，其中筛选面板支持单列筛选、级联筛选、多项选择筛选以及自定义筛选。
cascade 级联多级选择组件，为开发者提供级联选择功能，默认为三级。比如：省/市/区。该组件包括左侧标签栏，以及右侧多个 picker（从底部弹起的滚动选择器）。支持配置左侧标签宽度，并提供自定义样式，可供开发者进行定制
checkbox-group 多选多选组件，为开发者提供多项选择功能
calendar 日历日历组件，可配置选中日期、日历数据、星期文案，适用于信息输入，并可放置在页面的任何位置
rate 评分评分组件，一般用于对服务的满意度进行评价
image-uploader 图片上传器上传图片组件，支持大图、多图模式，可配置图片个数、大小限制等

提示引导

名称解释
page-status 页面状态页面状态组件，可用于全屏和半屏。用于展示页面加载、页面异常-有操作、页面异常-无操作三种页面状态
mask 关注引导蒙层关注引导蒙层组件，支持使用默认顶部导航的页面或者自定义顶部导航的页面
prompt 温馨提示温馨提示组件，可配置标题内容，提示内容，并可放置在页面的任何位置
notice-bar 跑马灯跑马灯组件，可配置跑马灯内容，跑马灯样式，跑马灯滚动状态以及滚动配置。适用于提示引导，并可放置在页面的任何位置
steps 步骤条步骤条组件，可配置步骤条内容，步骤条状态，步骤条上限为 8 步。适用于信息输入，并可放置在页面的任何位置
follow 关注关注组件，内容 / 用户关注组件。开发者可在小程序内配置关注组件，实现用户对内容和用户的关注，可嵌套在原生组件内，自定义选择组件的样式和动效