mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
77d5f36eea
Hey @timneutkens I've updated this example a bit. - Fixed `/asserts` spelling to `/assets`. - Removed the `/assets/styles.less` as importing this caused the entire ant-design css sheet to be loaded, now only the React components imported will have their styles loaded via the babel plugin which was already configured. Resulted in dropping the CSS for this example from ~630kb to ~220kb. - Removed `index.js` as it's not needed.
68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button } from 'antd'
|
|
|
|
const FormItem = Form.Item
|
|
const Option = Select.Option
|
|
|
|
export default () => (
|
|
<div style={{ marginTop: 100 }}>
|
|
<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' />
|
|
<a href='#'>Link</a>
|
|
</FormItem>
|
|
|
|
<FormItem
|
|
label='Switch'
|
|
labelCol={{ span: 8 }}
|
|
wrapperCol={{ span: 8 }}
|
|
>
|
|
<Switch defaultChecked name='switch' />
|
|
</FormItem>
|
|
|
|
<FormItem
|
|
label='Slider'
|
|
labelCol={{ span: 8 }}
|
|
wrapperCol={{ span: 8 }}
|
|
>
|
|
<Slider defaultValue={70} />
|
|
</FormItem>
|
|
|
|
<FormItem
|
|
label='Select'
|
|
labelCol={{ span: 8 }}
|
|
wrapperCol={{ span: 8 }}
|
|
>
|
|
<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>
|
|
|
|
<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>
|
|
)
|