diff --git a/README-pt_BR.md b/README-pt_BR.md index 9f0bdeccf7..810280ebe1 100644 --- a/README-pt_BR.md +++ b/README-pt_BR.md @@ -1,5 +1,5 @@

- +

@@ -10,15 +10,44 @@ Uma solução empresarial de design e biblioteca UI para React. -[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) ![CI Status](https://github.com/ant-design/ant-design/workflows/test/badge.svg) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![](https://flat.badgen.net/npm/v/antd?icon=npm)](https://www.npmjs.com/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd) - -[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) - -[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] + +[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url] + +[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url] + +[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square +[npm-url]: http://npmjs.org/package/antd +[circleci-image]: https://img.shields.io/travis/com/ant-design/ant-design.svg?style=flat-square +[circleci-url]: https://travis-ci.com/ant-design/ant-design +[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg +[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest +[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square +[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master +[david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square +[david-dev-url]: https://david-dm.org/ant-design/ant-design?type=dev +[david-dev-image]: https://img.shields.io/david/dev/ant-design/ant-design?style=flat-square +[david-url]: https://david-dm.org/ant-design/ant-design +[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square +[download-url]: https://npmjs.org/package/antd +[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design +[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/ +[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield +[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield +[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open +[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 +[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social +[twitter-url]: https://twitter.com/AntDesignUI +[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D +[gitter-english-url]: https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge +[gitter-chinese-image]: https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D +[gitter-chinese-url]: https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge +[semver-stability-url]: https://dependabot.com/compatibility-score.html/?dependency-name=antd&package-manager=npm_and_yarn&new-version=latest +[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&target-version=latest&version-scheme=semver -[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](http://ant.design) +[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design) [English](./README.md) | Português | [简体中文](./README-zh_CN.md) @@ -70,20 +99,18 @@ Importe o estilo manualmente: import 'antd/dist/antd.css'; // ou 'antd/dist/antd.less' ``` -Ou use [babel-plugin-import](https://ant.design/docs/react/getting-started#Import-on-Demand). - ### TypeScript Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript). ## 🌍 Internacionalização -Veja [i18n](http://ant.design/docs/react/i18n). +Veja [i18n](https://ant.design/docs/react/i18n). ## 🔗 Links -- [Página inicial](http://ant.design/) -- [Componentes](http://ant.design/docs/react/introduce) +- [Página inicial](https://ant.design/) +- [Componentes](https://ant.design/components/button) - [Ant Design Pro](http://pro.ant.design/) - [Change Log](CHANGELOG.en-US.md) - [rc-components](http://react-component.github.io/) @@ -101,7 +128,7 @@ Veja [i18n](http://ant.design/docs/react/i18n). - [FAQ](https://ant.design/docs/react/faq) - [CodeSandbox Template](https://u.ant.design/codesandbox-repro) para relatório de erros - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) -- [Customize Theme](http://ant.design/docs/react/customize-theme) +- [Customize Theme](https://ant.design/docs/react/customize-theme) - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) ## ⌨️ Desenvolvimento diff --git a/README-zh_CN.md b/README-zh_CN.md index 73fd030016..a8c8ac19bc 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -1,5 +1,5 @@

- +

@@ -10,15 +10,44 @@ 一套企业级 UI 设计语言和 React 组件库。 -[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) ![CI Status](https://github.com/ant-design/ant-design/workflows/Node%20CI/badge.svg) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![](https://flat.badgen.net/npm/v/antd?icon=npm)](https://www.npmjs.com/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd) - -[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) - -[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] + +[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url] + +[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url] + +[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square +[npm-url]: http://npmjs.org/package/antd +[circleci-image]: https://img.shields.io/travis/com/ant-design/ant-design.svg?style=flat-square +[circleci-url]: https://travis-ci.com/ant-design/ant-design +[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg +[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest +[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square +[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master +[david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square +[david-dev-url]: https://david-dm.org/ant-design/ant-design?type=dev +[david-dev-image]: https://img.shields.io/david/dev/ant-design/ant-design?style=flat-square +[david-url]: https://david-dm.org/ant-design/ant-design +[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square +[download-url]: https://npmjs.org/package/antd +[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design +[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/ +[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield +[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield +[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open +[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 +[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social +[twitter-url]: https://twitter.com/AntDesignUI +[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D +[gitter-english-url]: https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge +[gitter-chinese-image]: https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D +[gitter-chinese-url]: https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge +[semver-stability-url]: https://dependabot.com/compatibility-score.html/?dependency-name=antd&package-manager=npm_and_yarn&new-version=latest +[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&target-version=latest&version-scheme=semver -[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ey3wTo-5__QAAAAAAAAAAABkARQnAQ)](http://ant.design/index-cn) +[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ey3wTo-5__QAAAAAAAAAAABkARQnAQ)](https://ant.design/index-cn) [English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 @@ -31,7 +60,7 @@ - 🌍 数十个国际化语言支持。 - 🎨 深入每个细节的主题定制能力。 -## 🖥 支持环境 +## 🖥 兼容环境 - 现代浏览器和 IE11（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。 - 支持服务端渲染。 @@ -70,8 +99,6 @@ const App = () => ( import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ``` -你也可以使用 [babel-plugin-import](https://ant.design/docs/react/getting-started-cn#按需加载)。 - ### 🌈 定制主题 参考 [定制主题](https://ant.design/docs/react/customize-theme-cn) 文档。 @@ -82,12 +109,12 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ## 🌍 国际化 -参考 [国际化文档](http://ant.design/docs/react/i18n-cn)。 +参考 [国际化文档](https://ant.design/docs/react/i18n-cn)。 ## 🔗 链接 -- [首页](http://ant.design/) -- [组件库](http://ant.design/docs/react/introduce) +- [首页](https://ant.design/) +- [组件库](https://ant.design/docs/react/introduce) - [Ant Design Pro](http://pro.ant.design/) - [更新日志](CHANGELOG.en-US.md) - [React 底层基础组件](http://react-component.github.io/) @@ -106,7 +133,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' - [常见问题](https://ant.design/docs/react/faq-cn) - [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) -- [定制主题](http://ant.design/docs/react/customize-theme-cn) +- [定制主题](https://ant.design/docs/react/customize-theme-cn) - [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) ## ⌨️ 本地开发 diff --git a/README.md b/README.md index 134ce3c89f..c1d6b54f8d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- +

@@ -47,7 +47,7 @@ An enterprise-class UI design language and React UI library. -[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](http://ant.design) +[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design) English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) @@ -99,19 +99,17 @@ And import style manually: import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ``` -Or use [babel-plugin-import](https://ant.design/docs/react/getting-started#Import-on-Demand). - ### TypeScript See [Use in TypeScript](https://ant.design/docs/react/use-in-typescript). ## 🌍 Internationalization -See [i18n](http://ant.design/docs/react/i18n). +See [i18n](https://ant.design/docs/react/i18n). ## 🔗 Links -- [Home page](http://ant.design/) +- [Home page](https://ant.design/) - [Components](https://ant.design/components/button/) - [Ant Design Pro](http://pro.ant.design/) - [Change Log](CHANGELOG.en-US.md) @@ -130,7 +128,7 @@ See [i18n](http://ant.design/docs/react/i18n). - [FAQ](https://ant.design/docs/react/faq) - [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) -- [Customize Theme](http://ant.design/docs/react/customize-theme) +- [Customize Theme](https://ant.design/docs/react/customize-theme) - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) ## ⌨️ Development diff --git a/components/button/__tests__/__snapshots__/type.test.tsx.snap b/components/button/__tests__/__snapshots__/type.test.tsx.snap index 3a7ca987f5..09144e205c 100644 --- a/components/button/__tests__/__snapshots__/type.test.tsx.snap +++ b/components/button/__tests__/__snapshots__/type.test.tsx.snap @@ -367,7 +367,7 @@ exports[`Button should render empty button without errors 1`] = ` exports[`Button should support link button 1`] = ` diff --git a/components/button/__tests__/type.test.tsx b/components/button/__tests__/type.test.tsx index 165a7888bb..b11e92d5f2 100644 --- a/components/button/__tests__/type.test.tsx +++ b/components/button/__tests__/type.test.tsx @@ -175,7 +175,7 @@ describe('Button', () => { it('should support link button', () => { const wrapper = mount( - , ); diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index e3db07a027..b6f985dce2 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -23,7 +23,7 @@ There are five kinds of picker: ### Localization -The default locale is en-US, if you need to use other languages, recommend to use internationalized components provided by us at the entrance. Look at: [ConfigProvider](http://ant.design/components/config-provider/). +The default locale is en-US, if you need to use other languages, recommend to use internationalized components provided by us at the entrance. Look at: [ConfigProvider](https://ant.design/components/config-provider/). If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json). diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 36ae04d70f..61dc04c3c3 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -24,7 +24,7 @@ subtitle: 日期选择框 ### 国际化配置 -默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](http://ant.design/components/config-provider-cn/)。 +默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。 diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md index 6a189fd65e..6e8e0b6ac9 100644 --- a/components/form/demo/customized-form-controls.md +++ b/components/form/demo/customized-form-controls.md @@ -9,15 +9,15 @@ title: 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定： -> - 提供受控属性 `value` 或其它与 [`valuePropName`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的属性。 -> - 提供 `onChange` 事件或 [`trigger`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的事件。 +> - 提供受控属性 `value` 或其它与 [`valuePropName`](https://ant.design/components/form/#getFieldDecorator-参数) 的值同名的属性。 +> - 提供 `onChange` 事件或 [`trigger`](https://ant.design/components/form/#getFieldDecorator-参数) 的值同名的事件。 ## en-US Customized or third-party form controls can be used in Form, too. Controls must follow these conventions: -> - It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). -> - It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). +> - It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](https://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). +> - It has event `onChange` or an event which name is equal to the value of [`trigger`](https://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). ```tsx import React, { useState } from 'react'; diff --git a/components/list/__tests__/Item.test.js b/components/list/__tests__/Item.test.js index 97a307d3bb..de0c063db0 100644 --- a/components/list/__tests__/Item.test.js +++ b/components/list/__tests__/Item.test.js @@ -7,7 +7,7 @@ describe('List Item Layout', () => { const data = [ { key: 1, - href: 'http://ant.design', + href: 'https://ant.design', title: `ant design`, avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', description: @@ -29,12 +29,7 @@ describe('List Item Layout', () => { )} />, ); - expect( - wrapper - .find('.ant-list-item') - .at(0) - .hasClass('ant-list-item-no-flex'), - ).toBe(true); + expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true); }); it('horizontal itemLayout List should be flex container defaultly', () => { @@ -51,12 +46,7 @@ describe('List Item Layout', () => { )} />, ); - expect( - wrapper - .find('.ant-list-item') - .at(0) - .hasClass('ant-list-item-no-flex'), - ).toBe(false); + expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false); }); it('vertical itemLayout List should be flex container when there is extra node', () => { @@ -74,12 +64,7 @@ describe('List Item Layout', () => { )} />, ); - expect( - wrapper - .find('.ant-list-item') - .at(0) - .hasClass('ant-list-item-no-flex'), - ).toBe(false); + expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false); }); it('vertical itemLayout List should not be flex container when there is not extra node', () => { @@ -97,12 +82,7 @@ describe('List Item Layout', () => { )} />, ); - expect( - wrapper - .find('.ant-list-item') - .at(0) - .hasClass('ant-list-item-no-flex'), - ).toBe(true); + expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true); }); it('horizontal itemLayout List should accept extra node', () => { diff --git a/components/list/__tests__/__snapshots__/Item.test.js.snap b/components/list/__tests__/__snapshots__/Item.test.js.snap index fece5de6d1..c0846e358a 100644 --- a/components/list/__tests__/__snapshots__/Item.test.js.snap +++ b/components/list/__tests__/__snapshots__/Item.test.js.snap @@ -26,7 +26,7 @@ exports[`List Item Layout horizontal itemLayout List should accept extra node 1` class="ant-list-item-meta-title" > ant design @@ -83,7 +83,7 @@ exports[`List Item Layout should render in RTL direction 1`] = ` class="ant-list-item-meta-title" > ant design diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 6298bff2bd..a0b5a51c2e 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -917,7 +917,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = ` class="ant-list-item-meta-title" > ant design part 0 @@ -1086,7 +1086,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = ` class="ant-list-item-meta-title" > ant design part 1 @@ -1255,7 +1255,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = ` class="ant-list-item-meta-title" > ant design part 2 diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md index d8d2774ea1..74d640fd9f 100644 --- a/components/list/demo/vertical.md +++ b/components/list/demo/vertical.md @@ -20,7 +20,7 @@ import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons'; const listData = []; for (let i = 0; i < 23; i++) { listData.push({ - href: 'http://ant.design', + href: 'https://ant.design', title: `ant design part ${i}`, avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', description: diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md index 7ed1acb25b..754dfdbd44 100644 --- a/components/skeleton/demo/list.md +++ b/components/skeleton/demo/list.md @@ -20,7 +20,7 @@ import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons'; const listData = []; for (let i = 0; i < 3; i++) { listData.push({ - href: 'http://ant.design', + href: 'https://ant.design', title: `ant design part ${i}`, avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', description: diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index 23965b58da..6b1996b853 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -37,21 +37,6 @@ No, we follow Ant Design specification. https://github.com/ant-design/ant-design You can override its style but we don't recommend doing so. antd is not only a set of React components but also a design specification. -### I just want to use `Menu`/`Button`(etc.), but it seems that I have to import the whole of antd and its style. - -Try [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), or import what you need in this way: - -```jsx -import Menu from 'antd/es/menu'; -import 'antd/es/menu/style/css'; -``` - -or (ES6 way with tree shaking): - -```jsx -import { Menu, Breadcrumb, Icon } from 'antd'; -``` - ### How to replace Moment.js to Day.js to reduce bundle size？ Please refer to [Replace Moment.js](/docs/react/replace-moment). diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 5addfc142f..9ca0f78b86 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -37,21 +37,6 @@ https://ant.design/components/select/#Select-props 你可以覆盖它们的样式，但是我们不推荐这么做。antd 是一系列 React 组件，但同样是一套设计规范。 -### 我只想使用 `Menu`/`Button` 等，但似乎我必须 import 整个 antd 和它的样式文件。 - -试试 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，或者用下面这种方式来按需加载： - -```jsx -import Menu from 'antd/es/menu'; -import 'antd/es/menu/style/css'; -``` - -或者（ES6 支持的 tree shaking 方式）： - -```jsx -import { Menu, Breadcrumb, Icon } from 'antd'; -``` - ### 如何使用 Day.js 替换 Moment.js 来减小打包大小？ 可以参考[替换 Moment.js](/docs/react/replace-moment)。 diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index 1506a44680..a1b24afc8c 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -95,60 +95,17 @@ In the real world you will need a development workflow consisting of `compile/bu - [d2-admin](https://github.com/d2-projects/d2-admin) - more scaffolds at [Scaffold Market](http://scaffold.ant.design/) -## Compatibility - -Ant Design React supports all modern browsers and IE11+. - -| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | --- | -| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | - -Polyfills are needed for IE browsers. We recommend [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/). - -Ant Design 3.0 supports both React 15 and 16 but we strongly suggest React 16 for better performance and fewer bugs. - -#### IE note - -> We drop support of IE8 after `antd@2.0`, IE9/10 after `antd@4.0`, - -## Customized Work Flow - -If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code. - -Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in the React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html). - -If you are trying [parcel](https://parceljs.org), here is [a demo repository](https://github.com/ant-design/parcel-antd). - -There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these and even contribute. - ## Import on Demand -If you see logs like in the screenshot below, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network performance. +`antd` supports tree shaking of ES modules, so using `import { Button } from 'antd';` would drop js code you didn't use. -``` -You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. -``` - -> ![console warning](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) - -However, we can import individual components on demand: +If you see logs like in the screenshot below, you might still be using `webpack@1.x` or have a wrong webpack config which can't support tree shaking. -```jsx -import Button from 'antd/es/button'; -import 'antd/es/button/style'; // or antd/es/button/style/css for css format file ``` - -> Note: antd supports ES6 tree shaking, so `import { Button } from 'antd';` will drop the js code you don't use too. - -We strongly recommend using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/es/xxx' way: - -```jsx -import { Button } from 'antd'; +You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. Please upgrade webpack or check the config. ``` -And this plugin can load styles too. Read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details. - -> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'antd/dist/antd.css'` and override the global reset styles. +> ![console warning](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) ## Replace momentjs to Day.js @@ -164,7 +121,8 @@ module.exports = { }; ``` -## Customization +## Customized Work Flow + +If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code. You can try out plents of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem. -- [Customize Theme](/docs/react/customize-theme) -- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont) +There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these and even contribute. diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index d89ebf2ec8..b97b055602 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -99,62 +99,21 @@ render(, document.getElementById('root')); - [d2-admin](https://github.com/d2-projects/d2-admin) - 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/) -## 兼容性 - -Ant Design React 支持所有的现代浏览器和 IE11+。 - -| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | --- | -| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | - -对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。 - -Ant Design 3.0 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。 - -#### IE note - -> `antd@2.0` 之后将不再支持 IE8，`antd@4.0` 之后将不再支持 IE9/10。 - -## 自行构建 - -如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。 - -如果你使用 [parcel](https://parceljs.org)，这里也有 [一个例子](https://github.com/ant-design/parcel-antd) 可以参考。 - -目前社区也有很多基于 antd 定制的 [脚手架](http://scaffold.ant.design/)，欢迎进行试用和贡献。 - ## 按需加载 -如果你在开发环境的控制台看到下面的提示，那么你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。 - -``` -You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. -``` - -> ![控制台警告](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) +`antd` 默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 `import { Button } from 'antd'` 就会有按需加载的效果。 -可以通过以下的写法来按需加载组件。 +如果你在开发环境的控制台看到下面的提示，那么你可能还在使用 `webpack@1.x` 或者 tree shaking 失效，请升级或检查相关配置。 -```jsx -import Button from 'antd/es/button'; -import 'antd/es/button/style'; // 或者 antd/es/button/style/css 加载 css 文件 ``` - -> 注意：antd 默认支持基于 ES module 的 tree shaking，对于 js 部分，直接引入 `import { Button } from 'antd'` 也会有按需加载的效果。 - -如果你使用了 babel，那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写： - -```jsx -import { Button } from 'antd'; +You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. ``` -插件会帮你转换成 `antd/es/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。 +![控制台警告](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) -> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'antd/dist/antd.css'` 手动引入，并覆盖全局样式。 +## 使用 Day.js 替换 Moment.js 优化打包大小 -## 使用 Day.js 替换 momentjs 优化打包大小 - -你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 Day.js 替换 momentjs 来大幅减小打包大小。这需要更新 webpack 的配置文件如下： +你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 [Day.js](https://day.js.org/) 替换 Moment.js 来大幅减小打包大小。这需要更新 webpack 的配置文件如下： ```js // webpack-config.js @@ -166,7 +125,8 @@ module.exports = { }; ``` -## 配置主题和字体 +## 自行构建 + +如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.github.io/) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。 -- [改变主题](/docs/react/customize-theme) -- [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont) +目前社区也有很多基于 antd 定制的 [React 脚手架](http://scaffold.ant.design/)，欢迎进行试用和贡献。 diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index d335387fc9..6bb82ecfdf 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -36,10 +36,20 @@ Following the Ant Design specification, we developed a React UI library `antd` t ## Environment Support -- Modern browsers and Internet Explorer 11 (with [polyfills](/docs/react/getting-started#Compatibility)) +- Modern browsers and Internet Explorer 11 (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility)) - Server-side Rendering - [Electron](https://www.electronjs.org/) +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | +| --- | --- | --- | --- | --- | --- | +| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + +Polyfills are needed for IE browsers. We recommend [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/). + +`antd@3.x` supports both React 15 and 16 but we strongly suggest React 16 for better performance and fewer bugs. + +> We drop support of IE8 after `antd@2.0`, IE9/10 after `antd@4.0`, + ## Version - Stable: [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) @@ -88,37 +98,11 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ### Use modularized antd -> Note: antd support ES6 tree shaking by default even without the below plugin. - -- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) - - ```js - // .babelrc or babel-loader option - { - "plugins": [ - ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less - ] - } - ``` - - This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets. - - ```jsx - // import js and css modularly, parsed by babel-plugin-import - import { DatePicker } from 'antd'; - ``` - -- Manually import - - ```jsx - import DatePicker from 'antd/es/date-picker'; // for js - import 'antd/es/date-picker/style/css'; // for css - // import 'antd/es/date-picker/style'; // that will import less - ``` +`antd` supports ES modules tree shaking by default for JS part. ### TypeScript -- Don't use @types/antd, as antd provides a built-in ts definition already. +`antd` provides a built-in ts definition, don't install @types/antd`. ## Links diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index ccd1934645..0996cb34e4 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -34,11 +34,21 @@ title: Ant Design of React - 🌍 数十个国际化语言支持。 - 🎨 深入每个细节的主题定制能力。 -## 支持环境 +## 兼容环境 -- 现代浏览器和 IE11（需要 [polyfills](/docs/react/getting-started-cn#兼容性)）。 +- 现代浏览器和 IE11（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。 - 支持服务端渲染。 -- [Electron](https://electronjs.org/) +- [Electron](https://www.electronjs.org/) + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | +| --- | --- | --- | --- | --- | --- | +| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + +对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。 + +`antd@3.x` 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。 + +> `antd@2.0` 之后不再支持 IE8，`antd@4.0` 之后不再支持 IE9/10。 ## 版本 @@ -88,39 +98,11 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ### 按需加载 -> 注意：antd 默认支持基于 ES module 的 tree shaking，不使用以下插件也会有按需加载的效果。 - -下面两种方式都可以只加载用到的组件。 - -- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。 - - ```js - // .babelrc or babel-loader option - { - "plugins": [ - ["import", { - "libraryName": "antd", - "libraryDirectory": "es", - "style": "css" // `style: true` 会加载 less 文件 - }] - ] - } - ``` - - 然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。 - - ```jsx - // babel-plugin-import 会帮助你加载 JS 和 CSS - import { DatePicker } from 'antd'; - ``` +`antd` 的 JS 代码默认支持基于 ES modules 的 tree shaking。 -- 手动引入 +### TypeScript - ```jsx - import DatePicker from 'antd/es/date-picker'; // 加载 JS - import 'antd/es/date-picker/style/css'; // 加载 CSS - // import 'antd/es/date-picker/style'; // 加载 LESS - ``` +`antd` 使用 TypeScript 进行书写并提供了完整的定义文件。（不要引用 `@types/antd`）。 ## 链接 diff --git a/docs/react/use-in-typescript.en-US.md b/docs/react/use-in-typescript.en-US.md index c39cc1ed99..c486f3f766 100644 --- a/docs/react/use-in-typescript.en-US.md +++ b/docs/react/use-in-typescript.en-US.md @@ -46,20 +46,16 @@ $ yarn add antd Modify `src/App.tsx`, import Button component from `antd`. -```jsx -import React, { Component } from 'react'; -import Button from 'antd/es/button'; +```tsx +import React, { FC } from 'react'; +import { Button } from 'antd'; import './App.css'; -class App extends Component { - render() { - return ( -
- -
- ); - } -} +const App: FC = () => ( +
+ +
+); export default App; ``` @@ -68,131 +64,93 @@ Add `antd/dist/antd.css` at the top of `src/App.css`. ```css @import '~antd/dist/antd.css'; +``` -.App { - text-align: center; -} +Ok, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at it's [User Guide](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app). -... -``` +`antd` is written in TypeScript with complete definitions, try out and enjoy the property suggestion and typing check. -Ok, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at it's [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). +![](https://gw.alipayobjects.com/zos/antfincdn/26L5vPoLug/8d7da796-175e-40af-8eea-e7031ba09f9f.png) -## Advanced Guides +> Don't install `@types/antd`. -We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo-ts. For instance, we actually import all styles of components in the project which may be a network performance issue. +## Advanced Guides -Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions. +In the real world, we usually have to modify default webpack config for custom needs such as themes. We can achieve that by using [craco](https://github.com/gsoft-inc/craco) which is one of create-react-app's custom config solutions. -Import react-app-rewired and modify the `scripts` field in package.json. Due to new [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) issue, you shall need [customize-cra](https://github.com/arackaf/customize-cra) along with react-app-rewired. +Install craco and modify the `scripts` field in `package.json`. -``` -$ yarn add react-app-rewired customize-cra +```bash +$ yarn add @craco/craco ``` ```diff /* package.json */ "scripts": { - "start": "react-scripts start", -+ "start": "react-app-rewired start", - "build": "react-scripts build", -+ "build": "react-app-rewired build", - "test": "react-scripts test", -+ "test": "react-app-rewired test", ++ "start": "craco start", ++ "build": "craco build", ++ "test": "craco test", } ``` -Then create a `config-overrides.js` at root directory of your project for further overriding. +Then create a `craco.config.js` at root directory of your project for further overriding. ```js -module.exports = function override(config, env) { - // do stuff with the webpack config... - return config; +/* craco.config.js */ +module.exports = { + // ... }; ``` -### Use babel-plugin-import - -[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/docs/react/getting-started#Import-on-Demand)). We are now trying to install it and modify `config-overrides.js`. - -```bash -$ yarn add babel-plugin-import -``` +### Customize Theme -```diff -+ const { override, fixBabelImports } = require('customize-cra'); - -- module.exports = function override(config, env) { -- // do stuff with the webpack config... -- return config; -- }; -+ module.exports = override( -+ fixBabelImports('import', { -+ libraryName: 'antd', -+ libraryDirectory: 'es', -+ style: 'css', -+ }), -+ ); -``` +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, -Remove the `@import '~antd/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below: +First we should import less other then css. ```diff - // src/App.js - import React, { Component } from 'react'; -- import Button from 'antd/es/button'; -+ import { Button } from 'antd'; - import './App.css'; - - const App: React.FC<{}> = () => ( -
- -
- ); - - export default App; +- @import '~antd/dist/antd.css'; ++ @import '~antd/dist/antd.less'; ``` -Then reboot with `yarn start` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/react/getting-started#Import-on-Demand). - -### Customize Theme - -According to the [Customize Theme documentation](/docs/react/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader). We can also use [addLessLoader](https://github.com/arackaf/customize-cra/blob/master/api.md#addlessloaderloaderoptions) to achieve this. Import it and modify `config-overrides.js` like below. +Then install `craco-less` and modify `craco.config.js` like below. ```bash -$ yarn add less less-loader +$ yarn add craco-less ``` -```diff -- const { override, fixBabelImports } = require('customize-cra'); -+ const { override, fixBabelImports, addLessLoader } = require('customize-cra'); - -module.exports = override( - fixBabelImports('import', { - libraryName: 'antd', - libraryDirectory: 'es', -- style: 'css', -+ style: true, - }), -+ addLessLoader({ -+ javascriptEnabled: true, -+ modifyVars: { '@primary-color': '#1DA57A' }, -+ }), -); +```js +const CracoLessPlugin = require('craco-less'); + +module.exports = { + plugins: [ + { + plugin: CracoLessPlugin, + options: { + lessLoaderOptions: { + modifyVars: { '@primary-color': '#1DA57A' }, + javascriptEnabled: true, + }, + }, + }, + ], +}; ``` -We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after rebooting the start server. +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. -> You could also try [craco](https://github.com/sharegate/craco) and [craco-antd](https://github.com/FormAPI/craco-antd) to customize create-react-app webpack config same as customize-cra does. +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). -## Alternative ways +> You could also try [react-scripts-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. -You can also follow instructions in [Use in create-react-app](/docs/react/use-with-create-react-app), then use to setup the TypeScript development environment by yourself. +## Alternative ways -And you can use [react-scripts-ts-antd](https://www.npmjs.com/package/react-scripts-ts-antd) which includes ts-import-plugin, react-app-rewired, scss, less and etc. You can create a new project that without any configurations by running just one command. +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). - [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd) - [react-app-rewire-typescript](https://github.com/lwd-technology/react-app-rewire-typescript) - [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) -- [create-react-app Adding TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript) - [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) diff --git a/docs/react/use-in-typescript.zh-CN.md b/docs/react/use-in-typescript.zh-CN.md index 2cc863e0f2..a8a3eb898c 100644 --- a/docs/react/use-in-typescript.zh-CN.md +++ b/docs/react/use-in-typescript.zh-CN.md @@ -17,10 +17,6 @@ title: 在 TypeScript 中使用 ```bash $ yarn create react-app antd-demo-ts --template typescript - -# or - -npx create-react-app my-app --template typescript ``` 如果你使用的是 npm（接下来我们都会用 yarn 作为例子，如果你习惯用 npm 也没问题）。 @@ -46,151 +42,113 @@ $ yarn add antd 修改 `src/App.tsx`，引入 antd 的按钮组件。 -```jsx -import React, { Component } from 'react'; -import Button from 'antd/es/button'; +```tsx +import React, { FC } from 'react'; +import { Button } from 'antd'; import './App.css'; -class App extends Component { - render() { - return ( -
- -
- ); - } -} +const App: FC = () => ( +
+ +
+); export default App; ``` -修改 `src/App.css` 引入 antd 的样式。 +修改 `src/App.css`，在文件顶部引入 antd 的样式。 ```css @import '~antd/dist/antd.css'; +``` -.App { - text-align: center; -} +重新启动 `yarn start`，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app)。 -... -``` +`antd` 使用 TypeScript 书写并提供了完整的定义，你可以享受组件属性输入建议和定义检查的功能。 + +![](https://gw.alipayobjects.com/zos/antfincdn/26L5vPoLug/8d7da796-175e-40af-8eea-e7031ba09f9f.png) -重新启动 `yarn start`，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)。 +> 注意不要安装 `@types/antd`。 ## 高级配置 -我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。 +这个例子在实际开发中还有一些优化的空间，比如无法进行主题配置。 -此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 create-react-app 进行自定义配置的社区解决方案）。 +此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [craco](https://github.com/gsoft-inc/craco) （一个对 create-react-app 进行自定义配置的社区解决方案）。 -引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) 版本的关系，你还需要安装 [customize-cra](https://github.com/arackaf/customize-cra)。 +现在我们安装 craco 并修改 `package.json` 里的 `scripts` 属性。 -``` -$ yarn add react-app-rewired customize-cra +```bash +$ yarn add @craco/craco ``` ```diff /* package.json */ "scripts": { - "start": "react-scripts start", -+ "start": "react-app-rewired start", - "build": "react-scripts build", -+ "build": "react-app-rewired build", - "test": "react-scripts test", -+ "test": "react-app-rewired test", ++ "start": "craco start", ++ "build": "craco build", ++ "test": "craco test", } ``` -然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。 +然后在项目根目录创建一个 `craco.config.js` 用于修改默认配置。 ```js -module.exports = function override(config, env) { - // do stuff with the webpack config... - return config; +/* craco.config.js */ +module.exports = { + // ... }; ``` -### 使用 babel-plugin-import +### 自定义主题 -[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config-overrides.js` 文件。 +按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-less](https://github.com/DocSpring/craco-less) 来帮助加载 less 样式和修改变量。 -```bash -$ yarn add babel-plugin-import -``` +首先修改样式引用为 less 文件。 ```diff -+ const { override, fixBabelImports } = require('customize-cra'); - -- module.exports = function override(config, env) { -- // do stuff with the webpack config... -- return config; -- }; -+ module.exports = override( -+ fixBabelImports('import', { -+ libraryName: 'antd', -+ libraryDirectory: 'es', -+ style: 'css', -+ }), -+ ); +- @import '~antd/dist/antd.css'; ++ @import '~antd/dist/antd.less'; ``` -然后移除前面在 `src/App.css` 里全量添加的 `@import '~antd/dist/antd.css';` 样式代码，并且按下面的格式引入模块。 +然后安装 `craco-less` 并修改 `config-overrides.js` 文件如下。 -```diff - // src/App.tsx - import React, { Component } from 'react'; -- import Button from 'antd/es/button'; -+ import { Button } from 'antd'; - import './App.css'; - - const App: React.FC<{}> = () => ( -
- -
- ); - - export default App; +```bash +$ yarn add craco-less ``` -最后重启 `yarn start` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/docs/react/getting-started#按需加载)。 - -### 自定义主题 - -按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 `customize-cra` 中提供的 less 相关的函数 [addLessLoader](https://github.com/arackaf/customize-cra/blob/master/api.md#addlessloaderloaderoptions) 来帮助加载 less 样式，同时修改 `config-overrides.js` 文件如下。 - -```diff -- const { override, fixBabelImports } = require('customize-cra'); -+ const { override, fixBabelImports, addLessLoader } = require('customize-cra'); - -module.exports = override( - fixBabelImports('import', { - libraryName: 'antd', - libraryDirectory: 'es', -- style: 'css', -+ style: true, - }), -+ addLessLoader({ -+ javascriptEnabled: true, -+ modifyVars: { '@primary-color': '#1DA57A' }, -+ }), -); +```js +const CracoLessPlugin = require('craco-less'); + +module.exports = { + plugins: [ + { + plugin: CracoLessPlugin, + options: { + lessLoaderOptions: { + modifyVars: { '@primary-color': '#1DA57A' }, + javascriptEnabled: true, + }, + }, + }, + ], +}; ``` -这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。 +这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。 -修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。 +antd 内建了深色主题和紧凑主题，你可以参照 [使用暗色主题和紧凑主题](/docs/react/customize-theme#使用暗色主题和紧凑主题) 进行接入。 -> 对于自定义 webpack 配置，你也可以使用 [craco](https://github.com/sharegate/craco) 和 [craco-antd](https://github.com/FormAPI/craco-antd) 来实现和 customize-cra 一样的修改 create-react-app 配置的功能。 +> 同样，你可以使用 [react-scripts-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) 中的说明操作，再配置 TypeScript 开发环境。 - -你也可以使用 [react-scripts-ts-antd](https://www.npmjs.com/package/react-scripts-ts-antd)，其中包括了 ts-import-plugin，react-app-rewired，scss，less 等插件。你可以通过只运行一个命令来创建一个没有任何配置的新项目。 +如果你已经按照 [在 create-react-app 中使用](/docs/react/use-with-create-react-app) 初始化了环境，可以参考官方文档里的 [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) 配置 TypeScript 开发环境。 - [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd) - [react-app-rewire-typescript](https://github.com/lwd-technology/react-app-rewire-typescript) - [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) -- [create-react-app Adding TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript) - [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) 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 0d089f8154..0259339107 100644 --- a/docs/react/use-with-create-react-app.en-US.md +++ b/docs/react/use-with-create-react-app.en-US.md @@ -76,30 +76,20 @@ Add `antd/dist/antd.css` at the top of `src/App.css`. ```css @import '~antd/dist/antd.css'; - -.App { - text-align: center; -} - -... ``` -Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/README.md). +Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide](https://create-react-app.dev/docs/getting-started). We are successfully running antd components now, go build your own application! ## Advanced Guides -In the real world, there are still lots of problems about antd-demo. For instance, we actually import styles of all components in the project which may be a css bundle size issue (It is OK then if you don't care the gzipped 60kb css file size). - -Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions. +In the real world, we usually have to modify default webpack config for custom needs such as themes. We can achieve that by using [craco](https://github.com/gsoft-inc/craco) which is one of create-react-app's custom config solutions. -Import react-app-rewired and modify the `scripts` field in package.json. Due to new [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) issue, you shall need [customize-cra](https://github.com/arackaf/customize-cra) along with react-app-rewired. +Install craco and modify the `scripts` field in `package.json`. ```bash -$ yarn add react-app-rewired customize-cra -# use less-loader@6.0.0 -$ yarn add react-app-rewired customize-cra@next +$ yarn add @craco/craco ``` ```diff @@ -108,130 +98,68 @@ $ yarn add react-app-rewired customize-cra@next - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", -+ "start": "react-app-rewired start", -+ "build": "react-app-rewired build", -+ "test": "react-app-rewired test", ++ "start": "craco start", ++ "build": "craco build", ++ "test": "craco test", } ``` -Then create a `config-overrides.js` at root directory of your project for further overriding. +Then create a `craco.config.js` at root directory of your project for further overriding. ```js -module.exports = function override(config, env) { - // do stuff with the webpack config... - return config; +/* craco.config.js */ +module.exports = { + // ... }; ``` -### Use babel-plugin-import - -> Note: antd support ES6 tree shaking by default even without this babel plugin for js part. - -[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/docs/react/getting-started#Import-on-Demand)). We are now trying to install it and modify `config-overrides.js`. - -```bash -$ yarn add babel-plugin-import -``` +### Customize Theme -```diff -+ const { override, fixBabelImports } = require('customize-cra'); - -- module.exports = function override(config, env) { -- // do stuff with the webpack config... -- return config; -- }; -+ module.exports = override( -+ fixBabelImports('antd', { -+ libraryDirectory: 'es', -+ style: 'css', -+ }), -+ ); -``` +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, -Remove the `@import '~antd/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below: +First we should import less other then css. ```diff - // src/App.js - import React, { Component } from 'react'; -- import Button from 'antd/es/button'; -+ import { Button } from 'antd'; - import './App.css'; - - const App = () => ( -
- -
- ); - - export default App; +- @import '~antd/dist/antd.css'; ++ @import '~antd/dist/antd.less'; ``` -Then reboot with `yarn start` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/react/getting-started#Import-on-Demand). - -### Customize Theme - -According to the [Customize Theme documentation](/docs/react/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader). We can also use [addLessLoader](https://github.com/arackaf/customize-cra/blob/master/api.md#addlessloaderloaderoptions) to achieve this. Import it and modify `config-overrides.js` like below. +Then install `craco-less` and modify `craco.config.js` like below. ```bash -$ yarn add less less-loader +$ yarn add craco-less ``` -```diff -- const { override, fixBabelImports } = require('customize-cra'); -+ const { override, fixBabelImports, addLessLoader } = require('customize-cra'); - -module.exports = override( - fixBabelImports('antd', { - libraryDirectory: 'es', -- style: 'css', -+ style: true, - }), -+ addLessLoader({ -+ lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly -+ javascriptEnabled: true, -+ modifyVars: { '@primary-color': '#1DA57A' }, -+ }, -+ }), -); +```js +const CracoLessPlugin = require('craco-less'); + +module.exports = { + plugins: [ + { + plugin: CracoLessPlugin, + options: { + lessLoaderOptions: { + modifyVars: { '@primary-color': '#1DA57A' }, + javascriptEnabled: true, + }, + }, + }, + ], +}; ``` -We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here. If you see a green button rendered on the page after rebooting the server, then the configuration was successful. +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 have 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). +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 [craco](https://github.com/sharegate/craco) and [craco-antd](https://github.com/FormAPI/craco-antd) to customize create-react-app webpack config same as customize-cra does. - -> Note: It is recommended to use the latest version of `less`, or a minimum version greater than `3.0.1`. - -## Replace momentjs to Day.js - -You can use [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) plugin to replace momentjs to Day.js to reduce bundle size dramatically. - -```bash -$ yarn add antd-dayjs-webpack-plugin -``` - -```js -const { override, addWebpackPlugin } = require('customize-cra'); -const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin'); - -module.exports = override(addWebpackPlugin(new AntdDayjsWebpackPlugin())); -``` +> You could also try [react-scripts-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. -## Source code and other boilerplates - -Finally, we used antd with create-react-app successfully, you can learn these practices for your own webpack workflow too, and find more webpack configs in the [atool-build](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js). (For instance, add [moment noParse](https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90) to avoid loading all language files.) +## Summary -There are a lot of great boilerplates like create-react-app in the React community. There are some source code samples of importing antd in them if you encounter some problems. +Finally, we used antd with create-react-app successfully, the source code of this guide was pushed to [create-react-app-antd](https://github.com/ant-design/create-react-app-antd) which you could clone and use it directly. -- [create-react-app-antd](https://github.com/ant-design/create-react-app-antd) -- [comerc/cra-ts-antd](https://github.com/comerc/cra-ts-antd) -- [react-boilerplate/react-boilerplate](https://github.com/ant-design/react-boilerplate) -- [kriasoft/react-starter-kit](https://github.com/ant-design/react-starter-kit) -- [next.js](https://github.com/zeit/next.js/tree/master/examples/with-ant-design) -- [nwb](https://github.com/insin/nwb-examples/tree/master/react-app-antd) -- [antd-react-scripts](https://github.com/minesaner/create-react-app/tree/antd/packages/react-scripts) +Next part, We will intruduce how to use antd in [TypeScript](/docs/react/use-in-typescript) and [Umi](/docs/react/practical-projects), let's keep moving! 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 f4bedb1f27..da84430d7d 100644 --- a/docs/react/use-with-create-react-app.zh-CN.md +++ b/docs/react/use-with-create-react-app.zh-CN.md @@ -60,7 +60,7 @@ $ yarn add antd ```jsx import React from 'react'; -import Button from 'antd/es/button'; +import { Button } from 'antd'; import './App.css'; const App = () => ( @@ -76,30 +76,22 @@ export default App; ```css @import '~antd/dist/antd.css'; - -.App { - text-align: center; -} - -... ``` -好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)。 +好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started)。 我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！ ## 高级配置 -这个例子在实际开发中还有一些优化的空间，比如无法进行主题配置，而且上面的例子加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb）。 +这个例子在实际开发中还有一些优化的空间，比如无法进行主题配置。 -此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 create-react-app 进行自定义配置的社区解决方案）。 +此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [craco](https://github.com/gsoft-inc/craco) （一个对 create-react-app 进行自定义配置的社区解决方案）。 -引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) 版本的关系，你还需要安装 [customize-cra](https://github.com/arackaf/customize-cra)。 +现在我们安装 craco 并修改 `package.json` 里的 `scripts` 属性。 ```bash -$ yarn add react-app-rewired customize-cra -# 使用less-loader@6.0.0 -$ yarn add react-app-rewired customize-cra@next +$ yarn add @craco/craco ``` ```diff @@ -108,130 +100,70 @@ $ yarn add react-app-rewired customize-cra@next - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", -+ "start": "react-app-rewired start", -+ "build": "react-app-rewired build", -+ "test": "react-app-rewired test", ++ "start": "craco start", ++ "build": "craco build", ++ "test": "craco test", } ``` -然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。 +然后在项目根目录创建一个 `craco.config.js` 用于修改默认配置。 ```js -module.exports = function override(config, env) { - // do stuff with the webpack config... - return config; +/* craco.config.js */ +module.exports = { + // ... }; ``` -### 使用 babel-plugin-import - -> 注意：antd 默认支持基于 ES module 的 tree shaking，js 代码部分不使用这个插件也会有按需加载的效果。 - -[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config-overrides.js` 文件。 - -```bash -$ yarn add babel-plugin-import -``` +### 自定义主题 -```diff -+ const { override, fixBabelImports } = require('customize-cra'); - -- module.exports = function override(config, env) { -- // do stuff with the webpack config... -- return config; -- }; -+ module.exports = override( -+ fixBabelImports('antd', { -+ libraryDirectory: 'es', -+ style: 'css', -+ }), -+ ); -``` +按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-less](https://github.com/DocSpring/craco-less) 来帮助加载 less 样式和修改变量。 -然后移除前面在 `src/App.css` 里全量添加的 `@import '~antd/dist/antd.css';` 样式代码，并且按下面的格式引入模块。 +首先修改样式引用为 less 文件。 ```diff - // src/App.js - import React, { Component } from 'react'; -- import Button from 'antd/es/button'; -+ import { Button } from 'antd'; - import './App.css'; - - const App = () => ( -
- -
- ); - - export default App; +- @import '~antd/dist/antd.css'; ++ @import '~antd/dist/antd.less'; ``` -最后重启 `yarn start` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/docs/react/getting-started#按需加载)。 - -### 自定义主题 - -按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 `customize-cra` 中提供的 less 相关的函数 [addLessLoader](https://github.com/arackaf/customize-cra/blob/master/api.md#addlessloaderloaderoptions) 来帮助加载 less 样式，同时修改 `config-overrides.js` 文件如下。 +然后安装 `craco-less` 并修改 `config-overrides.js` 文件如下。 ```bash -$ yarn add less less-loader +$ yarn add craco-less ``` -```diff -- const { override, fixBabelImports } = require('customize-cra'); -+ const { override, fixBabelImports, addLessLoader } = require('customize-cra'); - -module.exports = override( - fixBabelImports('antd', { - libraryDirectory: 'es', -- style: 'css', -+ style: true, - }), -+ addLessLoader({ -+ lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。 -+ javascriptEnabled: true, -+ modifyVars: { '@primary-color': '#1DA57A' }, -+ }, -+ }), -); +```js +const CracoLessPlugin = require('craco-less'); + +module.exports = { + plugins: [ + { + plugin: CracoLessPlugin, + options: { + lessLoaderOptions: { + modifyVars: { '@primary-color': '#1DA57A' }, + javascriptEnabled: true, + }, + }, + }, + ], +}; ``` 这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。 antd 内建了深色主题和紧凑主题，你可以参照 [使用暗色主题和紧凑主题](/docs/react/customize-theme#使用暗色主题和紧凑主题) 进行接入。 -> 同样，你可以使用 [craco](https://github.com/sharegate/craco) 和 [craco-antd](https://github.com/FormAPI/craco-antd) 来自定义 create-react-app 的 webpack 配置，类似于 customize-cra。 - -> 注意：建议使用最新版本的 `less`，或不低于 `3.0.1`。 - -## 使用 Day.js 替换 momentjs 优化打包大小 - -你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 Day.js 替换 momentjs 来大幅减小打包大小。 - -```bash -$ yarn add antd-dayjs-webpack-plugin -``` - -```js -const { override, addWebpackPlugin } = require('customize-cra'); -const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin'); - -module.exports = override(addWebpackPlugin(new AntdDayjsWebpackPlugin())); -``` +> 同样，你可以使用 [react-scripts-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://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。 +你也可以使用 create-react-app 提供的 [yarn run eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。 -## 源码和其他脚手架 +## 小结 -以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd，更多 webpack 配置可参考 [atool-build](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js)。（例如加入 [moment noParse](https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90) 避免加载所有语言文件） +以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd。 -React 生态圈中还有很多优秀的脚手架，使用它们并引入 antd 时，你可能会遇到一些问题，下面是一些著名脚手架使用 antd 的范例，包括本文的 create-react-app。 +上述教程的脚手架源码我们放在 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd) 中，你可以直接下载使用。 -- [react-boilerplate/react-boilerplate](https://github.com/ant-design/react-boilerplate) -- [kriasoft/react-starter-kit](https://github.com/ant-design/react-starter-kit) -- [create-react-app-antd](https://github.com/ant-design/create-react-app-antd) -- [cra-ts-antd](https://github.com/comerc/cra-ts-antd) -- [next.js](https://github.com/zeit/next.js/tree/master/examples/with-ant-design) -- [nwb](https://github.com/insin/nwb-examples/tree/master/react-app-antd) -- [antd-react-scripts](https://github.com/minesaner/create-react-app/tree/antd/packages/react-scripts) +接下来我们会介绍如何在 [TypeScript](/docs/react/use-in-typescript) 和 [Umi](/docs/react/practical-projects) 中使用 antd，欢迎继续阅读。 diff --git a/package.json b/package.json index dcee8f7419..74ed394ca5 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "react-component", "ui" ], - "homepage": "http://ant.design/", + "homepage": "https://ant.design/", "bugs": { "url": "https://github.com/ant-design/ant-design/issues" },