Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
doc(Input): Add example.
  • Loading branch information
jaywcjlove committed Oct 24, 2020
1 parent fc12091 commit 146da64
Showing 1 changed file with 74 additions and 6 deletions.
80 changes: 74 additions & 6 deletions packages/react-input/README.md
Expand Up @@ -12,7 +12,7 @@ import Input from '@uiw/react-input';
### 基础用法

<!--DemoStart,bgWhite,codePen-->
```js
```jsx
import { Input } from 'uiw';

const Demo = () => (
Expand All @@ -24,10 +24,80 @@ ReactDOM.render(<Demo />, _mount_);
```
<!--End-->

### Form 中使用 Input

<!--DemoStart,bgWhite,codePen-->
```jsx
import { Form, Input, Row, Col, Button, Notify } from 'uiw';

const Demo = () => (
<Form
onChange={({ initial, current }) => { }}
onSubmitError={(error) => {
console.log('error:', error)
return error && error.filed ? { ...error.filed } : null;
}}
onSubmit={({initial, current}) => {
if (current.input && current.input.length > 3) {
Notify.success({
title: '提交成功!',
description: `填写:【${current.input.toString()}】!`
});
} else {
Notify.error({ title: '提交失败!', description: '必须长度超过 3 个字符!' });
}
const ErrObj = {};
if (current.input && current.input.length < 4) {
ErrObj.input = '😆 必须长度超过 3 个字符!';
}
if(Object.keys(ErrObj).length > 0) {
const err = new Error();
err.filed = ErrObj;
throw err;
}
}}
fields={{
input: {
value: 'www',
label: '请输入内容',
help: '必须长度超过 3 个字符!',
validator: (value = '') => value.length < 4 ? '必填选项!' : null,
children: <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />,
},
}}
>
{({ fields, state, canSubmit }) => {
return (
<div>
<Row>
<Col>{fields.input}</Col>
</Row>
<Row>
<Col>
<Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
</Col>
</Row>
<Row>
<Col>
<pre style={{ padding: 10, marginTop: 10 }}>
{JSON.stringify(state.current, null, 2)}
</pre>
</Col>
</Row>
</div>
);
}}
</Form>
);

ReactDOM.render(<Demo />, _mount_);
```
<!--End-->

### 插入图标

<!--DemoStart,bgWhite,codePen-->
```js
```jsx
import { Input, Row, Col } from 'uiw';

const stylItem = { margin: 20 };
Expand Down Expand Up @@ -58,7 +128,7 @@ ReactDOM.render(<Demo />, _mount_);
向后面插入 [`Button`](#/components/button) 或者 [`Tag`](#/components/tag)

<!--DemoStart,bgWhite,codePen-->
```js
```jsx
import { Input, Row, Col, Button, Tag } from 'uiw';

const Demo = () => (
Expand Down Expand Up @@ -99,11 +169,10 @@ ReactDOM.render(<Demo />, _mount_);
```
<!--End-->


### 输入框尺寸

<!--DemoStart,bgWhite,codePen-->
```js
```jsx
import { Input, Row, Col, Tag, Button } from 'uiw';

const Demo = () => (
Expand Down Expand Up @@ -226,7 +295,6 @@ ReactDOM.render(<Demo />, _mount_);
```
<!--End-->


### 密码输入框

<!--DemoStart,bgWhite,codePen-->
Expand Down

0 comments on commit 146da64

Please sign in to comment.