Added example for Ant Design with LESS (#4520)

* Added example for Ant Design with LESS * Fix ESLINT
2024-01-19 02:48:18 +00:00 · 2018-06-07 18:14:27 +07:00 · 2018-06-07 18:14:27 +07:00 · 631e6c7eba
parent 2af4ad8b17
commit 631e6c7eba
8 changed files with 180 additions and 0 deletions
--- a/examples/with-ant-design-less/.babelrc
+++ b/examples/with-ant-design-less/.babelrc
@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    "transform-decorators-legacy",
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": "less"
+      }
+    ]
+  ]
+}
--- a/examples/with-ant-design-less/README.md
+++ 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.
--- a/examples/with-ant-design-less/asserts/antd-custom.less
+++ 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;
--- a/examples/with-ant-design-less/asserts/styles.less
+++ b/examples/with-ant-design-less/asserts/styles.less
@ -0,0 +1,2 @@
+@import "~antd/dist/antd.less";
+@import "./antd-custom.less";
--- a/examples/with-ant-design-less/index.js
+++ b/examples/with-ant-design-less/index.js
@ -0,0 +1,17 @@
+import Head from 'next/head'
+
+import './asserts/styles.less'
+
+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>
--- a/examples/with-ant-design-less/next.config.js
+++ 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,
+  },
+})
--- a/examples/with-ant-design-less/package.json
+++ 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"
+  }
+}
--- a/examples/with-ant-design-less/pages/index.js
+++ 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 () => (
+  <Layout>
+    <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>
+
+        <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>
+  </Layout>
+)