Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
More elegant application of antd (#2840)
* Update .babelrc * Create index.js * Update index.js * Update index.js * Update README.md * Update README.md * Update README.md * Update README.md * Fix linting errors
- Loading branch information
1 parent
aa09625
commit ace748d
Showing
3 changed files
with
74 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,13 @@ | ||
| { | ||
| "presets": [ | ||
| "next/babel" | ||
| ], | ||
| "presets": ["next/babel"], | ||
| "plugins": [ | ||
| ["import", { | ||
| "libraryName": "antd" | ||
| }] | ||
| "transform-decorators-legacy", | ||
| [ | ||
| "import", | ||
| { | ||
| "libraryName": "antd", | ||
| "style": false | ||
| } | ||
| ] | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import Head from 'next/head' | ||
| export default ({ children }) => | ||
| <div> | ||
| <Head> | ||
| <meta name='viewport' content='width=device-width, initial-scale=1' /> | ||
| <meta charSet='utf-8' /> | ||
| <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/antd/2.9.3/antd.min.css' /> | ||
| </Head> | ||
| <style jsx global>{` | ||
| body { | ||
| } | ||
| `}</style> | ||
| {children} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,73 @@ | ||
| import Head from 'next/head' | ||
| import Layout from '../index.js' | ||
| import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, LocaleProvider } from 'antd' | ||
| import enUS from 'antd/lib/locale-provider/en_US' | ||
|
|
||
| const FormItem = Form.Item | ||
| const Option = Select.Option | ||
|
|
||
| export default () => ( | ||
| <LocaleProvider locale={enUS}> | ||
| <div style={{ marginTop: 100 }}> | ||
| <Head> | ||
| <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/antd/2.9.3/antd.min.css' /> | ||
| </Head> | ||
| <Form layout='horizontal'> | ||
| <FormItem | ||
| label='Input Number' | ||
| labelCol={{ span: 8 }} | ||
| wrapperCol={{ span: 8 }} | ||
| <Layout> | ||
| <LocaleProvider locale={enUS}> | ||
| <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> | ||
| <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 }} | ||
| <FormItem | ||
| label='Switch' | ||
| labelCol={{ span: 8 }} | ||
| wrapperCol={{ span: 8 }} | ||
| > | ||
| <Switch defaultChecked name='switch' /> | ||
| </FormItem> | ||
| <Switch defaultChecked name='switch' /> | ||
| </FormItem> | ||
|
|
||
| <FormItem | ||
| label='Slider' | ||
| labelCol={{ span: 8 }} | ||
| wrapperCol={{ span: 8 }} | ||
| <FormItem | ||
| label='Slider' | ||
| labelCol={{ span: 8 }} | ||
| wrapperCol={{ span: 8 }} | ||
| > | ||
| <Slider defaultValue={70} /> | ||
| </FormItem> | ||
| <Slider defaultValue={70} /> | ||
| </FormItem> | ||
|
|
||
| <FormItem | ||
| label='Select' | ||
| labelCol={{ span: 8 }} | ||
| wrapperCol={{ span: 8 }} | ||
| <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> | ||
| <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 }} | ||
| <FormItem | ||
| label='DatePicker' | ||
| labelCol={{ span: 8 }} | ||
| wrapperCol={{ span: 8 }} | ||
| > | ||
| <DatePicker name='startDate' /> | ||
| </FormItem> | ||
| <FormItem | ||
| style={{ marginTop: 48 }} | ||
| wrapperCol={{ span: 8, offset: 8 }} | ||
| <DatePicker name='startDate' /> | ||
| </FormItem> | ||
| <FormItem | ||
| style={{ marginTop: 48 }} | ||
| wrapperCol={{ span: 8, offset: 8 }} | ||
| > | ||
| <Button size='large' type='primary' htmlType='submit'> | ||
| <Button size='large' type='primary' htmlType='submit'> | ||
| OK | ||
| </Button> | ||
| <Button size='large' style={{ marginLeft: 8 }}> | ||
| <Button size='large' style={{ marginLeft: 8 }}> | ||
| Cancel | ||
| </Button> | ||
| </FormItem> | ||
| </Form> | ||
| </div> | ||
| </LocaleProvider> | ||
| </FormItem> | ||
| </Form> | ||
| </div> | ||
| </LocaleProvider> | ||
| </Layout> | ||
| ) |