terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

More elegant application of antd (#2840)

Browse source 
* 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
This commit is contained in:
starriv 2017-09-09 05:13:52 +08:00 committed by Tim Neutkens
parent aa09625744
commit ace748dcfe
3 changed files with 74 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
examples/with-ant-design/.babelrc
View file

@ -1,10 +1,13 @@
{
"presets": [
"next/babel"
],
"presets": ["next/babel"],
"plugins": [
["import", {
"libraryName": "antd"
}]
"transform-decorators-legacy",
[
"import",
{
"libraryName": "antd",
"style": false
}
]
]
}

14
examples/with-ant-design/index.js Normal file
View file

@ -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>

103
examples/with-ant-design/pages/index.js
View file

@ -1,4 +1,4 @@
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'
@ -6,69 +6,68 @@ 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>
)