组件介绍
使用说明
React-UI组件是基于React框架开发的样式库,其中包括各种类型的组件(按钮、表单、对话框等),开发者通过添加对应的样式名称即可使用组件。 接入WeLink的We码必须引用此套样式库,引用方式有以下两种:
- 引入统一的css文件。
若使用平台提供的模板,则默认已经引入该css文件。
<link rel="stylesheet" href="../../../../common/css/hwh5.css" />
- 在 JS 页面中引入相关的UI组件。例如:
import { Input, Button, List, ... } from '@wecode/react-weui';
基础组件
| 接口名称 | 描述 |
|---|---|
| ExceptionTip | 缺省页,主要用于错误提示 |
| Icon | 图标 |
| HeadIcon | 头像图标 |
| Progress | 进度条 |
| Stepper | 步进器 |
| Pulltorefresh | 下拉刷新 |
| Timeline | 时间轴 |
表单组件
| 接口名称 | 描述 |
|---|---|
| Form | 表单(纯展示) |
| FormAccess | 表单(选择) |
| FormInput | 表单(文本框) |
| FormTextarea | 表单(文本域) |
| Button | 按钮 |
| Input | 表单输入框 |
| List | 列表 |
| ListDouble | 双行 |
| ListView | 资讯类列表 |
| Picker | 多列选择器 |
| Switch | 开关 |
| Radio | 单选按钮 |
| Checkbox | 多选按钮 |
| Slider | 滑块 |
| Uploader | 上传组件 |
| Tabselection | 分段选择 |
操作与反馈组件
| 接口名称 | 描述 |
|---|---|
| ActionSheet | 上滑列表 |
| Dialog | 提示框 |
| Confirm | 输入类提示框 |
导航栏组件
| 接口名称 | 描述 |
|---|---|
| NavBar | 二级导航栏 |
| NavBarChild | 三级导航栏 |
| TabBar | 标签栏 |
| TabBarButton | 标签栏(文本) |
搜索组件
| 接口名称 | 描述 |
|---|---|
| SearchBar | 搜索框 |
筛选组件
| 组件名称 | 描述 |
|---|---|
| Dropdown | 下拉筛选 |
| Screen | 筛选漏斗 |