mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Added example for Ant Design with LESS (#4520)
* Added example for Ant Design with LESS * Fix ESLINT
This commit is contained in:
Giau Tran Minh
Tim Neutkens
parent
2af4ad8b17
commit
631e6c7eba
13
examples/with-ant-design-less/.babelrc
Normal file
13
examples/with-ant-design-less/.babelrc
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"presets": ["next/babel"],
|
||||||
|
"plugins": [
|
||||||
|
"transform-decorators-legacy",
|
||||||
|
[
|
||||||
|
"import",
|
||||||
|
{
|
||||||
|
"libraryName": "antd",
|
||||||
|
"style": "less"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
44
examples/with-ant-design-less/README.md
Normal file
44
examples/with-ant-design-less/README.md
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
[](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.
|
||||||
4
examples/with-ant-design-less/asserts/antd-custom.less
Normal file
4
examples/with-ant-design-less/asserts/antd-custom.less
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@primary-color: #1DA57A;
|
||||||
|
|
||||||
|
@layout-header-height: 40px;
|
||||||
|
@border-radius-base: 0px;
|
||||||
2
examples/with-ant-design-less/asserts/styles.less
Normal file
2
examples/with-ant-design-less/asserts/styles.less
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import "~antd/dist/antd.less";
|
||||||
|
@import "./antd-custom.less";
|
||||||
17
examples/with-ant-design-less/index.js
Normal file
17
examples/with-ant-design-less/index.js
Normal file
|
|
@ -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>
|
||||||
8
examples/with-ant-design-less/next.config.js
Normal file
8
examples/with-ant-design-less/next.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
const withLess = require('@zeit/next-less')
|
||||||
|
|
||||||
|
module.exports = withLess({
|
||||||
|
lessLoaderOptions: {
|
||||||
|
javascriptEnabled: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
22
examples/with-ant-design-less/package.json
Normal file
22
examples/with-ant-design-less/package.json
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
70
examples/with-ant-design-less/pages/index.js
Normal file
70
examples/with-ant-design-less/pages/index.js
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
Loading…
Reference in a new issue