Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

More elegant application of antd #2840

Merged
merged 9 commits into from Sep 8, 2017
Merged

More elegant application of antd #2840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
923f366
Update .babelrc
starriv Aug 24, 2017
0a75053
Create index.js
starriv Aug 24, 2017
519e42b
Update index.js
starriv Aug 24, 2017
2225b59
Update index.js
starriv Aug 24, 2017
ee09cb5
Update README.md
starriv Aug 24, 2017
386e385
Update README.md
starriv Aug 24, 2017
c25fbf2
Update README.md
starriv Aug 24, 2017
55e6a72
Update README.md
starriv Aug 24, 2017
b9fc8eb
Fix linting errors
timneutkens Sep 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 9 additions & 6 deletions examples/with-ant-design/.babelrc
View file
Open in desktop
@@ -1,10 +1,13 @@
{
"presets": [
"next/babel"
],
"presets": ["next/babel"],
"plugins": [
["import", {
"libraryName": "antd"
}]
"transform-decorators-legacy",
[
"import",
{
"libraryName": "antd",
"style": false
}
]
]
}
14 changes: 14 additions & 0 deletions examples/with-ant-design/index.js
View file
Open in desktop
@@ -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 changes: 51 additions & 52 deletions examples/with-ant-design/pages/index.js
View file
Open in desktop
@@ -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>
)