weui-react-component
v1.0.5
Published
WeUI - React Component
Downloads
4
Readme
WeUI React Component
非官方
https://live-demo.github.io/weui-react/qrcode.png
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),可以通过两种方式引入:
- 直接引入相应的组件:
import { PrimaryButton, WarningButton, DefaultButton } from "weui-react-component";
...
<PrimaryButton>这是一个 primary 按钮</PrimaryButton>
<WarningButton>这是一个 warning 按钮</WarningButton>
<DefaultButton>这是一个 default 按钮</DefaultButton>
...
- 通过设置 Button 组件的 is 属性(默认 primary-btn):
import { Button } from "weui-react-component";
...
<Button>这是一个 primary 按钮</Button>
<Button is="primary-btn">这是一个 primary 按钮</Button>
<Button is="warning-btn">这是一个 warning 按钮</Button>
<Button is="default-btn">这是一个 default 按钮</Button>
...
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
import { Cells } from "weui-react-component";
...
<Cells>
<Cell>这是一个说明</Cell>
...
<Cell>这是一个说明</Cell>
</Cells>
Cell 组件
import { Cell } from "weui-react-component";
...
<Cell>这是一个说明</Cell>
props:
header
: {string | ReactElement}footer
: {string | ReactElement}
Link 组件
import { Link } from "weui-react-component";
...
<Link href="...">这是一个链接</Link>
...
like as <a href="...">这是一个链接</a>
props:
header
: {string | ReactElement}footer
: {string | ReactElement}
Input 组件
import { Input } from "weui-react-component";
...
<Input label="Description" />
...
like as <label>Description</label><input type="text">
props:
label
: {string}
Checkbox 组件
import { Checkbox } from "weui-react-component";
...
<Checkbox>Description</Checkbox>
...
like as <label>Description></label><input type="checkbox">
props:
label
: {string}checked
: {boolean}defaultChecked
: {boolean}
Radio 组件
import { Radio } from "weui-react-component";
...
<Radio>Description</Radio>
...
like as <label>Description></label><input type="radio">
Select 组件
import { Select } from "weui-react-component";
...
<Select options={["opt1", "opt2", "opt3"]}>Description</Select>
...
like as
<label>Description</label>
<select>
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
</select>
props:
header
: {string | ReactElement}label
: {string}
Switch 组件
import { Switch } from "weui-react-component";
...
<Switch>Description</Switch>
...
props:
checked
: {boolean}defaultChecked
: {boolean}
Textarea 组件
import { Textarea } from "weui-react-component";
...
<Textarea value="..." />
...
props:
value
: {string}
Tips 组件
import { Tips } from "weui-react-component";
...
<Tips>tips</Tips>
...
Toast
Toast 组件
import { Toast } from "weui-react-component";
...
<Toast icon={...}>已完成</Toast>
props:
open
: {boolean}
Loading 组件
import { Loading } from "weui-react-component";
...
<Loading>加载中...</Loading>
...
props:
open
: {boolean}
Dialog
Alert 组件
import { Alert } from "weui-react-component";
...
<Alert title="这是标题" onConfirm={...}>内容...</Alert>
...
props:
title
: {string}open
: {boolean}onConfirm
: {Function}
Confirm 组件
import { Confirm } from "weui-react-component";
...
<Confirm title="这是标题" onConfirm={...} onCancel={...}>内容...</Confirm>
...
props:
title
: {string}open
: {boolean}onConfirm
: {Function}onCancel
: {Function}
Progress
import { Progress } from "weui-react-component";
...
<Progress value={0} max={100} onCancel={...} />
...
props:
value
: {number}max
: {number}onCancel
: {Function}canceled
: {boolean}
Msg Page
import { Msg } from "weui-react-component";
...
<Msg title="这是标题" icon={<img src="..." alt="图标" />}
onConfirm={...}
onCancel={...}>
<p>内容详情...</p>
</Msg>
...
props:
title
: {string}icon
: {ReactElement}more
: {string} - URLonConfirm
: {Function}onCancel
: {Function}
Article
import { Article } from "weui-react-component";
...
<Article>
<h1>大标题</h1>
<section>
<h2>章标题</h2>
<section>
<h3>1.1 节标题</h3>
<p>xxxxxxxxxxx</p>
</section>
</section>
</Article>
...
ActionSheet
import { ActionSheet } from "weui-react-component";
...
<ActionSheet items=["Item1", "Item2", "Item3"] />
...
props:
items
: {string[]}onClick
: {(() => Promise<any>, () => Promise) => void
}onClick = function (getValue, cleanup) { getValue().then(function (val) { // val return cleanup(); }).then(function () { // done }); }
onCancel
: {(() => Promise) => void
}onCancel = function (cleanup) { cleanup().then(function () { // done }); }
Icons
import { Icon } from "weui-react-component";
...
<Icon type="success" />
...
props:
type
: {string} - one of (blank, circle, download, info, safe-success, safe-warning, success, success-circle, success-no-circle, waiting, info-circle, cancle)
Develop
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 引入脚本来处理。