Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zbinlin/weui-react
https://github.com/zbinlin/weui-react
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/zbinlin/weui-react
- Owner: zbinlin
- Created: 2015-11-12T15:53:05.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2015-12-24T07:10:21.000Z (almost 9 years ago)
- Last Synced: 2024-10-03T15:18:56.694Z (about 1 month ago)
- Language: CSS
- Size: 133 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WeUI React Component
**非官方**
## Usage
```
npm install --save weui-react-component
```
**注意：**
由于在 `weui-react-component` 里使用了 `Promise`，因此在不支持 ES6 Promise 的平
台需要引入 Promise 的 polyfill（如 es6-promise 或 babel-polyfill）
## Components
### Button
Button 目录有三种类型的组件：PrimaryButton（primary-btn）、WarningButton（warning-btn）、
DefaultButton（default-btn），可以通过两种方式引入：
1. 直接引入相应的组件：
```js
import { PrimaryButton, WarningButton, DefaultButton } from "weui-react-component";
...
这是一个 primary 按钮
这是一个 warning 按钮
这是一个 default 按钮
...
```
2. 通过设置 Button 组件的 is 属性（默认 primary-btn）：
```js
import { Button } from "weui-react-component";
...
这是一个 primary 按钮
这是一个 primary 按钮
这是一个 warning 按钮
这是一个 default 按钮
...
```
**props:**
* `outline`: {boolean} - 设置该属性后，其背景颜色将变成透明
* `size`: {string}
- `small` - 小按钮（inline-block）
* `disabled`: {boolean} - 设置该属性后，其按钮变灰
### Cell
在 Cell 这个类别里，有以下这些组件：
Cells（CellGroup）、Cell、Link、Input、Checkbox、Radio、Select、Switch、Textarea、Tips，
除了 Tips，其他的组件都应该在 Cells 组件里面。
#### Cells 组件
alias `CellGroup`
```js
import { Cells } from "weui-react-component";
...
这是一个说明
...
这是一个说明
```
#### Cell 组件
```js
import { Cell } from "weui-react-component";
...
这是一个说明
```
**props:**
* `header`: {string | ReactElement}
* `footer`: {string | ReactElement}
#### Link 组件
```js
import { Link } from "weui-react-component";
...
这是一个链接
...
```
like as `这是一个链接`
* `header`: {string | ReactElement}
* `footer`: {string | ReactElement}
#### Input 组件
```js
import { Input } from "weui-react-component";
...
...
```
like as `Description`
**props:**
* `label`: {string}
#### Checkbox 组件
```js
import { Checkbox } from "weui-react-component";
...
Description
...
```
like as `Description>`
**props:**
* `label`: {string}
* `checked`: {boolean}
* `defaultChecked`: {boolean}
#### Radio 组件
```js
import { Radio } from "weui-react-component";
...
Description
...
```
like as `Description>`
#### Select 组件
```js
import { Select } from "weui-react-component";
...
Description
...
```
like as
```html
Description
opt1
opt2
opt3
```
**props**
* `header`: {string | ReactElement}
* `label`: {string}
#### Switch 组件
```js
import { Switch } from "weui-react-component";
...
Description
...
```
**props:**
* `checked`: {boolean}
* `defaultChecked`: {boolean}
#### Textarea 组件
```js
import { Textarea } from "weui-react-component";
...
...
```
**props:**
* `value`: {string}
#### Tips 组件
```js
import { Tips } from "weui-react-component";
...
tips
...
```
### Toast
#### Toast 组件
```js
import { Toast } from "weui-react-component";
...
已完成
```
**props:**
* `open`: {boolean}
#### Loading 组件
```js
import { Loading } from "weui-react-component";
...
加载中...
...
```
**props:**
* `open`: {boolean}
### Dialog
#### Alert 组件
```js
import { Alert } from "weui-react-component";
...
内容...
...
```
**props:**
* `title`: {string}
* `open`: {boolean}
* `onConfirm`: {Function}
#### Confirm 组件
```js
import { Confirm } from "weui-react-component";
...
内容...
...
```
**props**
* `title`: {string}
* `open`: {boolean}
* `onConfirm`: {Function}
* `onCancel`: {Function}
### Progress
```js
import { Progress } from "weui-react-component";
...
...
```
**props:**
* `value`: {number}
* `max`: {number}
* `onCancel`: {Function}
* `canceled`: {boolean}
### Msg Page
```js
import { Msg } from "weui-react-component";
...
}
onConfirm={...}
onCancel={...}>
内容详情...
...
```
**props:**
* `title`: {string}
* `icon`: {ReactElement}
* `more`: {string} - URL
* `onConfirm`: {Function}
* `onCancel`: {Function}
### Article
```js
import { Article } from "weui-react-component";
...
大标题
章标题
1.1 节标题
xxxxxxxxxxx
...
```
### ActionSheet
```js
import { ActionSheet } from "weui-react-component";
...
...
```
**props:**
* `items`: {string[]}
* `onClick`: {`(() => Promise, () => Promise) => void`}
```js
onClick = function (getValue, cleanup) {
getValue().then(function (val) {
// val
return cleanup();
}).then(function () {
// done
});
}
```
* `onCancel`: {`(() => Promise) => void`}
```js
onCancel = function (cleanup) {
cleanup().then(function () {
// done
});
}
```
### Icons
```js
import { Icon } from "weui-react-component";
...
...
```
**props:**
* `type`: {string} - one of (blank, circle, download, info, safe-success, safe-warning,
success, success-circle, success-no-circle, waiting, info-circle, cancle)
## Develop
``` bash
git clone https://github.com/zbinlin/weui-react
cd weui-react
npm install
npm run build-lib && npm run build-watch &
npm run serve
```
### Notes
* jest 里需要测试的组件需要以 require 来引入，不能使用 import
* jest 的 require 被重写了，导致通过 require.extensions 的 hook 方式失效，这里
可通过 jest 提供的 scriptPreprocessor 引入脚本来处理。