From 319b3966c4396ec4373b3822f1396cc75f2dabe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 16 Nov 2022 23:38:38 +0800 Subject: [PATCH] docs: less no (#38602) --- README-ja_JP.md | 6 -- README-pt_BR.md | 6 -- README-sp_MX.md | 6 -- README-uk_UA.md | 6 -- README-zh_CN.md | 6 -- README.md | 6 -- components/config-provider/index.en-US.md | 4 +- components/config-provider/index.zh-CN.md | 38 ++++++------ docs/react/faq.en-US.md | 4 -- docs/react/faq.zh-CN.md | 4 -- docs/react/introduce.en-US.md | 6 -- docs/react/introduce.zh-CN.md | 6 -- docs/react/use-in-typescript.en-US.md | 59 +++++-------------- docs/react/use-in-typescript.zh-CN.md | 55 +++++------------ docs/react/use-with-create-react-app.en-US.md | 57 +++++------------- docs/react/use-with-create-react-app.zh-CN.md | 57 +++++------------- docs/spec/colors.en-US.md | 17 +----- docs/spec/colors.zh-CN.md | 17 +----- 18 files changed, 81 insertions(+), 279 deletions(-) diff --git a/README-ja_JP.md b/README-ja_JP.md index 2d4f408e35..6643c6668b 100644 --- a/README-ja_JP.md +++ b/README-ja_JP.md @@ -91,12 +91,6 @@ const App = () => ( ); ``` -そして、手動でスタイルをインポートする: - -```jsx -import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' -``` - ### TypeScript `antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。 diff --git a/README-pt_BR.md b/README-pt_BR.md index 82fbef70a5..06e49ef977 100644 --- a/README-pt_BR.md +++ b/README-pt_BR.md @@ -91,12 +91,6 @@ const App = () => ( ); ``` -Importe o estilo manualmente: - -```jsx -import 'antd/dist/antd.css'; // ou 'antd/dist/antd.less' -``` - ### TypeScript Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript). diff --git a/README-sp_MX.md b/README-sp_MX.md index 005dedb8b8..ffaa41919f 100644 --- a/README-sp_MX.md +++ b/README-sp_MX.md @@ -91,12 +91,6 @@ const App = () => ( ); ``` -Y importar el estilo manualmente: - -```jsx -import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' -``` - ### 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. diff --git a/README-uk_UA.md b/README-uk_UA.md index c96aef4972..7aac685700 100644 --- a/README-uk_UA.md +++ b/README-uk_UA.md @@ -91,12 +91,6 @@ const App = () => ( ); ``` -Та імпортуй стиль вручну: - -```jsx -import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' -``` - ### TypeScript `antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати. diff --git a/README-zh_CN.md b/README-zh_CN.md index a6fdb57cc2..510c6873b5 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -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) 文档。 diff --git a/README.md b/README.md index dbd9f4d603..7131a4f40f 100644 --- a/README.md +++ b/README.md @@ -91,12 +91,6 @@ const App = () => ( ); ``` -And import style manually: - -```jsx -import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' -``` - ### TypeScript `antd` is written in TypeScript with complete definitions, check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started. diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 94dd64d6eb..ae02bd530d 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -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 | | 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 | -| 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 | | 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 | - | | | 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 | diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 2b25d7a64b..74d8e6c922 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -44,25 +44,25 @@ export default () => ( ## API -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- | -| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | | -| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 | -| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | -| 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` | | -| 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 | -| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | -| 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 | -| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 | -| 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` | | -| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | | -| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | -| theme | 设置主题，参考 [定制主题](/docs/react/customize-theme-v5-cn) | - | - | 5.0.0 | -| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- | +| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | | +| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 | +| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | +| 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` | | +| 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 | +| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | +| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 | +| iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 | +| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 | +| locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | | +| prefixCls | 设置统一样式前缀 | string | `ant` | | +| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | | +| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | +| theme | 设置主题，参考 [定制主题](/docs/react/customize-theme-v5-cn) | - | - | 5.0.0 | +| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 | ### ConfigProvider.config() `4.13.0+` diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index daa9b03fce..4f54c5779e 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -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`? **Yes. antd will treats `undefined` as uncontrolled but `null` as controlled components which means empty value of it.** diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index c7f9f34bf2..2a62e9a365 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -7,10 +7,6 @@ title: FAQ --- -## 你们会提供 Sass/Stylus 等格式的样式文件吗？ - -暂无计划。事实上你可以使用工具（请自行 Google）将 Less 转换成 Sass/Stylus 等。 - ## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？ **有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index 81c46b44ef..836342bd01 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -88,12 +88,6 @@ import { DatePicker } from 'antd'; ReactDOM.render(, mountNode); ``` -And import stylesheets manually: - -```jsx -import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' -``` - ### Use modularized antd `antd` supports ES modules tree shaking by default for JS part. diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index 1ff7cfada1..c864a0b078 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -88,12 +88,6 @@ import { DatePicker } from 'antd'; ReactDOM.render(, mountNode); ``` -引入样式： - -```jsx -import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' -``` - ### 按需加载 `antd` 的 JS 代码默认支持基于 ES modules 的 tree shaking。 diff --git a/docs/react/use-in-typescript.en-US.md b/docs/react/use-in-typescript.en-US.md index 4cd397ba43..72c5bdfd89 100644 --- a/docs/react/use-in-typescript.en-US.md +++ b/docs/react/use-in-typescript.en-US.md @@ -103,54 +103,25 @@ module.exports = { ### 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. - -```diff -/* src/App.ts */ -- import './App.css'; -+ import './App.less'; -``` - -```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, - }, - }, +```tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; + +export default () => ( + + + +); ``` -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 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). diff --git a/docs/react/use-in-typescript.zh-CN.md b/docs/react/use-in-typescript.zh-CN.md index 30be624fee..5e1b58627c 100644 --- a/docs/react/use-in-typescript.zh-CN.md +++ b/docs/react/use-in-typescript.zh-CN.md @@ -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 文件。 - -```diff -/* src/App.tsx */ -- import './App.css'; -+ import './App.less'; -``` - -```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', - }, +```tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; + +export default () => ( + + + +); ``` -这里利用了 [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 开发环境。 diff --git a/docs/react/use-with-create-react-app.en-US.md b/docs/react/use-with-create-react-app.en-US.md index b05963aa09..c50128d6be 100644 --- a/docs/react/use-with-create-react-app.en-US.md +++ b/docs/react/use-with-create-react-app.en-US.md @@ -127,54 +127,25 @@ module.exports = { ### 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. - -```diff -/* src/App.js */ -- import './App.css'; -+ import './App.less'; -``` - -```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'); +```tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; -module.exports = { - plugins: [ - { - plugin: CracoLessPlugin, - options: { - lessLoaderOptions: { - lessOptions: { - modifyVars: { '@primary-color': '#1DA57A' }, - javascriptEnabled: true, - }, - }, +export default () => ( + + + +); ``` -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 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. diff --git a/docs/react/use-with-create-react-app.zh-CN.md b/docs/react/use-with-create-react-app.zh-CN.md index 7499359734..5880de63f8 100644 --- a/docs/react/use-with-create-react-app.zh-CN.md +++ b/docs/react/use-with-create-react-app.zh-CN.md @@ -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 文件。 - -```diff -/* src/App.js */ -- import './App.css'; -+ import './App.less'; -``` - -```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'); +```tsx +import React from 'react'; +import { ConfigProvider } from 'antd'; -module.exports = { - plugins: [ - { - plugin: CracoLessPlugin, - options: { - lessLoaderOptions: { - lessOptions: { - modifyVars: { '@primary-color': '#1DA57A' }, - javascriptEnabled: true, - }, - }, +export default () => ( + + + +); ``` -这里利用了 [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 你也可以使用 create-react-app 提供的 [yarn run eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。 diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index 6a1322b0fd..287e87dd84 100644 --- a/docs/spec/colors.en-US.md +++ b/docs/spec/colors.en-US.md @@ -44,22 +44,7 @@ If the above palettes do not meet your needs, you can choose a main color below, ### Programmatic Usage -We provide Less and 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). - -
+We provide JavaScript usage for developers. - **JavaScript** diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index f1d0336e9c..abce4ffe88 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -52,22 +52,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序 ### 在代码中使用色板 -我们为程序员提供了色板的 Less 和 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)。 - -
+我们为程序员提供了色板的 JavaScript 的使用方式。 - **JavaScript**