组件列表
tip
列表中标注 的为新版本标准化组件,支持样式 API 和自定义 CSS 变量,后续会支持属性 API
数据容器
组件名称 | 组件标识 | 组件说明 |
---|
数据列表 | ListView | 适用于从数据源中查询多条数据,并将返回列表循环展示的场景,如查询用户列表。 |
数据详情 | DataView | 适用于从数据源中查询一条数据,并将返回数据展示的场景,如查询访客预约详情。 |
表单容器 | WdForm | 作为单行输入、下拉选择等各项表单类组件的父级容器,实现数据提交。 |
数据表格 | WdTable | 以表格形式展示多行数据,支持对数据进行排序、搜索、分页、自定义显示内容和操作。 |
布局
组件名称 | 组件标识 | 组件说明 |
---|
普通容器 | Container | 可放入多个组件,常用于对组件布局进行管理控制。 |
网格布局 | Grid | 将页面划分为多行、多列的网格,可分别设置移动端和桌面端列宽 |
分组容器 | List | 用于实现常见的分组列表展示效果。 |
轮播容器 | Swiper | 用于快速在页面搭建轮播图展示效果,并支持轮播图的跳转、播放配置。 |
布局组件 | PageLayout | 用于构建带有顶部导航的页面布局。 |
滚动容器 | ScrollView | 当组件元素内容长度大于滚动容器时,滚动容器会出滚动条用来对页面内容进行滑动展示。 |
页头容器 | Header | 用于展示常见的页头展示效果。 |
页脚容器 | Footer | 用于实现常见的页脚展示效果。 |
弹窗 | Modal | 用于实现基础的弹窗(对话框)展示效果。 |
导航
组件名称 | 组件标识 | 组件说明 |
---|
Tab栏 | TabBar | 用于实现基本的tab栏交互效果,可自定义Tab栏的类型、样式以及页面的跳转。 |
菜单导航 | NavigationBar | 用于构建企业管理和门户官网应用下的「横向或纵向」菜单导航样式。 |
宫格导航 | NavLayout | 用于宫格布局样式下的导航项目展示。 |
顶部导航 | NavBar | 常用于实现H5/小程序页面的顶部导航效果,预置主页与返回按钮。小程序使用时,需在页面设置-页面样式中将导航栏样式切换为自定义样式,否则会显示双重导航和空白间距(详情请查阅该组件的限制说明)。 |
顶部选项卡 | Tabs | 用于提供顶部的选项卡布局,支持切换多个选项标签。 |
侧边选项卡 | Classification | 用于提供侧边的选项卡布局,支持切换多个选项标签。 |
展示
组件名称 | 组件标识 | 组件说明 |
---|
文本 | WdText | 用于展示页面中的文本/标题内容。 |
图片 | WdImage | 用于在页面进行图片的展示。 |
按钮 | WdButton | 用于需要用户点击触发特定事件的场景,如信息提交、页面跳转等。 |
链接 | WdLink | 用于实现超链接点击后跳转。 |
轮播图 | Carousel | 用于快速在页面搭建轮播图展示效果,并支持轮播图的跳转、播放配置。 |
循环展示 | Repeater | 用于循环展示组件的场景,可将一个数组循环展示在页面中,比如循环一个新闻列表。 |
图文卡片 | GraphicCard | 以卡片形式展示包含图片、标题、描述信息在内的列表信息。 |
图标 | WdIcon | 选择预置图标实现图标的展示效果,也支持用户上传自定义图标。 |
分割线 | WdDivider | 为页面添加一条分割线,常用于组件之间的布局区分。 |
图文展示项 | Media | 用于快速在页面构建图文展示效果。 |
气泡提示 | WdBubble | 用于显示气泡的提示。 |
富文本展示 | RichTextView | 用于对富文本类型的数据进行转换与展示。 |
视频播放 | WedaVideo | 用于展示播放视频资源 |
九宫格抽奖 | Lottery | 用于实现简单的活动抽奖功能。 |
日历 | Calendar | 用于日历展示,例如考勤数据展示、日程展示。 |
网页嵌套 | WebView | 网页嵌套组件用于在应用中嵌套展示其他的网页。 |
表单
组件名称 | 组件标识 | 组件说明 |
---|
单行输入 | FormInput | 用于输入/查看较短文本内容。 |
多行输入 | FormTextArea | 用于输入/查看较长文本内容。 |
下拉选择 | FormSelect | 用于以列表形式提供多个可选项,由用户选择其一的场景。 |
多选 | FormCheckbox | 用于在页面中平铺展示多个可选项,由用户进行多项选择的场景。 |
日期时间选择 | FormDate | 用于选择年、年月、年月日时分秒日期。 |
时间选择 | FormTime | 用于选择具体时分时间,例如22:30。 |
图片上传 | FormImageUploader | 用于上传图片、保存图片数据。 |
文件上传 | FormUploadFile | 用于上传文件、保存文件数据。 |
开关 | FormSwitch | 用于控制打开/关闭。 |
成员选择 | FormUserTreeSelect | 用于模型应用中成员选择 |
部门选择 | FormDepartTreeSelect | 用于模型应用中部门选择 |
地图定位 | FormLocation | 提供表单提交场景下的选点定位功能。 |
地区选择 | FormMultiRegion | 适用于选择省市区。 |
富文本编辑 | FormRichText | 富文本编辑 |
电话输入 | FormPhone | 用于输入电话号码,会强制校验输入内容是否符合电话格式。 |
URL输入 | FormUrl | 用于输入URL地址,会强制校验输入内容是否符合邮箱格式。 |
邮箱输入 | FormEmail | 用于输入邮箱地址,会强制校验输入内容是否符合邮箱格式。 |
单选 | FormRadio | 用于在页面中平铺展示多个可选项,由用户选择其一的场景。 |
图表
组件名称 | 组件标识 | 组件说明 |
---|
统计卡片 | StatisticsCard | 提供报表场景下的指标数据统计并展示功能。 |
折线图 | Line | 用于报表场景下展示数据随时间变化产生的趋势。 |
柱状图 | Bar | 用于报表场景下展示数据之间大小的对比。 |
饼图 | Pie | 用于报表场景下表示数据在总体中的占比。 |
小程序
组件名称 | 组件标识 | 组件说明 |
---|
获取用户手机号 | Phone | 在小程序运行态对用户的手机号进行获取。 |
小程序分享 | Share | 支持快捷实现小程序分享功能。 |