跳到主要内容

组件列表

提示

列表中标注 的为新版本标准化组件,支持使用属性 API、方法 API、样式 API 和自定义 CSS 变量,可根据各个组件文档中的相关说明按需使用

数据容器

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

布局

普通容器
Container
可放入多个组件,常用于对组件布局进行管理控制。
网格布局
Grid
将页面划分为多行、多列的网格,可分别设置移动端和桌面端列宽
卡片
Card
提供卡片容器和折叠面板样式,可承载文字、按钮、图片等
轮播容器
Swiper
用于快速在页面搭建轮播图展示效果,并支持轮播图的跳转、播放配置。
布局组件
Layout
用于构建带有顶部导航的页面布局
滚动容器
ScrollView
当组件元素内容长度大于滚动容器时,滚动容器会出滚动条用来对页面内容进行滑动展示。
弹窗
Modal
用于实现基础的弹窗(对话框)展示效果。

导航

Tab栏
TabBar
用于实现基本的tab栏交互效果,可自定义Tab栏内容、样式及页面跳转
菜单导航
NavigationBar
用于构建企业管理和门户官网应用下的「横向或纵向」菜单导航样式。
宫格导航
NavLayout
用于宫格布局样式下的导航项目展示。
顶部选项卡
TopTab
用于提供顶部的选项卡布局,支持切换多个选项标签。
侧边选项卡
SideTab
用于提供侧边的选项卡布局,支持切换多个选项标签。
布局导航
MenuLayout
布局导航

展示

文本
Text
用于展示页面中的文本/标题内容。
图片
Image
用于在页面进行图片的展示。
按钮
Button
用于需要用户点击触发特定事件的场景,如信息提交、页面跳转等。

Tree
以树形结构展示多层级的数据内容,如组织架构、物料信息、客户分类等
链接
Link
用于实现超链接点击后跳转。
轮播图
Carousel
用于快速在页面搭建轮播图展示效果,并支持轮播图的跳转、播放配置。
循环展示
Repeater
用于循环展示组件的场景,可将一个数组循环展示在页面中,比如循环一个新闻列表。
二维码
QrCode
根据链接或文本等生成二维码
图标
Icon
选择预置图标实现图标的展示效果,也支持用户上传自定义图标。
分割线
Divider
为页面添加一条分割线,常用于组件之间的布局区分。
气泡提示
Bubble
用于显示气泡的提示。
富文本展示
RichTextView
用于对富文本类型的数据进行转换与展示。
视频播放
Video
用于展示播放视频资源
音频播放
audio
提供音频控制功能
九宫格抽奖
Lottery
用于实现简单的活动抽奖功能。
日历
Calendar
用于日历展示,例如考勤数据展示、日程展示。
Canvas
canvas
提供画布功能,通常用于绘制图像
标签
Tag
用于标记和分类

表单

单行输入
Input
用于单行内容的输入。
多行输入
Textarea
用于多行内容的输入。
数字输入
InputNumber
富文本编辑
RichText
可调整文本样式,支持插入图片、链接等内容的富文本表单组件。
下拉单选
Select
以列表形式展示选项,用户可进行搜索和选择操作。
下拉多选
SelectMultiple
用于以列表形式提供多个可选项,由用户选择其一的场景。
单选
Radio
页面中平铺选项,用户可进行单项选择操作。
多选
Checkbox
页面中平铺选项,用户可进行多项选择操作。
标签选择
TagSelect
多个标签并排展示,支持单选和多选
日期时间选择
Date
用于选择日期时间,支持年月日时分秒、年月日等选择模式。
日期区间选择
DateRange
用于选择年、年月、年月日时分秒日期的区间选择。
时间选择
Time
用于选择时间,支持时分选择模式,例如22:30。
图片上传
UploadImage
用于上传图片、保存图片数据。
文件上传
UploadFile
用于上传本地文件资源,如视频、音频、PDF、Excel、Word等文件类型。
开关
Switch
用于控制打开/关闭
成员选择
Member
用于选择组织架构中的用户成员。
部门选择
Department
用于选择组织架构中的各级部门。
地图定位
Location
用于在表单中进行地图选点定位。
地区选择
Region
用于选择各级行政区划(省市区)。
电话输入
InputPhone
用于输入电话号码,会强制校验输入内容是否符合电话格式。
URL输入
InputUrl
用于输入URL地址,会强制校验输入内容是否符合URL格式。
邮箱输入
InputEmail
用于输入邮箱地址,会强制校验输入内容是否符合邮箱格式。

图表

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

小程序

获取用户手机号
Phone
在小程序运行态对用户的手机号进行获取。
小程序分享
Share
支持快捷实现小程序分享功能。
公众号关注
OfficialAccount
可在小程序内展示公众号关注入口,方便用户快捷关注或访问公众号。
客服会话
CustomerService
用于在小程序中打开客服对话页面。
小程序广告
Ad
用于在小程序中展示微信广告,使推荐广告获得曝光与点击,从而小程序获取盈利。

高级

JSX组件
JSX
组件介绍:原生JSX代码块,可快速地引入第三方组件库。
网页嵌套
WebView
网页嵌套组件用于在应用中嵌套展示其他的网页。

布局模板

空白模板布局
MenuBaseLayout
空白模板布局
顶部导航布局
MenuHorizontalLayout
常用于功能较为简单或页面数量较少的应用场景
厂字导航布局
MenuPlantLayout
常用于展示多个分类和入口的应用场景
左侧导航布局
MenuVerticalLayout
常用于展示各种分类和菜单的应用场景
Tab栏导航布局
MenuTabLayout
Tab栏导航布局适用于切换内容较为简单的场景
导航栏布局
MenuNavLayout
常用于实现H5/小程序页面顶部导航效果,预置主页与返回按钮。小程序使用时,需在页面设置-页面样式中将导航栏样式切换为自定义样式,否则会显示双重导航和空白间距