跳到主要内容

组件列表

提示

列表中标注 的为新版本标准化组件,支持样式 API 和自定义 CSS 变量,后续会支持属性 API

数据容器

组件名称
组件id前缀
组件说明
数据列表ListView适用于从数据源中查询多条数据,并将返回列表循环展示的场景,如查询用户列表。
数据详情DataView适用于从数据源中查询一条数据,并将返回数据展示的场景,如查询访客预约详情。
表单容器Form作为单行输入、下拉选择等各项表单类组件的父级容器,实现数据提交。
数据表格Table以表格形式展示多行数据,支持对数据进行排序、搜索、分页、自定义显示内容和操作。

布局

组件名称
组件id前缀
组件说明
普通容器Container可放入多个组件,常用于对组件布局进行管理控制。
网格布局Grid将页面划分为多行、多列的网格,可分别设置移动端和桌面端列宽
分组容器List用于实现常见的分组列表展示效果。
轮播容器Swiper用于快速在页面搭建轮播图展示效果,并支持轮播图的跳转、播放配置。
布局组件PageLayout用于构建带有顶部导航的页面布局。
滚动容器ScrollView当组件元素内容长度大于滚动容器时,滚动容器会出滚动条用来对页面内容进行滑动展示。
页头容器Header用于展示常见的页头展示效果。
页脚容器Footer用于实现常见的页脚展示效果。
弹窗Modal用于实现基础的弹窗(对话框)展示效果。

导航

组件名称
组件id前缀
组件说明
Tab栏TabBar用于实现基本的tab栏交互效果,可自定义Tab栏的类型、样式以及页面的跳转。
菜单导航NavigationBar用于构建企业管理和门户官网应用下的「横向或纵向」菜单导航样式。
宫格导航NavLayout用于宫格布局样式下的导航项目展示。
顶部导航NavBar常用于实现H5/小程序页面的顶部导航效果,预置主页与返回按钮。小程序使用时,需在页面设置-页面样式中将导航栏样式切换为自定义样式,否则会显示双重导航和空白间距(详情请查阅该组件的限制说明)。
顶部选项卡Tabs用于提供顶部的选项卡布局,支持切换多个选项标签。
侧边选项卡Classification用于提供侧边的选项卡布局,支持切换多个选项标签。

展示

组件名称
组件id前缀
组件说明
文本Text用于展示页面中的文本/标题内容。
图片Image用于在页面进行图片的展示。
按钮Button用于需要用户点击触发特定事件的场景,如信息提交、页面跳转等。
Tree以树形结构展示多层级的数据内容,如组织架构、物料信息、客户分类等
链接Link用于实现超链接点击后跳转。
轮播图Carousel用于快速在页面搭建轮播图展示效果,并支持轮播图的跳转、播放配置。
循环展示Repeater用于循环展示组件的场景,可将一个数组循环展示在页面中,比如循环一个新闻列表。
二维码QrCode根据链接或文本等生成二维码
图文卡片GraphicCard以卡片形式展示包含图片、标题、描述信息在内的列表信息。
图标Icon选择预置图标实现图标的展示效果,也支持用户上传自定义图标。
分割线Divider为页面添加一条分割线,常用于组件之间的布局区分。
图文展示项Media用于快速在页面构建图文展示效果。
气泡提示Bubble用于显示气泡的提示。
富文本展示RichTextView用于对富文本类型的数据进行转换与展示。
视频播放Video用于展示播放视频资源
九宫格抽奖Lottery用于实现简单的活动抽奖功能。
日历Calendar用于日历展示,例如考勤数据展示、日程展示。
网页嵌套WebView网页嵌套组件用于在应用中嵌套展示其他的网页。

表单

组件名称
组件id前缀
组件说明
单行输入Input用于单行内容的输入。
多行输入TextArea用于多行内容的输入。
下拉选择Select以列表形式展示选项,用户可进行搜索和选择操作。
下拉多选MultipleSelect以列表形式展示选项,用户可进行多选操作。
单选Radio页面中平铺选项,用户可进行单项选择操作。
多选Checkbox页面中平铺选项,用户可进行多项选择操作。
日期时间选择DateInput用于选择日期时间,支持年月日时分秒、年月日等选择模式。
时间选择TimeInput用于选择时间,支持时分选择模式,例如22:30。
图片上传ImageUploader用于上传图片、保存图片数据。
文件上传UploadFile用于上传文件、保存文件数据。
开关Switch用于控制打开/关闭
成员选择UserSelect用于选择组织架构中的用户成员。
部门选择DepartmentSelect用于选择组织架构中的各级部门。
地图定位LocationInput用于在表单中进行地图选点定位。
地区选择RegionInput用于选择各级行政区划(省市区)。
富文本编辑RichTextInput可调整文本样式,支持插入图片、链接等内容的富文本表单组件。
电话输入InputPhone用于输入电话号码,会强制校验输入内容是否符合电话格式。
URL输入InputUrl用于输入URL地址,会强制校验输入内容是否符合URL格式。
邮箱输入InputEmail用于输入邮箱地址,会强制校验输入内容是否符合邮箱格式。

图表

组件名称
组件id前缀
组件说明
统计卡片StatisticsCard提供报表场景下的指标数据统计并展示功能。
折线图Line用于报表场景下展示数据随时间变化产生的趋势。
柱状图Bar用于报表场景下展示数据之间大小的对比。
饼图Pie用于报表场景下表示数据在总体中的占比。
通用图表Chart通用图表是一个万能图表,可配置出多种图表如折线图、饼状图、面积图、地图、漏斗图、仪表盘等。

小程序

组件名称
组件id前缀
组件说明
获取用户手机号Phone在小程序运行态对用户的手机号进行获取。
小程序分享Share支持快捷实现小程序分享功能。
公众号关注组件OfficialAccount可在小程序内展示公众号关注入口,方便用户快捷关注或访问公众号。
客服会话CustomerService用于在小程序中打开客服对话页面。