跳到主要内容

组件列表

提示

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

数据容器

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

布局

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

导航

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

展示

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

表单

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

图表

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

小程序

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