diff --git a/examples/with-ant-design/.babelrc b/examples/with-ant-design/.babelrc new file mode 100644 index 00000000..d3c9e3f8 --- /dev/null +++ b/examples/with-ant-design/.babelrc @@ -0,0 +1,10 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + ["import", { + "libraryName": "antd" + }] + ] +} diff --git a/examples/with-ant-design/README.md b/examples/with-ant-design/README.md new file mode 100644 index 00000000..efa5cf4a --- /dev/null +++ b/examples/with-ant-design/README.md @@ -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. diff --git a/examples/with-ant-design/package.json b/examples/with-ant-design/package.json new file mode 100644 index 00000000..528a2a0e --- /dev/null +++ b/examples/with-ant-design/package.json @@ -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" +} diff --git a/examples/with-ant-design/pages/index.js b/examples/with-ant-design/pages/index.js new file mode 100644 index 00000000..bad7fb6b --- /dev/null +++ b/examples/with-ant-design/pages/index.js @@ -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 () => ( + +
+ + + +
+ + + Link + + + + + + + + + + + + + + + + + + + + + +
+
+ +)