diff --git a/docs/react/contributing.en-US.md b/docs/react/contributing.en-US.md deleted file mode 100644 index 4f9000e..0000000 --- a/docs/react/contributing.en-US.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -order: 12 -title: Contributing -toc: false ---- - -The following is a set of guidelines for contributing to Ant Design. Please spend several minutes reading these guidelines before you create an issue or pull request. - -## Code of Conduct - -We have adopted a [Code of Conduct](https://github.com/ant-design/ant-design/blob/master/CODE_OF_CONDUCT.md) that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated. - -## Open Development - -All work on Ant Design happens directly on [GitHub](https://github.com/ant-design). Both core team members and external contributors send pull requests which go through the same review process. - -## Branch Organization - -According to our [release schedule](changelog#Release-Schedule), we maintain two branches, `master` and `feature`. If you send a bugfix pull request, please do it against the `master` branch, if it's a feature pull request, please do it against the `feature` branch. - -## Bugs - -We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracking. The best way to get your bug fixed is by using our [issue helper](http://new-issue.ant.design) and provide reproduction steps with this [template](https://u.ant.design/codesandbox-repro). - -Before you report a bug, please make sure you've searched existing issues, and read our [FAQ](/docs/react/faq). - -## Proposing a Change - -If you intend to change the public API or introduce new feature, we also recommend you use our [issue helper](http://new-issue.ant.design) to create a feature request issue. - -If you want to help on new API, please reference [API Naming Rules](https://github.com/ant-design/ant-design/wiki/API-Naming-rules) to name it. - -## Your First Pull Request - -Working on your first Pull Request? You can learn how from this free video series: - -[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) - -To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) that contain bugs or small features that have a relatively limited scope. This is a great place to get started. - -If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don't accidentally duplicate your effort. - -If somebody claims an issue but doesn't follow up for more than two weeks, it's fine to take over it but you should still leave a comment. - -## Sending a Pull Request - -The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation. - -**Before submitting a pull request**, please make sure the following is done: - -1. Fork the repository and create your branch from the [correct branch](#Branch-Organization). -1. Run `npm install` in the repository root. - > For Windows 10 development environment, if you run into error `gyp err! find vs msvs_version not set from command line or npm config`, please install [the latest Python v3](https://www.python.org/downloads/) and **Desktop development with C++** through [Visual Studio Installer](https://docs.microsoft.com/en-us/visualstudio/install/install-visual-studio?view=vs-2019#step-3---install-the-visual-studio-installer) before running `npm install` -1. If you've fixed a bug or added code that should be tested, add tests! -1. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development. -1. Run `npm test -- -u` to update the [jest snapshots](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) and commit these changes as well (if there are any updates). -1. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform** -1. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)). - -Sending a Pull Request to [react-component](https://github.com/react-component/): - -Since antd's components are based on react-component, sometimes you may need to send pull request to the corresponding react-component repository. If it's a bugfix pull request, after it's merged, the core team will release a patch release for that component as soon as possible, then you only need to reinstall antd in your project to get the latest patch release. If it's a feature pull request, after it's merged, the core team will release a minor release, then you need raise another pull request to [Ant Design](https://github.com/ant-design/ant-design/) to update dependencies, document and TypeScript interfaces (if needed). - -## Development Workflow - -After cloning antd, run `npm install` to fetch its dependencies. Then, you can run several commands: - -1. `npm start` runs Ant Design website locally. -1. `npm run lint` checks the code style. -1. `npm test` runs the complete test suite. (Make sure the `NODE_ENV` environment variable is unset, or it may causing some problems.) -1. `npm run compile` compiles TypeScript code to the `lib` and `es` directory. -1. `npm run dist` creates UMD build of antd. - -## Being a collaborator - -If you are an active contributor and are willing to work with Ant Design Team in our opensource workflow, you can [apply to be a outside collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator). diff --git a/docs/react/contributing.zh-CN.md b/docs/react/contributing.zh-CN.md index 33cdd9c..c089199 100644 --- a/docs/react/contributing.zh-CN.md +++ b/docs/react/contributing.zh-CN.md @@ -4,15 +4,15 @@ title: 贡献指南 toc: false --- -这篇指南会指导你如何为 Ant Design 贡献一份自己的力量，请在你要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南。 +这篇指南会指导你如何为 HankLiu UI 贡献一份自己的力量，请在你要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南。 ## 行为准则 -我们有一份 [行为准则](https://github.com/ant-design/ant-design/blob/master/CODE_OF_CONDUCT.md)，希望所有的贡献者都能遵守，请花时间阅读一遍全文以确保你能明白哪些是可以做的，哪些是不可以做的。 +我们有一份 [行为准则](https://github.com/hankliu62/hankliu-ui/blob/master/CODE_OF_CONDUCT.md)，希望所有的贡献者都能遵守，请花时间阅读一遍全文以确保你能明白哪些是可以做的，哪些是不可以做的。 ## 透明的开发 -我们所有的工作都会放在 [GitHub](https://github.com/ant-design) 上。不管是核心团队的成员还是外部贡献者的 pull request 都需要经过同样流程的 review。 +我们所有的工作都会放在 [GitHub](https://github.com/hankliu62) 上。不管是核心团队的成员还是外部贡献者的 pull request 都需要经过同样流程的 review。 ## 分支管理 @@ -20,7 +20,7 @@ toc: false ## Bugs -我们使用 [GitHub Issues](https://github.com/ant-design/ant-design/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决，最好的办法就是通过我们提供的 [issue 小助手](http://new-issue.ant.design) 来提 issue。并且能使用这个 [模板](https://u.ant.design/codesandbox-repro) 来提供重现。 +我们使用 [GitHub Issues](https://github.com/hankliu62/hankliu-ui/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决，最好的办法就是通过我们提供的 [issue 小助手](http://new-issue.ant.design) 来提 issue。并且能使用这个 [模板](https://u.ant.design/codesandbox-repro) 来提供重现。 在你报告一个 bug 之前，请先确保已经搜索过已有的 issue 和阅读了我们的 [常见问题](/docs/react/faq)。 @@ -28,7 +28,7 @@ toc: false 如果你有改进我们的 API 或者新增功能的想法，我们同样推荐你使用我们提供的 [issue 小助手](http://new-issue.ant.design) 来新建一个添加新功能的 issue。 -如果你希望协助开发新的 API，请参考 [API 规范](https://github.com/ant-design/ant-design/wiki/API-Naming-rules) 进行命名。 +如果你希望协助开发新的 API，请参考 [API 规范](https://github.com/hankliu62/hankliu-ui/wiki/API-Naming-rules) 进行命名。 ## 第一次贡献 @@ -36,7 +36,7 @@ toc: false [如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629) -为了能帮助你开始你的第一次尝试，我们用 [good first issues](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) 标记了一些比较容易修复的 bug 和小功能。这些 issue 可以很好地作为你的首次尝试。 +为了能帮助你开始你的第一次尝试，我们用 [good first issues](https://github.com/hankliu62/hankliu-ui/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) 标记了一些比较容易修复的 bug 和小功能。这些 issue 可以很好地作为你的首次尝试。 如果你打算开始处理一个 issue，请先检查一下 issue 下面的留言以确保没有别人正在处理这个 issue。如果当前没有人在处理的话你可以留言告知其他人你将会处理这个 issue，以免别人重复劳动。 @@ -44,7 +44,7 @@ toc: false ## Pull Request -Ant Design 团队会关注所有的 pull request，我们会 review 以及合并你的代码，也有可能要求你做一些修改或者告诉你我们为什么不能接受这样的修改。 +HankLiu UI 团队会关注所有的 pull request，我们会 review 以及合并你的代码，也有可能要求你做一些修改或者告诉你我们为什么不能接受这样的修改。 **在你发送 Pull Request 之前**，请确认你是按照下面的步骤来做的： @@ -59,23 +59,18 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并 给 [react-component](https://github.com/react-component/) 发送 pull request： -由于 antd 的大部分组件都是基于 react-component 的，所以有时候你可能需要给相应的 react-component 仓库发送 pull request。如果你是修复了某个 bug，那么我们在合并你的修改后会尽快发布一个 patch 版本，然后你只要重新安装你的依赖就可以使用新发布的版本了。如果你的 pull request 是新增了某个功能，那么在你的修改合并并且发布版本后，你还需要发送一个 pull request 到 [Ant Design](https://github.com/ant-design/ant-design/) 来升级相应的依赖、文档以及 TypeScript 的类型定义。 +由于 hankliu-ui 的大部分组件都是基于 react-component 的，所以有时候你可能需要给相应的 react-component 仓库发送 pull request。如果你是修复了某个 bug，那么我们在合并你的修改后会尽快发布一个 patch 版本，然后你只要重新安装你的依赖就可以使用新发布的版本了。如果你的 pull request 是新增了某个功能，那么在你的修改合并并且发布版本后，你还需要发送一个 pull request 到 [HankLiu UI](https://github.com/hankliu62/hankliu-ui/) 来升级相应的依赖、文档以及 TypeScript 的类型定义。 ## 开发流程 -在你 clone 了 antd 的代码并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令： +在你 clone 了 hankliu-ui 的代码并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令： -1. `npm start` 在本地运行 Ant Design 的网站。 +1. `npm start` 在本地运行 HankLiu UI 的网站。 2. `npm run lint` 检查代码风格。 3. `npm test` 运行测试。(在运行测试前请确保 `NODE_ENV` 环境变量没有被设定，否则可能会引发一些问题) 4. `npm run compile` 编译 TypeScript 代码到 lib 和 es 目录。 -5. `npm run dist` 构建 antd 的 UMD 版本到 dist 目录。 +5. `npm run dist` 构建 hankliu-ui 的 UMD 版本到 dist 目录。 ## 加入社区 -如果你贡献度足够活跃，希望和 Ant Design 团队一起参与维护工作，你可以[申请成为社区协作者](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)。 - -你还可以参考下面两篇社区成员写的贡献指南，一步一步成为 antd 的贡献者吧： - -- [记录向：如何快速的成为 Ant Design 的 contributor](https://zhuanlan.zhihu.com/p/123367842) [@Rustin-Liu](https://github.com/Rustin-Liu) -- [从 0 开始，成为 Ant-Design Contributor](https://zhuanlan.zhihu.com/p/143895612) [@fireairforce](https://github.com/fireairforce) +如果你贡献度足够活跃，希望和 HankLiu UI 团队一起参与维护工作，你可以[申请成为社区协作者](https://github.com/hankliu62/hankliu-ui/wiki/Collaborators#how-to-apply-for-being-a-collaborator)。 diff --git a/docs/react/customize-theme-variable.en-US.md b/docs/react/customize-theme-variable.en-US.md deleted file mode 100644 index a7e2d6d..0000000 --- a/docs/react/customize-theme-variable.en-US.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -order: 7.1 -title: Dynamic Theme (Experimental) ---- - -Except [less customize theme](/docs/react/customize-theme), We also provide CSS Variable version to enable dynamic theme. You can check on [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) demo. - -## Caveats - -- This function depends on CSS Variables. Please check the [browser compatibility](https://caniuse.com/css-variables). -- This function requires at least `antd@4.17.0-alpha.0`. - -## How to use - -### Import antd.variable.min.css - -Replace your import style file with CSS Variable version: - -```diff --- import 'antd/dist/antd.min.css'; -++ import 'antd/dist/antd.variable.min.css'; -``` - -Note: You need remove `babel-plugin-import` for the dynamic theme. - -### Static config - -Call ConfigProvider static function to modify theme color: - -```ts -import { ConfigProvider } from '@hankliu/hankliu-ui'; - -ConfigProvider.config({ - theme: { - primaryColor: '#25b864', - }, -}); -``` - -## Conflict resolve - -CSS Variable use `--ant` prefix by default. When exist multiple antd style file in your project, you can modify prefix to fix it. - -### Adjust - -Modify `prefixCls` on the root of ConfigProvider: - -```tsx -import { ConfigProvider } from '@hankliu/hankliu-ui'; - -export default () => ( - - - -); -``` - -Also need call the static function to modify `prefixCls`: - -```ts -ConfigProvider.config({ - prefixCls: 'custom', - theme: { - primaryColor: '#25b864', - }, -}); -``` - -### Compile less - -Since prefix modified. Origin `antd.variable.css` should also be replaced: - -```bash -lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css -``` - -### Related changes - -In order to implement CSS Variable and maintain original usage compatibility, we added `@root-entry-name: xxx;` entry injection to the `dist/antd.xxx.less` file to support less dynamic loading of the corresponding less file. Under normal circumstances, you do not need to pay attention to this change. However, if your project directly references the less file in the `lib|es` directory. You need to configure `@root-entry-name: default;` (or `@root-entry-name: variable;`) at the entry of less so that less can find the correct entry. - -In addition, we migrated `@import'motion'` and `@import'reset'` in `lib|es/style/minxins/index.less` to `lib|es/style/themes/xxx.less` In, because these two files rely on theme-related variables. If you use the relevant internal method, please adjust it yourself. Of course, we still recommend using the `antd.less` files in the `dist` directory directly instead of calling internal files, because they are often affected by refactoring. diff --git a/docs/react/customize-theme-variable.zh-CN.md b/docs/react/customize-theme-variable.zh-CN.md index 83b33aa..979ad09 100644 --- a/docs/react/customize-theme-variable.zh-CN.md +++ b/docs/react/customize-theme-variable.zh-CN.md @@ -8,17 +8,17 @@ title: 动态主题（实验性） ## 注意事项 - 该功能通过动态修改 CSS Variable 实现，因而在 IE 中页面将无法正常展示。请先确认你的用户环境是否需要支持 IE。 -- 该功能在 `antd@4.17.0-alpha.0` 版本起支持。 +- 该功能在 `@hankliu/hankliu-ui@0.0.1` 版本起支持。 ## 如何使用 -### 引入 antd.variable.min.css +### 引入 hlui.variable.min.css 替换当前项目引入样式文件为 CSS Variable 版本： ```diff --- import 'antd/dist/antd.min.css'; -++ import 'antd/dist/antd.variable.min.css'; +-- import '@hankliu/hankliu-ui/dist/hlui.min.css'; +++ import '@hankliu/hankliu-ui/dist/hlui.variable.min.css'; ``` 注：如果你使用了 `babel-plugin-import`，需要将其去除。 @@ -39,7 +39,7 @@ ConfigProvider.config({ ## 冲突解决 -默认情况下，CSS Variable 会以 `--ant` 作为前缀。当你的项目中引用多份 css 文件时，可以通过修改前缀的方式避免冲突。 +默认情况下，CSS Variable 会以 `--hlui` 作为前缀。当你的项目中引用多份 css 文件时，可以通过修改前缀的方式避免冲突。 ### 代码调整 @@ -71,11 +71,11 @@ ConfigProvider.config({ 由于前缀变更，你需要重新生成一份对应的 css 文件。 ```bash -lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css +lessc --js --modify-var="ant-prefix=custom" @hankliu/hankliu-ui/dist/hlui.variable.less modified.css ``` ### 相关变更 -为了实现 CSS Variable 并保持原始用法兼容性，我们于 `dist/antd.xxx.less` 文件中添加了 `@root-entry-name: xxx;` 入口注入以支持 less 动态加载对应的 less 文件。一般情况下，你不需要关注该变化。但是，如果你的项目中直接引用了 `lib|es` 目录下的 less 文件。你需要在 less 入口处配置 `@root-entry-name: default;` （或者 `@root-entry-name: variable;`）以使 less 可以找到正确的入口。 +为了实现 CSS Variable 并保持原始用法兼容性，我们于 `dist/hlui.xxx.less` 文件中添加了 `@root-entry-name: xxx;` 入口注入以支持 less 动态加载对应的 less 文件。一般情况下，你不需要关注该变化。但是，如果你的项目中直接引用了 `lib|es` 目录下的 less 文件。你需要在 less 入口处配置 `@root-entry-name: default;` （或者 `@root-entry-name: variable;`）以使 less 可以找到正确的入口。 -此外，我们将 `lib|es/style/minxins/index.less` 中的 `@import 'motion'` 和 `@import 'reset'` 迁移至了 `lib|es/style/themes/xxx.less` 中，因为这两个文件依赖了主题相关变量。如果你使用了相关内部方法，请自行调整。当然，我们还是建议直接使用 `dist` 目录下的 `antd.less` 文件而非调用内部文件，因为它们经常会受重构影响。 +此外，我们将 `lib|es/style/minxins/index.less` 中的 `@import 'motion'` 和 `@import 'reset'` 迁移至了 `lib|es/style/themes/xxx.less` 中，因为这两个文件依赖了主题相关变量。如果你使用了相关内部方法，请自行调整。当然，我们还是建议直接使用 `dist` 目录下的 `hlui.less` 文件而非调用内部文件，因为它们经常会受重构影响。 diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md deleted file mode 100644 index ab37aff..0000000 --- a/docs/react/customize-theme.en-US.md +++ /dev/null @@ -1,219 +0,0 @@ ---- -order: 7 -title: Customize Theme ---- - -Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc. - -![customized themes](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png) - -## Ant Design Less variables - -We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs. - -There are some major variables below, all less variables could be found in [Default Variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less). - -```less -@primary-color: #1890ff; // primary color for all components -@link-color: #1890ff; // link color -@success-color: #52c41a; // success state color -@warning-color: #faad14; // warning state color -@error-color: #f5222d; // error state color -@font-size-base: 14px; // major text font size -@heading-color: rgba(0, 0, 0, 0.85); // heading text color -@text-color: rgba(0, 0, 0, 0.65); // major text color -@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color -@disabled-color: rgba(0, 0, 0, 0.25); // disable state color -@border-radius-base: 2px; // major border radius -@border-color-base: #d9d9d9; // major border color -@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers -``` - -Please report an issue if the existing list of variables is not enough for you. - -## How to do it - -We will use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to override the default values of the variables, You can use this [example](https://github.com/ant-design/create-react-app-antd) as a live playground. We now introduce some popular way to do it depends on different workflow. - -### Customize in webpack - -We take a typical `webpack.config.js` file as example to customize its [less-loader](https://github.com/webpack-contrib/less-loader) options. - -```diff -// webpack.config.js -module.exports = { - rules: [{ - test: /\.less$/, - use: [{ - loader: 'style-loader', - }, { - loader: 'css-loader', // translates CSS into CommonJS - }, { - loader: 'less-loader', // compiles Less to CSS -+ options: { -+ lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly -+ modifyVars: { -+ 'primary-color': '#1DA57A', -+ 'link-color': '#1DA57A', -+ 'border-radius-base': '2px', -+ }, -+ javascriptEnabled: true, -+ }, -+ }, - }], - // ...other rules - }], - // ...other config -} -``` - -Note: - -1. Don't exclude `node_modules/antd` when using less-loader. -2. `lessOptions` usage is supported at [less-loader@6.0.0](https://github.com/webpack-contrib/less-loader/releases/tag/v6.0.0). - -### Customize in Umi - -You can easily use [theme](https://umijs.org/config/#theme) field in `.umirc.ts` or [config/config.ts](https://github.com/ant-design/ant-design-pro/blob/v5/config/config.ts) file of your project root directory if you are using [Umi](http://umijs.org/), which could be an object or a javascript file path. - -```js -"theme": { - "primary-color": "#1DA57A", -}, -``` - -Or just [a javascript file path](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18): - -```js -"theme": "./theme.js", -``` - -### Customize in create-react-app - -Follow [Use in create-react-app](/docs/react/use-with-create-react-app). - -### Customize in less file - -Another approach to customize theme is creating a `less` file within variables to override `antd.less`. - -```css -@import '~antd/lib/style/themes/default.less'; -@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry -@import 'your-theme-file.less'; // variables to override above -``` - -Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working. - -### Dynamic theme - -Runtime update theme color please [ref this doc](/docs/react/customize-theme-variable). - -## How to avoid modifying global styles? - -Currently ant-design is designed as a whole experience and modify global styles (eg `body` etc). If you need to integrate ant-design as a part of an existing website, it's likely you want to prevent ant-design to override global styles. - -While there's no canonical way to do it, you can take one of the following paths : - -### Configure webpack to load an alternate less file and scope global styles - -It's possible to configure webpack to load an alternate less file: - -```ts -new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') ) - -#antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; } -``` - -Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope. - -### Use a postcss processor to scope all styles - -See an example of usage with [gulp and postcss-prefixwrap](https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa). - -## Not working? - -You must import styles as less format. A common mistake would be importing multiple copied of styles that some of them are css format to override the less styles. - -- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd. -- If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`. - -## Official Themes 🌈 - -We have some official themes, try them out and give us some feedback! - -- 🌑 Dark Theme (supported in 4.0.0+) -- 📦 Compact Theme (supported in 4.1.0+) -- ☁️ [Aliyun Console Theme (Beta)](https://github.com/ant-design/ant-design-aliyun-theme) - -### Use dark or compact theme - -![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ) - -Method 1: using Umi 3 - -If you're using [Umi 3](http://umijs.org): - -```js -// .umirc.ts or config/config.ts -export default { - antd: { - dark: true, // active dark theme - compact: true, // active compact theme - }, -}, -``` - -Method 2: Import [antd/dist/antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less) or [antd/dist/antd.compact.less](https://unpkg.com/browse/antd@4.x/dist/antd.compact.less) in the style file: - -```less -@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file -@import '~antd/dist/antd.compact.less'; // Introduce the official compact less style entry file -``` - -If the project does not use Less, you can import [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css) or [antd/dist/antd.compact.css](https://unpkg.com/browse/antd@4.x/dist/antd.compact.css) in the CSS file: - -```css -@import '~antd/dist/antd.dark.css'; -@import '~antd/dist/antd.compact.css'; -``` - -> Note that you don't need to import `antd/dist/antd.less` or `antd/dist/antd.css` anymore, please remove it, and remove babel-plugin-import `style` config too. You can't enable two or more theme at the same time by this method. - -Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed: - -```diff -const { getThemeVariables } = require('antd/dist/theme'); - -// webpack.config.js -module.exports = { - rules: [{ - test: /\.less$/, - use: [{ - loader: 'style-loader', - }, { - loader: 'css-loader', // translates CSS into CommonJS - }, { - loader: 'less-loader', // compiles Less to CSS -+ options: { -+ lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly -+ modifyVars: getThemeVariables({ -+ dark: true, // Enable dark mode -+ compact: true, // Enable compact mode -+ }), -+ javascriptEnabled: true, -+ }, -+ }, - }], - }], -}; -``` - -## Related Articles - -- [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/) -- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f) -- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7) -- [Using Sass/Scss with React App (create-react-app)](https://medium.com/@mzohaib.qc/using-sass-scss-with-react-app-create-react-app-d03072083ef8) -- [Dynamic Theming in Browser using Ant Design](https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0) -- [Zero config custom theme generator](https://www.npmjs.com/package/@emeks/antd-custom-theme-generator) diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 7ebca0f..07766b3 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -3,15 +3,15 @@ order: 7 title: 定制主题 --- -Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。 +HankLiu UI 设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。 ![一些配置好的主题](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png) -## Ant Design 的样式变量 +## HankLiu UI 的样式变量 -antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。 +hankliu-ui 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。 -以下是一些最常用的通用变量，所有样式变量可以在 [这里](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) 找到。 +以下是一些最常用的通用变量，所有样式变量可以在 [这里](https://github.com/hankliu62/hankliu-ui/blob/master/components/style/themes/default.less) 找到。 ```less @primary-color: #1890ff; // 全局主色 @@ -34,7 +34,7 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定 ## 定制方式 -原理上是使用 less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式进行覆盖变量，可以在本地运行 [例子](https://github.com/ant-design/create-react-app-antd) 查看定制效果。下面将针对不同的场景提供一些常用的定制方式。 +原理上是使用 less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式进行覆盖变量。 ### 在 webpack 中定制主题 @@ -70,12 +70,12 @@ module.exports = { 注意： -1. less-loader 的处理范围不要过滤掉 `node_modules` 下的 antd 包。 +1. less-loader 的处理范围不要过滤掉 `node_modules` 下的 @hankliu/hankliu-ui 包。 2. `lessOptions` 的配置写法在 [less-loader@6.0.0](https://github.com/webpack-contrib/less-loader/releases/tag/v6.0.0) 里支持。 ### 在 Umi 里配置主题 -如果你在使用 [Umi](https://umijs.org/zh-CN/config#theme)，那么可以很方便地在项目根目录的 `.umirc.ts` 或 [config/config.ts](https://github.com/ant-design/ant-design-pro/blob/v5/config/config.ts) 文件中 [theme](https://umijs.org/zh-CN/config#theme) 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。 +如果你在使用 [Umi](https://umijs.org/zh-CN/config#theme)，那么可以很方便地在项目根目录的 `.umirc.ts` 或 [config/config.ts](https://github.com/hankliu62/hankliu-ui-pro/blob/v5/config/config.ts) 文件中 [theme](https://umijs.org/zh-CN/config#theme) 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。 ```js "theme": { @@ -83,7 +83,7 @@ module.exports = { }, ``` -或者 [一个 js 文件](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18)： +或者 [一个 js 文件](https://github.com/hankliu62/hankliu-ui-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18)： ```js "theme": "./theme.js", @@ -95,11 +95,11 @@ module.exports = { ### 配置 less 变量文件 -另外一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `antd.less` 里的变量。 +另外一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `hlui.less` 里的变量。 ```css -@import '~antd/lib/style/themes/default.less'; -@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件 +@import '~@hankliu/hankliu-ui/lib/style/themes/default.less'; +@import '~@hankliu/hankliu-ui/dist/hlui.less'; // 引入官方提供的 less 样式入口文件 @import 'your-theme-file.less'; // 用于覆盖上面定义的变量 ``` @@ -113,85 +113,11 @@ module.exports = { 注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。 -- 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。 -- 如果你是通过 `'antd/dist/antd.css'` 引入样式的，改为 `antd/dist/antd.less`。 - -## 官方主题 🌈 - -我们提供了一些官方主题，欢迎在项目中试用，并且给我们提供反馈。 - -- 🌑 暗黑主题（4.0.0+ 支持） -- 📦 紧凑主题（4.1.0+ 支持） -- ☁️ [阿里云控制台主题（Beta）](https://github.com/ant-design/ant-design-aliyun-theme) - -### 使用暗黑主题和紧凑主题 - -![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ) - -方式一：使用 Umi 3 - -如果你在使用 [Umi 3](http://umijs.org/zh-CN)： - -```js -// .umirc.ts or config/config.ts -export default { - antd: { - dark: true, // 开启暗色主题 - compact: true, // 开启紧凑主题 - }, -}, -``` - -方式二：是在样式文件全量引入 [antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less) 或 [antd.compact.less](https://unpkg.com/browse/antd@4.x/dist/antd.compact.less)。 - -```less -@import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件 -@import '~antd/dist/antd.compact.less'; // 引入官方提供的紧凑 less 样式入口文件 -``` - -如果项目不使用 Less，可在 CSS 文件中全量引入 [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css) 或 [antd.compact.css](https://unpkg.com/browse/antd@4.x/dist/antd.compact.css)。 - -```css -@import '~antd/dist/antd.dark.css'; -@import '~antd/dist/antd.compact.css'; -``` - -> 注意这种方式下你不需要再引入 `antd/dist/antd.less` 或 `antd/dist/antd.css` 了，可以安全移除掉。也不需要开启 babel-plugin-import 的 `style` 配置。通过此方式不能同时配置两种及以上主题。 - -方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： - -```diff -const { getThemeVariables } = require('antd/dist/theme'); - -// webpack.config.js -module.exports = { - rules: [{ - test: /\.less$/, - use: [{ - loader: 'style-loader', - }, { - loader: 'css-loader', // translates CSS into CommonJS - }, { - loader: 'less-loader', // compiles Less to CSS -+ options: { -+ lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。 -+ modifyVars: getThemeVariables({ -+ dark: true, // 开启暗黑模式 -+ compact: true, // 开启紧凑模式 -+ }), -+ javascriptEnabled: true, -+ }, -+ }, - }], - }], -}; -``` +- 如果你在使用 [babel-plugin-import](https://github.com/hankliu62/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。 +- 如果你是通过 `'@hankliu/hankliu-ui/dist/hlui.css'` 引入样式的，改为 `@hankliu/hankliu-ui/dist/hlui.less`。 ## 社区教程 -- [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/) -- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f) -- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7) - [Using Sass/Scss with React App (create-react-app)](https://medium.com/@mzohaib.qc/using-sass-scss-with-react-app-create-react-app-d03072083ef8) -- [Dynamic Theming in Browser using Ant Design](https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0) +- [Dynamic Theming in Browser using HankLiu UI](https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0) - [Zero config custom theme generator](https://www.npmjs.com/package/@emeks/antd-custom-theme-generator) diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md deleted file mode 100644 index 3206212..0000000 --- a/docs/react/faq.en-US.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -order: 11 -title: FAQ ---- - -Here are the frequently asked questions about Ant Design and antd that you should look up before you ask in the community or create a new issue. We also maintain a [FAQ issues label](http://u.ant.design/faq) for common github issues. - ---- - -### 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. - -### `Select Dropdown DatePicker TimePicker Popover Popconfirm` disappears when I click another popup component inside it. How do I resolve this? - -This is an old bug that has been fixed since `v3.11.x`. If you're using an older version, you can use ` trigger.parentElement}>` ([API reference](/components/select/#Select-props)) to render a component inside the scroll area. If you need to config this globally in your application, try ` trigger.parentElement}>` ([API reference](/components/config-provider/#API)) - -And make sure that parentElement is `position: relative` or `position: absolute`. - -Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438) - -### How do I modify the default theme of Ant Design? - -See: https://ant.design/docs/react/customize-theme . - -### How do I modify `Menu`/`Button`(etc.)'s style? - -While you can override a component's style, we don't recommend doing so. antd is not only a set of React components, but also a design specification as well. - -### How do I replace Moment.js with Day.js to reduce bundle size？ - -Please refer to [Replace Moment.js](/docs/react/replace-moment). - -### It doesn't work when I change `defaultValue` dynamically. - -The `defaultXxxx` (e.g. `defaultValue`) of `Input`/`Select`(etc...) only works on the first render. It is a specification of React. Please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components). - -### Why does modifying props in mutable way not trigger a component update? - -antd use shallow compare of props to optimize performance. You should always pass the new object when updating the state. Please ref [React's document](https://reactjs.org/docs/thinking-in-react.html) - -### After I set the `value` of an `Input`/`Select`(etc.) component, the value cannot be changed by user's action. - -Try `onChange` to change `value`, and please read [React's documentation](https://reactjs.org/docs/forms.html#controlled-components). - -### Components are not vertically aligned when placed in single row. - -Try [Space](https://ant.design/components/space/) component to make them aligned. - -### antd overrides my global styles - -Yes, antd is designed to help you develop a complete background application. To do so, we override some global styles for styling convenience, and currently these cannot be removed or changed. More info at https://github.com/ant-design/ant-design/issues/4331 . - -Alternatively, follow the instructions in [How to avoid modifying global styles?](/docs/react/customize-theme#How-to-avoid-modifying-global-styles) - -### I cannot install `antd` and `antd`'s dependencies in mainland China. - -To potentially solve this, try [cnpm](http://npm.taobao.org/). - -### I set `dependencies.antd` as the git repository in `package.json`, but it doesn't work. - -Please install `antd` with either npm or yarn. - -### `message` and `notification` is lower case, but other components are capitalized. Is this a typo? - -No, `message` is just a function, not a React Component, thus it is not a typo that it is in lower case. - -### `antd` doesn't work well in mobile. - -Please check [Ant Design Mobile](http://mobile.ant.design) as a possible solution, as `antd` has not been optimized to work well on mobile. You can also try the [react-component](https://github.com/react-component/) repositories which start with 'm-' 'rn-', which are also designed for mobile. - -### Does `antd` supply standalone files like 'React'? - -Yes, you can [import `antd` with script tag](https://ant.design/docs/react/introduce#Import-in-Browser), but we recommend using `npm` to import `antd`, as it is simple and easy to maintain. - -### I can't visit `icon` in my network environment. - -You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070) - -After 3.9.x [we will also switch to using svg icons](/components/icon#svg-icons), so you won't need to deploy iconfont locally anymore as well. - -### How do I extend antd's components? - -If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1) - -### How do I fix dynamic styles while using a Content Security Policy (CSP)? - -You can configure `nonce` by [ConfigProvider](/components/config-provider/#Content-Security-Policy). - -### When I set `mode` to `DatePicker`/`RangePicker`, why can I not select a year or month anymore? - -In a real world development, you may need a `YearPicker`, `MonthRangePicker` or `WeekRangePicker`. You are trying to add `mode` to `DatePicker`/`RangePicker` expected to implement those pickers. However, the `DatePicker`/`RangePicker` cannot be selected and the panels won't close now. - -- Reproduction link: https://codesandbox.io/s/dank-brook-v1csy -- Same issues：[#15572](https://github.com/ant-design/ant-design/issues/15572), [#16436](https://github.com/ant-design/ant-design/issues/16436), [#11938](https://github.com/ant-design/ant-design/issues/11938), [#11735](https://github.com/ant-design/ant-design/issues/11735), [#11586](https://github.com/ant-design/ant-design/issues/11586), [#10425](https://github.com/ant-design/ant-design/issues/10425), [#11053](https://github.com/ant-design/ant-design/issues/11053) - -Like [the explaination](https://github.com/ant-design/ant-design/issues/11586#issuecomment-429189877) explains, this is because `` does not equal the `YearPicker`, nor is `` equal to `MonthRangePicker`. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190) in antd 3.0, which simply controls the displayed panel, and won't change the original date picking behavior of `DatePicker`/`RangePicker` (for instance you will still need to click date cell to finish selection in a `DatePicker`, whatever the `mode` is). - -Likewise，`disabledDate` [cannot work on year/month panels](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118) of ``, but only on cells of date panel. - -##### Workaround - -You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs. - -Or you can simply upgrade to [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we [added more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) to meet those requirements, and `disabledDate` could be effect on those pickers too. - -### message/notification/Modal.confirm lost styles when set `prefixCls` on ConfigProvider? - -Static methods like message/notification/Modal.confirm are not using the same render tree as `