2020-05-02 06:59:56 +02:00
|
|
|
import React from 'react'
|
2020-05-07 23:29:42 +02:00
|
|
|
import { Form, Select, InputNumber, Switch, Slider, Button } from 'antd'
|
|
|
|
|
|
|
|
// Custom DatePicker that uses Day.js instead of Moment.js
|
|
|
|
import DatePicker from '../components/DatePicker'
|
2017-05-27 14:21:01 +02:00
|
|
|
|
2020-05-02 06:59:56 +02:00
|
|
|
import { SmileFilled } from '@ant-design/icons'
|
|
|
|
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
2017-05-27 14:21:01 +02:00
|
|
|
const FormItem = Form.Item
|
|
|
|
const Option = Select.Option
|
|
|
|
|
2020-05-02 06:59:56 +02:00
|
|
|
const content = {
|
|
|
|
marginTop: '100px',
|
|
|
|
}
|
|
|
|
|
2017-05-27 14:21:01 +02:00
|
|
|
export default () => (
|
2020-05-02 06:59:56 +02:00
|
|
|
<div style={content}>
|
|
|
|
<div className="text-center mb-5">
|
|
|
|
<Link href="#">
|
|
|
|
<a className="logo mr-0">
|
|
|
|
<SmileFilled size={48} strokeWidth={1} />
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
<p className="mb-0 mt-3 text-disabled">Welcome to the world !</p>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<Form layout="horizontal">
|
|
|
|
<FormItem
|
|
|
|
label="Input Number"
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
wrapperCol={{ span: 8 }}
|
|
|
|
>
|
|
|
|
<InputNumber
|
|
|
|
size="large"
|
|
|
|
min={1}
|
|
|
|
max={10}
|
|
|
|
style={{ width: 100 }}
|
|
|
|
defaultValue={3}
|
|
|
|
name="inputNumber"
|
|
|
|
/>
|
|
|
|
</FormItem>
|
2017-05-27 14:21:01 +02:00
|
|
|
|
2020-05-02 06:59:56 +02:00
|
|
|
<FormItem
|
|
|
|
label="Switch"
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
wrapperCol={{ span: 8 }}
|
|
|
|
>
|
|
|
|
<Switch defaultChecked name="switch" />
|
|
|
|
</FormItem>
|
2017-05-27 14:21:01 +02:00
|
|
|
|
2020-05-02 06:59:56 +02:00
|
|
|
<FormItem
|
|
|
|
label="Slider"
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
wrapperCol={{ span: 8 }}
|
|
|
|
>
|
|
|
|
<Slider defaultValue={70} />
|
|
|
|
</FormItem>
|
2017-05-27 14:21:01 +02:00
|
|
|
|
2020-05-02 06:59:56 +02:00
|
|
|
<FormItem
|
|
|
|
label="Select"
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
wrapperCol={{ span: 8 }}
|
2018-12-17 17:34:32 +01:00
|
|
|
>
|
2020-05-02 06:59:56 +02:00
|
|
|
<Select
|
|
|
|
size="large"
|
|
|
|
defaultValue="lucy"
|
|
|
|
style={{ width: 192 }}
|
|
|
|
name="select"
|
|
|
|
>
|
|
|
|
<Option value="jack">jack</Option>
|
|
|
|
<Option value="lucy">lucy</Option>
|
|
|
|
<Option value="disabled" disabled>
|
|
|
|
disabled
|
|
|
|
</Option>
|
|
|
|
<Option value="yiminghe">yiminghe</Option>
|
|
|
|
</Select>
|
|
|
|
</FormItem>
|
2017-05-27 14:21:01 +02:00
|
|
|
|
2020-05-02 06:59:56 +02:00
|
|
|
<FormItem
|
|
|
|
label="DatePicker"
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
wrapperCol={{ span: 8 }}
|
|
|
|
>
|
|
|
|
<DatePicker name="startDate" />
|
|
|
|
</FormItem>
|
|
|
|
<FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
|
|
|
|
<Button size="large" type="primary" htmlType="submit">
|
|
|
|
OK
|
|
|
|
</Button>
|
|
|
|
<Button size="large" style={{ marginLeft: 8 }}>
|
|
|
|
Cancel
|
|
|
|
</Button>
|
|
|
|
</FormItem>
|
|
|
|
</Form>
|
|
|
|
</div>
|
2018-09-12 17:24:37 +02:00
|
|
|
</div>
|
2017-05-27 14:21:01 +02:00
|
|
|
)
|