mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: less no (#38602)
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
59134781d9
commit
319b3966c4
@ -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)をチェックしてください。
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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) щоб розпочати.
|
||||
|
||||
@ -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) 文档。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -45,7 +45,7 @@ export default () => (
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- |
|
||||
| ------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- |
|
||||
| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | |
|
||||
| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
|
||||
| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
|
||||
@ -55,10 +55,10 @@ export default () => (
|
||||
| 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 |
|
||||
| iconPrefixCls | 设置图标统一样式前缀 | 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` | |
|
||||
| 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 |
|
||||
|
||||
@ -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.**
|
||||
|
||||
@ -7,10 +7,6 @@ title: FAQ
|
||||
|
||||
---
|
||||
|
||||
## 你们会提供 Sass/Stylus 等格式的样式文件吗？
|
||||
|
||||
暂无计划。事实上你可以使用工具（请自行 Google）将 Less 转换成 Sass/Stylus 等。
|
||||
|
||||
## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？
|
||||
|
||||
**有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。**
|
||||
|
||||
@ -88,12 +88,6 @@ import { DatePicker } from 'antd';
|
||||
ReactDOM.render(<DatePicker />, 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.
|
||||
|
||||
@ -88,12 +88,6 @@ import { DatePicker } from 'antd';
|
||||
ReactDOM.render(<DatePicker />, mountNode);
|
||||
```
|
||||
|
||||
引入样式：
|
||||
|
||||
```jsx
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
```
|
||||
|
||||
### 按需加载
|
||||
|
||||
`antd` 的 JS 代码默认支持基于 ES modules 的 tree shaking。
|
||||
|
||||
@ -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.
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
```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,
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}}
|
||||
>
|
||||
<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
|
||||
|
||||
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).
|
||||
|
||||
@ -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
|
||||
/* 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',
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}}
|
||||
>
|
||||
<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 开发环境。
|
||||
|
||||
@ -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.
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
```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');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
plugin: CracoLessPlugin,
|
||||
options: {
|
||||
lessLoaderOptions: {
|
||||
lessOptions: {
|
||||
modifyVars: { '@primary-color': '#1DA57A' },
|
||||
javascriptEnabled: true,
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}}
|
||||
>
|
||||
<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
|
||||
|
||||
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.
|
||||
|
||||
@ -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
|
||||
/* 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');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
plugin: CracoLessPlugin,
|
||||
options: {
|
||||
lessLoaderOptions: {
|
||||
lessOptions: {
|
||||
modifyVars: { '@primary-color': '#1DA57A' },
|
||||
javascriptEnabled: true,
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}}
|
||||
>
|
||||
<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
|
||||
|
||||
你也可以使用 create-react-app 提供的 [yarn run eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。
|
||||
|
||||
@ -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).
|
||||
|
||||
<br />
|
||||
We provide JavaScript usage for developers.
|
||||
|
||||
- **JavaScript**
|
||||
|
||||
|
||||
@ -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)。
|
||||
|
||||
<br />
|
||||
我们为程序员提供了色板的 JavaScript 的使用方式。
|
||||
|
||||
- **JavaScript**
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user