From 631e6c7ebaff81f1231ba709dabc3e0143a57d7b Mon Sep 17 00:00:00 2001 From: Giau Tran Minh Date: Thu, 7 Jun 2018 18:14:27 +0700 Subject: [PATCH] Added example for Ant Design with LESS (#4520) * Added example for Ant Design with LESS * Fix ESLINT --- examples/with-ant-design-less/.babelrc | 13 ++++ examples/with-ant-design-less/README.md | 44 ++++++++++++ .../asserts/antd-custom.less | 4 ++ .../with-ant-design-less/asserts/styles.less | 2 + examples/with-ant-design-less/index.js | 17 +++++ examples/with-ant-design-less/next.config.js | 8 +++ examples/with-ant-design-less/package.json | 22 ++++++ examples/with-ant-design-less/pages/index.js | 70 +++++++++++++++++++ 8 files changed, 180 insertions(+) create mode 100644 examples/with-ant-design-less/.babelrc create mode 100644 examples/with-ant-design-less/README.md create mode 100644 examples/with-ant-design-less/asserts/antd-custom.less create mode 100644 examples/with-ant-design-less/asserts/styles.less create mode 100644 examples/with-ant-design-less/index.js create mode 100644 examples/with-ant-design-less/next.config.js create mode 100644 examples/with-ant-design-less/package.json create mode 100644 examples/with-ant-design-less/pages/index.js diff --git a/examples/with-ant-design-less/.babelrc b/examples/with-ant-design-less/.babelrc new file mode 100644 index 00000000..5da018ea --- /dev/null +++ b/examples/with-ant-design-less/.babelrc @@ -0,0 +1,13 @@ +{ + "presets": ["next/babel"], + "plugins": [ + "transform-decorators-legacy", + [ + "import", + { + "libraryName": "antd", + "style": "less" + } + ] + ] +} diff --git a/examples/with-ant-design-less/README.md b/examples/with-ant-design-less/README.md new file mode 100644 index 00000000..34da6437 --- /dev/null +++ b/examples/with-ant-design-less/README.md @@ -0,0 +1,44 @@ +[![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-less) + +# Ant Design example + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: + +```bash +npx create-next-app --example with-ant-design-less with-ant-design-app +# or +yarn create next-app --example with-ant-design-less with-ant-design-app +``` + +### Download manually + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ant-design-less +cd with-ant-design-less +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn 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-less/asserts/antd-custom.less b/examples/with-ant-design-less/asserts/antd-custom.less new file mode 100644 index 00000000..027ab897 --- /dev/null +++ b/examples/with-ant-design-less/asserts/antd-custom.less @@ -0,0 +1,4 @@ +@primary-color: #1DA57A; + +@layout-header-height: 40px; +@border-radius-base: 0px; diff --git a/examples/with-ant-design-less/asserts/styles.less b/examples/with-ant-design-less/asserts/styles.less new file mode 100644 index 00000000..e2773cf9 --- /dev/null +++ b/examples/with-ant-design-less/asserts/styles.less @@ -0,0 +1,2 @@ +@import "~antd/dist/antd.less"; +@import "./antd-custom.less"; diff --git a/examples/with-ant-design-less/index.js b/examples/with-ant-design-less/index.js new file mode 100644 index 00000000..e462540b --- /dev/null +++ b/examples/with-ant-design-less/index.js @@ -0,0 +1,17 @@ +import Head from 'next/head' + +import './asserts/styles.less' + +export default ({ children }) => +
+ + + + + + + {children} +
diff --git a/examples/with-ant-design-less/next.config.js b/examples/with-ant-design-less/next.config.js new file mode 100644 index 00000000..a7fd69a5 --- /dev/null +++ b/examples/with-ant-design-less/next.config.js @@ -0,0 +1,8 @@ +/* eslint-disable */ +const withLess = require('@zeit/next-less') + +module.exports = withLess({ + lessLoaderOptions: { + javascriptEnabled: true, + }, +}) diff --git a/examples/with-ant-design-less/package.json b/examples/with-ant-design-less/package.json new file mode 100644 index 00000000..6f116e03 --- /dev/null +++ b/examples/with-ant-design-less/package.json @@ -0,0 +1,22 @@ +{ + "name": "with-ant-design-less", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@zeit/next-less": "0.3.0", + "antd": "^3.5.4", + "babel-plugin-import": "^1.7.0", + "less": "3.0.4", + "next": "latest", + "react": "^16.4.0", + "react-dom": "^16.4.0" + }, + "license": "ISC", + "devDependencies": { + "babel-plugin-transform-decorators-legacy": "^1.3.5" + } +} diff --git a/examples/with-ant-design-less/pages/index.js b/examples/with-ant-design-less/pages/index.js new file mode 100644 index 00000000..01625c35 --- /dev/null +++ b/examples/with-ant-design-less/pages/index.js @@ -0,0 +1,70 @@ +import Layout from '../index.js' +import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button } from 'antd' + +const FormItem = Form.Item +const Option = Select.Option + +export default () => ( + +
+
+ + + Link + + + + + + + + + + + + + + + + + + + + + +
+
+ +)