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

Add ant design example (#1817)

Browse source 
* Add ant design example

* Reduce bundle size by importing modularized antd

* lock react version for warning
This commit is contained in:
偏右 2017-05-27 20:21:01 +08:00 committed by Tim Neutkens
parent 5187fcdb80
commit bd96b69049
4 changed files with 131 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
examples/with-ant-design/.babelrc Normal file
View file

@ -0,0 +1,10 @@
{
"presets": [
"next/babel"
],
"plugins": [
["import", {
"libraryName": "antd"
}]
]
}

29
examples/with-ant-design/README.md Normal file
View file

@ -0,0 +1,29 @@
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-ant-design)
# Ant Design example
## How to use
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-ant-design
cd with-ant-design
```
Install it and run:
```bash
npm install
npm run dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## The idea behind the example
This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.

18
examples/with-ant-design/package.json Normal file
View file

@ -0,0 +1,18 @@
{
"name": "with-ant-design",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"antd": "^2.9.3",
"babel-plugin-import": "^1.1.1",
"next": "latest",
"react": "~15.4.2",
"react-dom": "~15.4.2"
},
"author": "",
"license": "ISC"
}

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

@ -0,0 +1,74 @@
import Head from 'next/head'
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 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>
</LocaleProvider>
)