mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

docs: less no (#38602)

Browse Source
This commit is contained in:
二货爱吃白萝卜 2022-11-16 23:38:38 +08:00 committed by GitHub
parent 59134781d9
commit 319b3966c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 79 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README-ja_JP.md
View File

@ -91,12 +91,6 @@ const App = () => (
); );
``` ```
そして、手動でスタイルをインポートする:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### TypeScript ### TypeScript
`antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。 `antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。

6
README-pt_BR.md
View File

@ -91,12 +91,6 @@ const App = () => (
); );
``` ```
Importe o estilo manualmente:
```jsx
import 'antd/dist/antd.css'; // ou 'antd/dist/antd.less'
```
### TypeScript ### TypeScript
Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript). Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript).

6
README-sp_MX.md
View File

@ -91,12 +91,6 @@ const App = () => (
); );
``` ```
Y importar el estilo manualmente:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### TypeScript ### TypeScript
`antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://ant.design/docs/react/use-in-typescript) para comenzar. `antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://ant.design/docs/react/use-in-typescript) para comenzar.

6
README-uk_UA.md
View File

@ -91,12 +91,6 @@ const App = () => (
); );
``` ```
Та імпортуй стиль вручну:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### TypeScript ### TypeScript
`antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати. `antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати.

6
README-zh_CN.md
View File

@ -91,12 +91,6 @@ const App = () => (
); );
``` ```
引入样式：
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### 🌈 定制主题 ### 🌈 定制主题
参考 [定制主题](https://ant.design/docs/react/customize-theme-cn) 文档。 参考 [定制主题](https://ant.design/docs/react/customize-theme-cn) 文档。

6
README.md
View File

@ -91,12 +91,6 @@ const App = () => (
); );
``` ```
And import style manually:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### TypeScript ### TypeScript
`antd` is written in TypeScript with complete definitions, check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started. `antd` is written in TypeScript with complete definitions, check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started.

4
components/config-provider/index.en-US.md
View File

@ -54,10 +54,10 @@ Some components use dynamic style to support wave effect. You can config `csp` p
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | requiredMark: 4.8.0 | | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | requiredMark: 4.8.0 |
| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | | | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | |
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 | | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
| iconPrefixCls | Set icon prefix className (cooperated with [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106)) | string | `anticon` | 4.11.0 | | iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 |
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 | | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
| locale | Language package setting, you can find the packages in [antd/locale](http://unpkg.com/antd/locale/) | object | - | | | locale | Language package setting, you can find the packages in [antd/locale](http://unpkg.com/antd/locale/) | object | - | |
| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` | | | prefixCls | Set prefix className | string | `ant` | |
| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | | | renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | |
| space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | | space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
| theme | Set theme, ref [Customize Theme](/docs/react/customize-theme-v5) | - | - | 5.0.0 | | theme | Set theme, ref [Customize Theme](/docs/react/customize-theme-v5) | - | - | 5.0.0 |

38
components/config-provider/index.zh-CN.md
View File

@ -44,25 +44,25 @@ export default () => (
## API ## API
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- | | ------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- |
| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | | | autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | |
| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 | | componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | | | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 | | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | |
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 | | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
| iconPrefixCls | 设置图标统一样式前缀。注意：需要配合 `less` 变量 [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106) 使用 | string | `anticon` | 4.11.0 | | iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 | | input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
| locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | | | locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | |
| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | | | prefixCls | 设置统一样式前缀 | string | `ant` | |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | | | renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | |
| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | | space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
| theme | 设置主题，参考 [定制主题](/docs/react/customize-theme-v5-cn) | - | - | 5.0.0 | | theme | 设置主题，参考 [定制主题](/docs/react/customize-theme-v5-cn) | - | - | 5.0.0 |
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 | | virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
### ConfigProvider.config() `4.13.0+` ### ConfigProvider.config() `4.13.0+`

4
docs/react/faq.en-US.md
View File

@ -7,10 +7,6 @@ Here are the frequently asked questions about Ant Design and antd that you shoul
--- ---
## Will you provide Sass/Stylus(etc.) style files in addition to the Less style files currently included?
There is currently no plan to add support for Sass/Stylus(etc.) style files, but using tools on Google you can easily convert the provided Less files to your desired style format.
## Is there a difference between `undefined` and `null` in the controlled components of `antd`? ## Is there a difference between `undefined` and `null` in the controlled components of `antd`?
**Yes. antd will treats `undefined` as uncontrolled but `null` as controlled components which means empty value of it.** **Yes. antd will treats `undefined` as uncontrolled but `null` as controlled components which means empty value of it.**

4
docs/react/faq.zh-CN.md
View File

@ -7,10 +7,6 @@ title: FAQ
--- ---
## 你们会提供 Sass/Stylus 等格式的样式文件吗？
暂无计划。事实上你可以使用工具（请自行 Google）将 Less 转换成 Sass/Stylus 等。
## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？ ## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？
**有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** **有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。**

6
docs/react/introduce.en-US.md
View File

@ -88,12 +88,6 @@ import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode); ReactDOM.render(<DatePicker />, mountNode);
``` ```
And import stylesheets manually:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### Use modularized antd ### Use modularized antd
`antd` supports ES modules tree shaking by default for JS part. `antd` supports ES modules tree shaking by default for JS part.

6
docs/react/introduce.zh-CN.md
View File

@ -88,12 +88,6 @@ import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode); ReactDOM.render(<DatePicker />, mountNode);
``` ```
引入样式：
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### 按需加载 ### 按需加载
`antd` 的 JS 代码默认支持基于 ES modules 的 tree shaking。 `antd` 的 JS 代码默认支持基于 ES modules 的 tree shaking。

57
docs/react/use-in-typescript.en-US.md
View File

@ -103,54 +103,25 @@ module.exports = {
### Customize Theme ### Customize Theme
According to the [Customize Theme documentation](/docs/react/customize-theme), we need to modify less variables via loader like [less-loader](https://github.com/webpack/less-loader). We can use [craco-less](https://github.com/DocSpring/craco-less) to achieve that, Ref to the [Customize Theme documentation](/docs/react/customize-theme-v5). Modify theme with ConfigProvider:
First we should modify `src/App.css` to `src/App.less`, then import less file instead. ```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
```diff export default () => (
/* src/App.ts */ <ConfigProvider
- import './App.css'; theme={{
+ import './App.less'; token: {
``` colorPrimary: '#00b96b',
```diff
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```
Then install `craco-less` and modify `craco.config.js` like below.
```bash
$ yarn add craco-less
```
```js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
}, },
}, }}
], >
}; <MyApp />
</ConfigProvider>
);
``` ```
By adding `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, we should see a green button rendered on the page after rebooting the server now.
We provide built-in dark theme and compact theme in antd, you can reference to [Use dark or compact theme](/docs/react/customize-theme#Use-dark-or-compact-theme).
> You could also try [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra) to customize create-react-app webpack config like craco did.
## Alternative ways ## Alternative ways
Follow manual in [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) to setup TypeScript development environment if you already create a project by [Use in create-react-app](/docs/react/use-with-create-react-app). Follow manual in [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) to setup TypeScript development environment if you already create a project by [Use in create-react-app](/docs/react/use-with-create-react-app).

53
docs/react/use-in-typescript.zh-CN.md
View File

@ -105,50 +105,25 @@ module.exports = {
### 自定义主题 ### 自定义主题
按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-antd](https://github.com/DocSpring/craco-antd) 来帮助加载 less 样式和修改变量。 参考 [配置主题](/docs/react/customize-theme-v5)，通过 ConfigProvider 进行主题配置：
首先把 `src/App.css` 文件修改为 `src/App.less`，然后修改样式引用为 less 文件。 ```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
```diff export default () => (
/* src/App.tsx */ <ConfigProvider
- import './App.css'; theme={{
+ import './App.less'; token: {
``` colorPrimary: '#00b96b',
```diff
/* src/App.less */
- @import '~antd/dist/antd.css';
```
然后安装 `craco-antd` 并修改 `craco.config.js` 文件如下。
```bash
$ yarn add craco-antd
```
```js
const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
customizeTheme: {
'@primary-color': '#1DA57A',
},
}, },
}, }}
], >
}; <MyApp />
</ConfigProvider>
);
``` ```
这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。
antd 内建了深色主题和紧凑主题，你可以参照 [使用暗色主题和紧凑主题](/docs/react/customize-theme#使用暗色主题和紧凑主题) 进行接入。
> 同样，你可以使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) 和 [customize-cra](https://github.com/arackaf/customize-cra) 来自定义 create-react-app 的 webpack 配置。
## 其他方案 ## 其他方案
如果你已经按照 [在 create-react-app 中使用](/docs/react/use-with-create-react-app) 初始化了环境，可以参考官方文档里的 [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) 配置 TypeScript 开发环境。 如果你已经按照 [在 create-react-app 中使用](/docs/react/use-with-create-react-app) 初始化了环境，可以参考官方文档里的 [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) 配置 TypeScript 开发环境。

57
docs/react/use-with-create-react-app.en-US.md
View File

@ -127,54 +127,25 @@ module.exports = {
### Customize Theme ### Customize Theme
According to the [Customize Theme documentation](/docs/react/customize-theme), we need to modify less variables via loader like [less-loader](https://github.com/webpack/less-loader). We can use [craco-less](https://github.com/DocSpring/craco-less) to achieve that, Ref to the [Customize Theme documentation](/docs/react/customize-theme-v5). Modify theme with ConfigProvider:
First we should modify `src/App.css` to `src/App.less`, then import less file instead. ```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
```diff export default () => (
/* src/App.js */ <ConfigProvider
- import './App.css'; theme={{
+ import './App.less'; token: {
``` colorPrimary: '#00b96b',
```diff
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```
Then install `craco-less` and modify `craco.config.js` like below.
```bash
$ yarn add craco-less
```
```js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
}, },
}, }}
], >
}; <MyApp />
</ConfigProvider>
);
``` ```
By adding `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, we should see a green button rendered on the page after rebooting the server now.
We provide built-in dark theme and compact theme in antd, you can reference to [Use dark or compact theme](/docs/react/customize-theme#Use-dark-or-compact-theme).
> You could also try [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra) to customize create-react-app webpack config like craco did.
## eject ## eject
You can also eject your application using [yarn run eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) for a custom setup of create-react-app, although you should dig into it by yourself. You can also eject your application using [yarn run eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) for a custom setup of create-react-app, although you should dig into it by yourself.

57
docs/react/use-with-create-react-app.zh-CN.md
View File

@ -117,54 +117,25 @@ module.exports = {
### 自定义主题 ### 自定义主题
按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-less](https://github.com/DocSpring/craco-less) 来帮助加载 less 样式和修改变量。 参考 [配置主题](/docs/react/customize-theme-v5)，通过 ConfigProvider 进行主题配置：
首先把 `src/App.css` 文件修改为 `src/App.less`，然后修改样式引用为 less 文件。 ```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
```diff export default () => (
/* src/App.js */ <ConfigProvider
- import './App.css'; theme={{
+ import './App.less'; token: {
``` colorPrimary: '#00b96b',
```diff
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```
然后安装 `craco-less` 并修改 `craco.config.js` 文件如下。
```bash
$ yarn add craco-less
```
```js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
}, },
}, }}
], >
}; <MyApp />
</ConfigProvider>
);
``` ```
这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。
antd 内建了深色主题和紧凑主题，你可以参照 [使用暗色主题和紧凑主题](/docs/react/customize-theme#使用暗色主题和紧凑主题) 进行接入。
> 同样，你可以使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) 和 [customize-cra](https://github.com/arackaf/customize-cra) 来自定义 create-react-app 的 webpack 配置。
## eject ## eject
你也可以使用 create-react-app 提供的 [yarn run eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。 你也可以使用 create-react-app 提供的 [yarn run eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。

17
docs/spec/colors.en-US.md
View File

@ -44,22 +44,7 @@ If the above palettes do not meet your needs, you can choose a main color below,
### Programmatic Usage ### Programmatic Usage
We provide Less and JavaScript usage for developers. We provide JavaScript usage for developers.
- **Less**
```less
@import '~antd/es/style/themes/default.less';
.selector {
color: @blue-5;
background-color: @gold-2;
}
```
Color less variables: [color.less](https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less).
<br />
- **JavaScript** - **JavaScript**

17
docs/spec/colors.zh-CN.md
View File

@ -52,22 +52,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
### 在代码中使用色板 ### 在代码中使用色板
我们为程序员提供了色板的 Less 和 JavaScript 的使用方式。 我们为程序员提供了色板的 JavaScript 的使用方式。
- **Less**
```less
@import '~antd/es/style/themes/default.less';
.selector {
color: @blue-5;
background-color: @gold-2;
}
```
所有色板变量列表：[color.less](https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less)。
<br />
- **JavaScript** - **JavaScript**