ant-design/components/drawer/demo/from-drawer.md

184 lines
5.5 KiB
Markdown
Raw Normal View History

2018-06-03 22:00:27 +08:00
---
2018-06-28 16:17:22 +08:00
order: 3
2018-06-03 22:00:27 +08:00
title:
2018-06-26 16:51:51 +08:00
zh-CN: 对象编辑
2018-06-27 10:50:37 +08:00
en-US: Edit item in drawer
2018-06-03 22:00:27 +08:00
---
## zh-CN
2018-06-26 16:51:51 +08:00
用于承载编辑相关操作,需要点击关闭按钮关闭。
2018-06-03 22:00:27 +08:00
## en-US
2018-06-27 10:50:37 +08:00
A drawer containing an editable form which needs to be collapsed by clicking the close button.
2018-06-03 22:00:27 +08:00
```jsx
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
const { Option } = Select;
class App extends React.Component {
state = { visible: false };
2018-06-28 16:17:22 +08:00
toogerHotjar = () => {
const hotjar = document.getElementById('_hj_feedback_container');
if (hotjar.style.display === 'none') {
hotjar.style.display = '';
} else {
hotjar.style.display = 'none';
}
};
2018-06-03 22:00:27 +08:00
showDrawer = () => {
2018-06-28 16:17:22 +08:00
this.toogerHotjar();
2018-06-03 22:00:27 +08:00
this.setState({
2018-06-28 16:17:22 +08:00
visible: true,
2018-06-03 22:00:27 +08:00
});
};
onClose = () => {
2018-06-28 16:17:22 +08:00
this.setState(
{
visible: false,
},
() => {
this.toogerHotjar();
}
);
2018-06-03 22:00:27 +08:00
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
Create
</Button>
<Drawer
title="Create"
width={720}
placement="right"
onClose={this.onClose}
2018-06-22 15:46:21 +08:00
maskClosable={false}
2018-06-03 22:00:27 +08:00
visible={this.state.visible}
>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col span={12}>
2018-06-06 22:55:29 +08:00
<Form.Item label="Name">
2018-06-03 22:00:27 +08:00
{getFieldDecorator('name', {
2018-06-06 22:55:29 +08:00
rules: [{ required: true, message: 'please enter user name' }],
})(<Input placeholder="please enter user name" />)}
2018-06-03 22:00:27 +08:00
</Form.Item>
</Col>
<Col span={12}>
2018-06-06 22:55:29 +08:00
<Form.Item label="Url">
2018-06-03 22:00:27 +08:00
{getFieldDecorator('url', {
2018-06-06 22:55:29 +08:00
rules: [{ required: true, message: 'please enter url' }],
2018-06-03 22:00:27 +08:00
})(
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
2018-06-06 22:55:29 +08:00
placeholder="please enter url"
2018-06-03 22:00:27 +08:00
/>
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
2018-06-06 22:55:29 +08:00
<Form.Item label="Owner">
2018-06-03 22:00:27 +08:00
{getFieldDecorator('owner', {
2018-06-06 22:55:29 +08:00
rules: [{ required: true, message: 'Please select an owner' }],
2018-06-03 22:00:27 +08:00
})(
2018-06-06 22:55:29 +08:00
<Select placeholder="Please select an owner">
<Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option>
2018-06-03 22:00:27 +08:00
</Select>
)}
</Form.Item>
</Col>
<Col span={12}>
2018-06-06 22:55:29 +08:00
<Form.Item label="Type">
2018-06-03 22:00:27 +08:00
{getFieldDecorator('type', {
2018-06-06 22:55:29 +08:00
rules: [{ required: true, message: 'Please choose the type' }],
2018-06-03 22:00:27 +08:00
})(
2018-06-06 22:55:29 +08:00
<Select placeholder="Please choose the type">
<Option value="private">Private</Option>
<Option value="public">Public</Option>
2018-06-03 22:00:27 +08:00
</Select>
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
2018-06-06 22:55:29 +08:00
<Form.Item label="Approver">
2018-06-03 22:00:27 +08:00
{getFieldDecorator('approver', {
2018-06-06 22:55:29 +08:00
rules: [{ required: true, message: 'Please choose the approver' }],
2018-06-03 22:00:27 +08:00
})(
2018-06-06 22:55:29 +08:00
<Select placeholder="Please choose the approver">
<Option value="jack">Jack Ma</Option>
<Option value="tom">Tom Liu</Option>
2018-06-03 22:00:27 +08:00
</Select>
)}
</Form.Item>
</Col>
<Col span={12}>
2018-06-06 22:55:29 +08:00
<Form.Item label="DateTime">
2018-06-03 22:00:27 +08:00
{getFieldDecorator('dateTime', {
2018-06-06 22:55:29 +08:00
rules: [{ required: true, message: 'Please choose the dateTime' }],
2018-06-03 22:00:27 +08:00
})(
<DatePicker.RangePicker
style={{ width: '100%' }}
getPopupContainer={trigger => trigger.parentNode}
/>
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
2018-06-22 15:46:21 +08:00
<Form.Item label="Description">
2018-06-06 22:55:29 +08:00
{getFieldDecorator('description', {
2018-06-19 17:42:25 +08:00
rules: [
{
required: true,
message: 'please enter url description',
},
],
2018-06-06 22:55:29 +08:00
})(<Input.TextArea rows={4} placeholder="please enter url description" />)}
2018-06-03 22:00:27 +08:00
</Form.Item>
</Col>
</Row>
</Form>
2018-06-19 17:42:25 +08:00
<div
style={{
position: 'absolute',
bottom: 0,
width: '100%',
borderTop: '1px solid #e8e8e8',
padding: '10px 16px',
textAlign: 'right',
left: 0,
borderRadius: '0 0 4px 4px',
}}
>
<Button
style={{
marginRight: 8,
}}
2018-06-26 17:17:06 +08:00
onClick={this.onClose}
2018-06-19 17:42:25 +08:00
>
取消
</Button>
<Button type="primary">提交</Button>
</div>
2018-06-03 22:00:27 +08:00
</Drawer>
</div>
);
}
}
const WarpApp = Form.create()(App);
ReactDOM.render(<WarpApp />, mountNode);
```