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

Update with-ant-design example (#5141)

Browse source 
There is no need to wrap every page with a component when you can use the custom document.
This commit is contained in:
Rafael Almeida 2018-09-12 12:24:37 -03:00 committed by Tim Neutkens
parent b79bbecb13
commit 5d147a82c4
3 changed files with 75 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +0,0 @@
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='/_next/static/style.css' />
</Head>
<style jsx global>{`
body {
}
`}</style>
{children}
</div>

19
examples/with-ant-design/pages/_document.js Normal file
View file

@ -0,0 +1,19 @@
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render () {
return (
<html>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta charSet='utf-8' />
<link rel='stylesheet' href='/_next/static/style.css' />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

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

@ -1,70 +1,67 @@
import Layout from '../index.js'
import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button } from 'antd' import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button } from 'antd'
const FormItem = Form.Item const FormItem = Form.Item
const Option = Select.Option const Option = Select.Option
export default () => ( export default () => (
<Layout> <div style={{ marginTop: 100 }}>
<div style={{ marginTop: 100 }}> <Form layout='horizontal'>
<Form layout='horizontal'> <FormItem
<FormItem label='Input Number'
label='Input Number' labelCol={{ span: 8 }}
labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}
wrapperCol={{ span: 8 }} >
> <InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' />
<InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' /> <a href='#'>Link</a>
<a href='#'>Link</a> </FormItem>
</FormItem>
<FormItem <FormItem
label='Switch' label='Switch'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<Switch defaultChecked name='switch' /> <Switch defaultChecked name='switch' />
</FormItem> </FormItem>
<FormItem <FormItem
label='Slider' label='Slider'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<Slider defaultValue={70} /> <Slider defaultValue={70} />
</FormItem> </FormItem>
<FormItem <FormItem
label='Select' label='Select'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'> <Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'>
<Option value='jack'>jack</Option> <Option value='jack'>jack</Option>
<Option value='lucy'>lucy</Option> <Option value='lucy'>lucy</Option>
<Option value='disabled' disabled>disabled</Option> <Option value='disabled' disabled>disabled</Option>
<Option value='yiminghe'>yiminghe</Option> <Option value='yiminghe'>yiminghe</Option>
</Select> </Select>
</FormItem> </FormItem>
<FormItem <FormItem
label='DatePicker' label='DatePicker'
labelCol={{ span: 8 }} labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }} wrapperCol={{ span: 8 }}
> >
<DatePicker name='startDate' /> <DatePicker name='startDate' />
</FormItem> </FormItem>
<FormItem <FormItem
style={{ marginTop: 48 }} style={{ marginTop: 48 }}
wrapperCol={{ span: 8, offset: 8 }} wrapperCol={{ span: 8, offset: 8 }}
> >
<Button size='large' type='primary' htmlType='submit'> <Button size='large' type='primary' htmlType='submit'>
OK OK
</Button> </Button>
<Button size='large' style={{ marginLeft: 8 }}> <Button size='large' style={{ marginLeft: 8 }}>
Cancel Cancel
</Button> </Button>
</FormItem> </FormItem>
</Form> </Form>
</div> </div>
</Layout>
) )