mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
139 lines
4.1 KiB
TypeScript
139 lines
4.1 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { PlusOutlined } from '@ant-design/icons';
|
||
|
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'antd';
|
||
|
|
||
|
const { Option } = Select;
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [open, setOpen] = useState(false);
|
||
|
|
||
|
const showDrawer = () => {
|
||
|
setOpen(true);
|
||
|
};
|
||
|
|
||
|
const onClose = () => {
|
||
|
setOpen(false);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
|
||
|
New account
|
||
|
</Button>
|
||
|
<Drawer
|
||
|
title="Create a new account"
|
||
|
width={720}
|
||
|
onClose={onClose}
|
||
|
open={open}
|
||
|
bodyStyle={{ paddingBottom: 80 }}
|
||
|
extra={
|
||
|
<Space>
|
||
|
<Button onClick={onClose}>Cancel</Button>
|
||
|
<Button onClick={onClose} type="primary">
|
||
|
Submit
|
||
|
</Button>
|
||
|
</Space>
|
||
|
}
|
||
|
>
|
||
|
<Form layout="vertical" hideRequiredMark>
|
||
|
<Row gutter={16}>
|
||
|
<Col span={12}>
|
||
|
<Form.Item
|
||
|
name="name"
|
||
|
label="Name"
|
||
|
rules={[{ required: true, message: 'Please enter user name' }]}
|
||
|
>
|
||
|
<Input placeholder="Please enter user name" />
|
||
|
</Form.Item>
|
||
|
</Col>
|
||
|
<Col span={12}>
|
||
|
<Form.Item
|
||
|
name="url"
|
||
|
label="Url"
|
||
|
rules={[{ required: true, message: 'Please enter url' }]}
|
||
|
>
|
||
|
<Input
|
||
|
style={{ width: '100%' }}
|
||
|
addonBefore="http://"
|
||
|
addonAfter=".com"
|
||
|
placeholder="Please enter url"
|
||
|
/>
|
||
|
</Form.Item>
|
||
|
</Col>
|
||
|
</Row>
|
||
|
<Row gutter={16}>
|
||
|
<Col span={12}>
|
||
|
<Form.Item
|
||
|
name="owner"
|
||
|
label="Owner"
|
||
|
rules={[{ required: true, message: 'Please select an owner' }]}
|
||
|
>
|
||
|
<Select placeholder="Please select an owner">
|
||
|
<Option value="xiao">Xiaoxiao Fu</Option>
|
||
|
<Option value="mao">Maomao Zhou</Option>
|
||
|
</Select>
|
||
|
</Form.Item>
|
||
|
</Col>
|
||
|
<Col span={12}>
|
||
|
<Form.Item
|
||
|
name="type"
|
||
|
label="Type"
|
||
|
rules={[{ required: true, message: 'Please choose the type' }]}
|
||
|
>
|
||
|
<Select placeholder="Please choose the type">
|
||
|
<Option value="private">Private</Option>
|
||
|
<Option value="public">Public</Option>
|
||
|
</Select>
|
||
|
</Form.Item>
|
||
|
</Col>
|
||
|
</Row>
|
||
|
<Row gutter={16}>
|
||
|
<Col span={12}>
|
||
|
<Form.Item
|
||
|
name="approver"
|
||
|
label="Approver"
|
||
|
rules={[{ required: true, message: 'Please choose the approver' }]}
|
||
|
>
|
||
|
<Select placeholder="Please choose the approver">
|
||
|
<Option value="jack">Jack Ma</Option>
|
||
|
<Option value="tom">Tom Liu</Option>
|
||
|
</Select>
|
||
|
</Form.Item>
|
||
|
</Col>
|
||
|
<Col span={12}>
|
||
|
<Form.Item
|
||
|
name="dateTime"
|
||
|
label="DateTime"
|
||
|
rules={[{ required: true, message: 'Please choose the dateTime' }]}
|
||
|
>
|
||
|
<DatePicker.RangePicker
|
||
|
style={{ width: '100%' }}
|
||
|
getPopupContainer={trigger => trigger.parentElement!}
|
||
|
/>
|
||
|
</Form.Item>
|
||
|
</Col>
|
||
|
</Row>
|
||
|
<Row gutter={16}>
|
||
|
<Col span={24}>
|
||
|
<Form.Item
|
||
|
name="description"
|
||
|
label="Description"
|
||
|
rules={[
|
||
|
{
|
||
|
required: true,
|
||
|
message: 'please enter url description',
|
||
|
},
|
||
|
]}
|
||
|
>
|
||
|
<Input.TextArea rows={4} placeholder="please enter url description" />
|
||
|
</Form.Item>
|
||
|
</Col>
|
||
|
</Row>
|
||
|
</Form>
|
||
|
</Drawer>
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|