test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 19:49:59 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

💄 prittier all files

Browse Source
This commit is contained in:
afc163 2019-05-07 14:57:32 +08:00
parent 66f81550e4
commit b780070351
No known key found for this signature in database
GPG Key ID: 738F973FCE5C6B48
621 changed files with 7540 additions and 6629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.antd-tools.config.js
View File

@ -34,7 +34,7 @@ function finalizeCompile() {
let componentsLessContent = ''; let componentsLessContent = '';
// Build components in one file: lib/style/components.less // Build components in one file: lib/style/components.less
fs.readdir(componentsPath, (err, files) => { fs.readdir(componentsPath, (err, files) => {
files.forEach((file) => { files.forEach(file => {
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) { if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`; componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
} }

2
.depslintrc.js
View File

@ -11,7 +11,7 @@ module.exports = {
], ],
modulePattern: [ modulePattern: [
{ {
pattern: /ConfigConsumer.*renderEmpty/sm, pattern: /ConfigConsumer.*renderEmpty/ms,
module: '../empty', module: '../empty',
}, },
], ],

13
.eslintrc.js
View File

@ -1,9 +1,5 @@
const eslintrc = { const eslintrc = {
extends: [ extends: ['airbnb', 'prettier', 'plugin:jest/recommended'],
'airbnb',
'prettier',
'plugin:jest/recommended',
],
env: { env: {
browser: true, browser: true,
node: true, node: true,
@ -12,12 +8,7 @@ const eslintrc = {
es6: true, es6: true,
}, },
parser: 'babel-eslint', parser: 'babel-eslint',
plugins: [ plugins: ['markdown', 'react', 'babel', 'jest'],
'markdown',
'react',
'babel',
'jest',
],
rules: { rules: {
'react/jsx-one-expression-per-line': 0, 'react/jsx-one-expression-per-line': 0,
'react/prop-types': 0, 'react/prop-types': 0,

6
.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md vendored
View File

@ -1,9 +1,7 @@
--- ---
name: "⚠️ Please use new-issue.ant.design ⚠️" name: '⚠️ Please use new-issue.ant.design ⚠️'
about: The issue which is not created via http://new-issue.ant.design will be closed about: The issue which is not created via http://new-issue.ant.design will be closed immediately.
immediately.
labels: labels:
--- ---
The issue which is not created via http://new-issue.ant.design will be closed immediately. The issue which is not created via http://new-issue.ant.design will be closed immediately.

1
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -7,6 +7,7 @@ Please makes sure that these form are filled before submitting your pull request
[[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)] [[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
--> -->
### 🤔 This is a ... ### 🤔 This is a ...
- [ ] New feature - [ ] New feature

1
.github/PULL_REQUEST_TEMPLATE/pr_cn.md vendored
View File

@ -7,6 +7,7 @@
[[English Template / 英文模板](?expand=1)] [[English Template / 英文模板](?expand=1)]
--> -->
### 🤔 这个变动的性质是？ ### 🤔 这个变动的性质是？
- [ ] 新特性提交 - [ ] 新特性提交

5
.remarkrc.js
View File

@ -1,8 +1,5 @@
const config = { const config = {
plugins: [ plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', 'space']],
'remark-preset-lint-recommended',
['remark-lint-list-item-indent', 'space'],
],
}; };
module.exports = config; module.exports = config;

20
CODE_OF_CONDUCT.md
View File

@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
Examples of behavior that contributes to creating a positive environment include: Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language - Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences - Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism - Gracefully accepting constructive criticism
* Focusing on what is best for the community - Focusing on what is best for the community
* Showing empathy towards other community members - Showing empathy towards other community members
Examples of unacceptable behavior by participants include: Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances - The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks - Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment - Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission - Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting - Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities ## Our Responsibilities

26
README-zh_CN.md
View File

@ -10,21 +10,11 @@
一套企业级的 UI 设计语言和 React 实现。 一套企业级的 UI 设计语言和 React 实现。
[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![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) [![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) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
[![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)
[![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)
[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/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) [![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)
[![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) [![](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)
[![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)
</div> </div>
@ -41,13 +31,13 @@
## 🖥 支持环境 ## 🖥 支持环境
* 现代浏览器和 IE9 及以上。 - 现代浏览器和 IE9 及以上。
* 支持服务端渲染。 - 支持服务端渲染。
* [Electron](http://electron.atom.io/) - [Electron](http://electron.atom.io/)
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron | | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
| --------- | --------- | --------- | --------- | --------- | --------- | | --- | --- | --- | --- | --- | --- |
| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions | IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 📦 安装 ## 📦 安装

26
README.md
View File

@ -10,21 +10,11 @@
An enterprise-class UI design language and React implementation. An enterprise-class UI design language and React implementation.
[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![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) [![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) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
[![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)
[![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)
[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/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) [![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)
[![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) [![](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)
[![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)
</div> </div>
@ -41,13 +31,13 @@ English | [简体中文](./README-zh_CN.md)
## 🖥 Environment Support ## 🖥 Environment Support
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility)) - Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
* Server-side Rendering - Server-side Rendering
* [Electron](http://electron.atom.io/) - [Electron](http://electron.atom.io/)
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron | | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
| --------- | --------- | --------- | --------- | --------- | --------- | | --- | --- | --- | --- | --- | --- |
| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions | IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 📦 Install ## 📦 Install

6
components/affix/demo/basic.md
View File

@ -13,14 +13,14 @@ title:
The simplest usage. The simplest usage.
````jsx ```jsx
import { Affix, Button } from 'antd'; import { Affix, Button } from 'antd';
class Demo extends React.Component { class Demo extends React.Component {
state = { state = {
top: 10, top: 10,
bottom: 10, bottom: 10,
} };
render() { render() {
return ( return (
@ -56,4 +56,4 @@ class Demo extends React.Component {
} }
ReactDOM.render(<Demo />, mountNode); ReactDOM.render(<Demo />, mountNode);
```` ```

6
components/affix/demo/on-change.md
View File

@ -13,13 +13,13 @@ title:
Callback with affixed state. Callback with affixed state.
````jsx ```jsx
import { Affix, Button } from 'antd'; import { Affix, Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}> <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
<Button>120px to affix top</Button> <Button>120px to affix top</Button>
</Affix>, </Affix>,
mountNode mountNode,
); );
```` ```

15
components/affix/demo/target.md
View File

@ -13,18 +13,21 @@ title:
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`). Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
````jsx ```jsx
import { Affix, Button } from 'antd'; import { Affix, Button } from 'antd';
class Demo extends React.Component { class Demo extends React.Component {
render() { render() {
return ( return (
<div className="scrollable-container" ref={(node) => { this.container = node; }}> <div
className="scrollable-container"
ref={node => {
this.container = node;
}}
>
<div className="background"> <div className="background">
<Affix target={() => this.container}> <Affix target={() => this.container}>
<Button type="primary"> <Button type="primary">Fixed at the top of container</Button>
Fixed at the top of container
</Button>
</Affix> </Affix>
</div> </div>
</div> </div>
@ -33,7 +36,7 @@ class Demo extends React.Component {
} }
ReactDOM.render(<Demo />, mountNode); ReactDOM.render(<Demo />, mountNode);
```` ```
<style> <style>
#components-affix-demo-target .scrollable-container { #components-affix-demo-target .scrollable-container {

6
components/affix/index.en-US.md
View File

@ -15,7 +15,7 @@ Please note that Affix should not cover other content on the page, especially wh
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window | | target | specifies the scrollable area dom node | () => HTMLElement | () => window |
@ -24,9 +24,7 @@ Please note that Affix should not cover other content on the page, especially wh
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`: **Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
```jsx ```jsx
<Affix style={{ position: 'absolute', top: y, left: x }}> <Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
...
</Affix>
``` ```
## FAQ ## FAQ

4
components/affix/index.zh-CN.md
View File

@ -25,9 +25,7 @@ title: Affix
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
```jsx ```jsx
<Affix style={{ position: 'absolute', top: y, left: x }}> <Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
...
</Affix>
``` ```
## FAQ ## FAQ

15
components/affix/utils.ts
View File

@ -10,18 +10,23 @@ export function getTargetRect(target: BindElement): ClientRect {
: ({ top: 0, bottom: window.innerHeight } as ClientRect); : ({ top: 0, bottom: window.innerHeight } as ClientRect);
} }
export function getFixedTop(placeholderReact: Rect, targetRect: Rect, offsetTop: number | undefined) { export function getFixedTop(
placeholderReact: Rect,
targetRect: Rect,
offsetTop: number | undefined,
) {
if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) { if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
return offsetTop + targetRect.top; return offsetTop + targetRect.top;
} }
return undefined; return undefined;
} }
export function getFixedBottom(placeholderReact: Rect, targetRect: Rect, offsetBottom: number | undefined) { export function getFixedBottom(
if ( placeholderReact: Rect,
offsetBottom !== undefined && targetRect: Rect,
targetRect.bottom < placeholderReact.bottom + offsetBottom offsetBottom: number | undefined,
) { ) {
if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
const targetBottomOffset = window.innerHeight - targetRect.bottom; const targetBottomOffset = window.innerHeight - targetRect.bottom;
return offsetBottom + targetBottomOffset; return offsetBottom + targetBottomOffset;
} }

12
components/alert/demo/banner.md
View File

@ -14,19 +14,23 @@ title:
Display Alert as a banner at top of page. Display Alert as a banner at top of page.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Alert message="Warning text" banner /> <Alert message="Warning text" banner />
<br /> <br />
<Alert message="Very long warning text warning text text text text text text text" banner closable /> <Alert
message="Very long warning text warning text text text text text text text"
banner
closable
/>
<br /> <br />
<Alert showIcon={false} message="Warning text without icon" banner /> <Alert showIcon={false} message="Warning text without icon" banner />
<br /> <br />
<Alert type="error" message="Error text" banner /> <Alert type="error" message="Error text" banner />
</div>, </div>,
mountNode mountNode,
); );
```` ```

9
components/alert/demo/basic.md
View File

@ -13,14 +13,11 @@ title:
The simplest usage for short messages. The simplest usage for short messages.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render( ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
<Alert message="Success Text" type="success" />, ```
mountNode
);
````
<style> <style>
.ant-alert { .ant-alert {

8
components/alert/demo/closable.md
View File

@ -13,10 +13,10 @@ title:
To show close button. To show close button.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
const onClose = (e) => { const onClose = e => {
console.log(e, 'I was closed.'); console.log(e, 'I was closed.');
}; };
@ -36,6 +36,6 @@ ReactDOM.render(
onClose={onClose} onClose={onClose}
/> />
</div>, </div>,
mountNode mountNode,
); );
```` ```

9
components/alert/demo/close-text.md
View File

@ -13,11 +13,8 @@ title:
Replace the default icon with customized text. Replace the default icon with customized text.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render( ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
<Alert message="Info Text" type="info" closeText="Close Now" />, ```
mountNode
);
````

6
components/alert/demo/custom-icon.md
View File

@ -14,7 +14,7 @@ title:
A relevant icon makes information clearer and more friendly. A relevant icon makes information clearer and more friendly.
````jsx ```jsx
import { Alert, Icon } from 'antd'; import { Alert, Icon } from 'antd';
const icon = <Icon type="smile" />; const icon = <Icon type="smile" />;
@ -55,6 +55,6 @@ ReactDOM.render(
showIcon showIcon
/> />
</div>, </div>,
mountNode mountNode,
); );
```` ```

6
components/alert/demo/description.md
View File

@ -13,7 +13,7 @@ title:
Additional description for alert message. Additional description for alert message.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -39,6 +39,6 @@ ReactDOM.render(
type="error" type="error"
/> />
</div>, </div>,
mountNode mountNode,
); );
```` ```

6
components/alert/demo/icon.md
View File

@ -13,7 +13,7 @@ title:
A relevant icon will make information clearer and more friendly. A relevant icon will make information clearer and more friendly.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -47,6 +47,6 @@ ReactDOM.render(
showIcon showIcon
/> />
</div>, </div>,
mountNode mountNode,
); );
```` ```

19
components/alert/demo/smooth-closed.md
View File

@ -13,39 +13,34 @@ title:
Smoothly unmount Alert upon close. Smoothly unmount Alert upon close.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
class App extends React.Component { class App extends React.Component {
state = { state = {
visible: true, visible: true,
} };
handleClose = () => { handleClose = () => {
this.setState({ visible: false }); this.setState({ visible: false });
} };
render() { render() {
return ( return (
<div> <div>
{ {this.state.visible ? (
this.state.visible ? (
<Alert <Alert
message="Alert Message Text" message="Alert Message Text"
type="success" type="success"
closable closable
afterClose={this.handleClose} afterClose={this.handleClose}
/> />
) : null ) : null}
}
<p>placeholder text here</p> <p>placeholder text here</p>
</div> </div>
); );
} }
} }
ReactDOM.render( ReactDOM.render(<App />, mountNode);
<App />, ```
mountNode
);
````

6
components/alert/demo/style.md
View File

@ -13,7 +13,7 @@ title:
There are 4 types of Alert: `success`, `info`, `warning`, `error`. There are 4 types of Alert: `success`, `info`, `warning`, `error`.
````jsx ```jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
<Alert message="Warning Text" type="warning" /> <Alert message="Warning Text" type="warning" />
<Alert message="Error Text" type="error" /> <Alert message="Error Text" type="error" />
</div>, </div>,
mountNode mountNode,
); );
```` ```

2
components/alert/index.en-US.md
View File

@ -14,7 +14,7 @@ Alert component for feedback.
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| afterClose | Called when close animation is finished | () => void | - | | afterClose | Called when close animation is finished | () => void | - |
| banner | Whether to show as banner | boolean | false | | banner | Whether to show as banner | boolean | false |
| closable | Whether Alert can be closed | boolean | - | | closable | Whether Alert can be closed | boolean | - |

2
components/anchor/demo/basic.md
View File

@ -27,7 +27,7 @@ ReactDOM.render(
<Link href="#Link-Props" title="Link Props" /> <Link href="#Link-Props" title="Link Props" />
</Link> </Link>
</Anchor>, </Anchor>,
mountNode mountNode,
); );
``` ```

2
components/anchor/demo/onClick.md
View File

@ -32,6 +32,6 @@ ReactDOM.render(
<Link href="#Link-Props" title="Link Props" /> <Link href="#Link-Props" title="Link Props" />
</Link> </Link>
</Anchor>, </Anchor>,
mountNode mountNode,
); );
``` ```

2
components/anchor/demo/static.md
View File

@ -27,6 +27,6 @@ ReactDOM.render(
<Link href="#Link-Props" title="Link Props" /> <Link href="#Link-Props" title="Link Props" />
</Link> </Link>
</Anchor>, </Anchor>,
mountNode mountNode,
); );
``` ```

4
components/anchor/index.en-US.md
View File

@ -16,7 +16,7 @@ For displaying anchor hyperlinks on page and jumping between them.
### Anchor Props ### Anchor Props
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| affix | Fixed mode of Anchor | boolean | true | | affix | Fixed mode of Anchor | boolean | true |
| bounds | Bounding distance of anchor area | number | 5(px) | | bounds | Bounding distance of anchor area | number | 5(px) |
| getContainer | Scrolling container | () => HTMLElement | () => window | | getContainer | Scrolling container | () => HTMLElement | () => window |
@ -28,6 +28,6 @@ For displaying anchor hyperlinks on page and jumping between them.
### Link Props ### Link Props
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | -------- | -------------------- | ----------------- | ------- |
| href | target of hyperlink | string | | | href | target of hyperlink | string | |
| title | content of hyperlink | string\|ReactNode | | | title | content of hyperlink | string\|ReactNode | |

2
components/anchor/index.zh-CN.md
View File

@ -29,6 +29,6 @@ title: Anchor
### Link Props ### Link Props
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | ----- | -------- | ----------------- | ------ |
| href | 锚点链接 | string | | | href | 锚点链接 | string | |
| title | 文字内容 | string\|ReactNode | | | title | 文字内容 | string\|ReactNode | |

16
components/auto-complete/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Basic Usage, set datasource of autocomplete with `dataSource` property. Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx ```jsx
import { AutoComplete } from 'antd'; import { AutoComplete } from 'antd';
function onSelect(value) { function onSelect(value) {
@ -23,17 +23,13 @@ function onSelect(value) {
class Complete extends React.Component { class Complete extends React.Component {
state = { state = {
dataSource: [], dataSource: [],
} };
handleSearch = (value) => { handleSearch = value => {
this.setState({ this.setState({
dataSource: !value ? [] : [ dataSource: !value ? [] : [value, value + value, value + value + value],
value,
value + value,
value + value + value,
],
}); });
} };
render() { render() {
const { dataSource } = this.state; const { dataSource } = this.state;
@ -50,4 +46,4 @@ class Complete extends React.Component {
} }
ReactDOM.render(<Complete />, mountNode); ReactDOM.render(<Complete />, mountNode);
```` ```

71
components/auto-complete/demo/certain-category.md
View File

@ -11,40 +11,51 @@ title:
## en-US ## en-US
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx ```jsx
import { Icon, Input, AutoComplete } from 'antd'; import { Icon, Input, AutoComplete } from 'antd';
const Option = AutoComplete.Option; const Option = AutoComplete.Option;
const OptGroup = AutoComplete.OptGroup; const OptGroup = AutoComplete.OptGroup;
const dataSource = [{ const dataSource = [
{
title: '话题', title: '话题',
children: [{ children: [
{
title: 'AntDesign', title: 'AntDesign',
count: 10000, count: 10000,
}, { },
{
title: 'AntDesign UI', title: 'AntDesign UI',
count: 10600, count: 10600,
}], },
}, { ],
},
{
title: '问题', title: '问题',
children: [{ children: [
{
title: 'AntDesign UI 有多好', title: 'AntDesign UI 有多好',
count: 60100, count: 60100,
}, { },
{
title: 'AntDesign 是啥', title: 'AntDesign 是啥',
count: 30010, count: 30010,
}], },
}, { ],
},
{
title: '文章', title: '文章',
children: [{ children: [
{
title: 'AntDesign 是一个设计语言', title: 'AntDesign 是一个设计语言',
count: 100000, count: 100000,
}], },
}]; ],
},
];
function renderTitle(title) { function renderTitle(title) {
return ( return (
@ -55,17 +66,16 @@ function renderTitle(title) {
href="https://www.google.com/search?q=antd" href="https://www.google.com/search?q=antd"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
>更多 >
更多
</a> </a>
</span> </span>
); );
} }
const options = dataSource.map(group => ( const options = dataSource
<OptGroup .map(group => (
key={group.title} <OptGroup key={group.title} label={renderTitle(group.title)}>
label={renderTitle(group.title)}
>
{group.children.map(opt => ( {group.children.map(opt => (
<Option key={opt.title} value={opt.title}> <Option key={opt.title} value={opt.title}>
{opt.title} {opt.title}
@ -73,13 +83,10 @@ const options = dataSource.map(group => (
</Option> </Option>
))} ))}
</OptGroup> </OptGroup>
)).concat([ ))
.concat([
<Option disabled key="all" className="show-all"> <Option disabled key="all" className="show-all">
<a <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
href="https://www.google.com/search?q=antd"
target="_blank"
rel="noopener noreferrer"
>
查看所有结果 查看所有结果
</a> </a>
</Option>, </Option>,
@ -106,9 +113,9 @@ function Complete() {
} }
ReactDOM.render(<Complete />, mountNode); ReactDOM.render(<Complete />, mountNode);
```` ```
````css ```css
.certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix { .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
right: 12px; right: 12px;
} }
@ -119,7 +126,7 @@ ReactDOM.render(<Complete />, mountNode);
} }
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group { .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
border-bottom: 1px solid #F6F6F6; border-bottom: 1px solid #f6f6f6;
} }
.certain-category-search-dropdown .ant-select-dropdown-menu-item { .certain-category-search-dropdown .ant-select-dropdown-menu-item {
@ -146,8 +153,8 @@ ReactDOM.render(<Complete />, mountNode);
} }
.certain-category-icon { .certain-category-icon {
color: #6E6E6E; color: #6e6e6e;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 16px; font-size: 16px;
} }
```` ```

20
components/auto-complete/demo/custom.md
View File

@ -13,7 +13,7 @@ title:
Customize Input Component Customize Input Component
````jsx ```jsx
import { AutoComplete, Input } from 'antd'; import { AutoComplete, Input } from 'antd';
const { TextArea } = Input; const { TextArea } = Input;
@ -25,21 +25,17 @@ function onSelect(value) {
class Complete extends React.Component { class Complete extends React.Component {
state = { state = {
dataSource: [], dataSource: [],
} };
handleSearch = (value) => { handleSearch = value => {
this.setState({ this.setState({
dataSource: !value ? [] : [ dataSource: !value ? [] : [value, value + value, value + value + value],
value,
value + value,
value + value + value,
],
}); });
} };
handleKeyPress = (ev) => { handleKeyPress = ev => {
console.log('handleKeyPress', ev); console.log('handleKeyPress', ev);
} };
render() { render() {
const { dataSource } = this.state; const { dataSource } = this.state;
@ -62,4 +58,4 @@ class Complete extends React.Component {
} }
ReactDOM.render(<Complete />, mountNode); ReactDOM.render(<Complete />, mountNode);
```` ```

8
components/auto-complete/demo/non-case-sensitive.md
View File

@ -13,7 +13,7 @@ title:
A non-case-sensitive AutoComplete A non-case-sensitive AutoComplete
````jsx ```jsx
import { AutoComplete } from 'antd'; import { AutoComplete } from 'antd';
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street']; const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
@ -24,10 +24,12 @@ function Complete() {
style={{ width: 200 }} style={{ width: 200 }}
dataSource={dataSource} dataSource={dataSource}
placeholder="try to type `b`" placeholder="try to type `b`"
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} filterOption={(inputValue, option) =>
option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
}
/> />
); );
} }
ReactDOM.render(<Complete />, mountNode); ReactDOM.render(<Complete />, mountNode);
```` ```

16
components/auto-complete/demo/options.md
View File

@ -13,7 +13,7 @@ title:
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。 You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
````jsx ```jsx
import { AutoComplete } from 'antd'; import { AutoComplete } from 'antd';
const Option = AutoComplete.Option; const Option = AutoComplete.Option;
@ -21,9 +21,9 @@ const Option = AutoComplete.Option;
class Complete extends React.Component { class Complete extends React.Component {
state = { state = {
result: [], result: [],
} };
handleSearch = (value) => { handleSearch = value => {
let result; let result;
if (!value || value.indexOf('@') >= 0) { if (!value || value.indexOf('@') >= 0) {
result = []; result = [];
@ -31,17 +31,13 @@ class Complete extends React.Component {
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`); result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
} }
this.setState({ result }); this.setState({ result });
} };
render() { render() {
const { result } = this.state; const { result } = this.state;
const children = result.map(email => <Option key={email}>{email}</Option>); const children = result.map(email => <Option key={email}>{email}</Option>);
return ( return (
<AutoComplete <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder="input here">
style={{ width: 200 }}
onSearch={this.handleSearch}
placeholder="input here"
>
{children} {children}
</AutoComplete> </AutoComplete>
); );
@ -49,4 +45,4 @@ class Complete extends React.Component {
} }
ReactDOM.render(<Complete />, mountNode); ReactDOM.render(<Complete />, mountNode);
```` ```

29
components/auto-complete/demo/uncertain-category.md
View File

@ -11,13 +11,10 @@ title:
## en-US ## en-US
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx ```jsx
import { import { Icon, Button, Input, AutoComplete } from 'antd';
Icon, Button, Input, AutoComplete,
} from 'antd';
const Option = AutoComplete.Option; const Option = AutoComplete.Option;
@ -30,7 +27,9 @@ function getRandomInt(max, min = 0) {
} }
function searchResult(query) { function searchResult(query) {
return (new Array(getRandomInt(5))).join('.').split('.') return new Array(getRandomInt(5))
.join('.')
.split('.')
.map((item, idx) => ({ .map((item, idx) => ({
query, query,
category: `${query}${idx}`, category: `${query}${idx}`,
@ -62,13 +61,13 @@ function renderOption(item) {
class Complete extends React.Component { class Complete extends React.Component {
state = { state = {
dataSource: [], dataSource: [],
} };
handleSearch = (value) => { handleSearch = value => {
this.setState({ this.setState({
dataSource: value ? searchResult(value) : [], dataSource: value ? searchResult(value) : [],
}); });
} };
render() { render() {
const { dataSource } = this.state; const { dataSource } = this.state;
@ -85,11 +84,11 @@ class Complete extends React.Component {
optionLabelProp="text" optionLabelProp="text"
> >
<Input <Input
suffix={( suffix={
<Button className="search-btn" size="large" type="primary"> <Button className="search-btn" size="large" type="primary">
<Icon type="search" /> <Icon type="search" />
</Button> </Button>
)} }
/> />
</AutoComplete> </AutoComplete>
</div> </div>
@ -98,9 +97,9 @@ class Complete extends React.Component {
} }
ReactDOM.render(<Complete />, mountNode); ReactDOM.render(<Complete />, mountNode);
```` ```
````css ```css
.global-search-wrapper { .global-search-wrapper {
padding-right: 50px; padding-right: 50px;
} }
@ -139,4 +138,4 @@ ReactDOM.render(<Complete />, mountNode);
.global-search-item-count { .global-search-item-count {
flex: none; flex: none;
} }
```` ```

6
components/auto-complete/index.en-US.md
View File

@ -15,11 +15,11 @@ When there is a need for autocomplete functionality.
```jsx ```jsx
const dataSource = ['12345', '23456', '34567']; const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} /> <AutoComplete dataSource={dataSource} />;
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | | allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| autoFocus | get focus when component mounted | boolean | false | | autoFocus | get focus when component mounted | boolean | false |
| backfill | backfill selected item the input when using keyboard | boolean | false | | backfill | backfill selected item the input when using keyboard | boolean | false |
@ -45,6 +45,6 @@ const dataSource = ['12345', '23456', '34567'];
## Methods ## Methods
| Name | Description | | Name | Description |
| ---- | ----------- | | ------- | ------------ |
| blur() | remove focus | | blur() | remove focus |
| focus() | get focus | | focus() | get focus |

4
components/auto-complete/index.zh-CN.md
View File

@ -16,7 +16,7 @@ title: AutoComplete
```jsx ```jsx
const dataSource = ['12345', '23456', '34567']; const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} /> <AutoComplete dataSource={dataSource} />;
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
@ -46,6 +46,6 @@ const dataSource = ['12345', '23456', '34567'];
## 方法 ## 方法
| 名称 | 描述 | | 名称 | 描述 |
| --- | --- | | ------- | -------- |
| blur() | 移除焦点 | | blur() | 移除焦点 |
| focus() | 获取焦点 | | focus() | 获取焦点 |

14
components/avatar/demo/badge.md
View File

@ -13,18 +13,22 @@ title:
Usually used for reminders and notifications. Usually used for reminders and notifications.
````jsx ```jsx
import { Avatar, Badge } from 'antd'; import { Avatar, Badge } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<span style={{ marginRight: 24 }}> <span style={{ marginRight: 24 }}>
<Badge count={1}><Avatar shape="square" icon="user" /></Badge> <Badge count={1}>
<Avatar shape="square" icon="user" />
</Badge>
</span> </span>
<span> <span>
<Badge dot><Avatar shape="square" icon="user" /></Badge> <Badge dot>
<Avatar shape="square" icon="user" />
</Badge>
</span> </span>
</div>, </div>,
mountNode mountNode,
); );
```` ```

6
components/avatar/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Three sizes and two shapes are available. Three sizes and two shapes are available.
````jsx ```jsx
import { Avatar } from 'antd'; import { Avatar } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -31,9 +31,9 @@ ReactDOM.render(
<Avatar shape="square" size="small" icon="user" /> <Avatar shape="square" size="small" icon="user" />
</div> </div>
</div>, </div>,
mountNode mountNode,
); );
```` ```
<style> <style>
#components-avatar-demo-basic .ant-avatar { #components-avatar-demo-basic .ant-avatar {

12
components/avatar/demo/dynamic.md
View File

@ -13,7 +13,7 @@ title:
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
````jsx ```jsx
import { Avatar, Button } from 'antd'; import { Avatar, Button } from 'antd';
const UserList = ['U', 'Lucy', 'Tom', 'Edward']; const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
@ -34,7 +34,7 @@ class Autoset extends React.Component {
user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0], user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0], color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
}); });
} };
render() { render() {
return ( return (
@ -42,7 +42,11 @@ class Autoset extends React.Component {
<Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large"> <Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large">
{this.state.user} {this.state.user}
</Avatar> </Avatar>
<Button size="small" style={{ marginLeft: 16, verticalAlign: 'middle' }} onClick={this.changeUser}> <Button
size="small"
style={{ marginLeft: 16, verticalAlign: 'middle' }}
onClick={this.changeUser}
>
Change Change
</Button> </Button>
</div> </div>
@ -51,4 +55,4 @@ class Autoset extends React.Component {
} }
ReactDOM.render(<Autoset />, mountNode); ReactDOM.render(<Autoset />, mountNode);
```` ```

15
components/avatar/demo/toggle-debug.md
View File

@ -14,7 +14,7 @@ debug: true
Text inside Avatar should be set a proper font size when toggle it's visibility. Text inside Avatar should be set a proper font size when toggle it's visibility.
````jsx ```jsx
import { Avatar, Button } from 'antd'; import { Avatar, Button } from 'antd';
class App extends React.Component { class App extends React.Component {
@ -28,7 +28,7 @@ class App extends React.Component {
this.setState({ this.setState({
hide: !this.state.hide, hide: !this.state.hide,
}); });
} };
toggleSize = () => { toggleSize = () => {
const sizes = ['small', 'default', 'large']; const sizes = ['small', 'default', 'large'];
@ -39,13 +39,13 @@ class App extends React.Component {
this.setState({ this.setState({
size: sizes[current], size: sizes[current],
}); });
} };
changeScale = () => { changeScale = () => {
this.setState({ this.setState({
scale: this.state.scale === 1 ? 2 : 1, scale: this.state.scale === 1 ? 2 : 1,
}); });
} };
render() { render() {
const { hide, size, scale } = this.state; const { hide, size, scale } = this.state;
@ -60,7 +60,11 @@ class App extends React.Component {
<Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}> <Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>
Avatar Avatar
</Avatar> </Avatar>
<Avatar size={size} src="invalid" style={{ background: '#00a2ae', display: hide ? 'none' : '' }}> <Avatar
size={size}
src="invalid"
style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
>
Invalid Invalid
</Avatar> </Avatar>
<div style={{ display: hide ? 'none' : '' }}> <div style={{ display: hide ? 'none' : '' }}>
@ -78,3 +82,4 @@ class App extends React.Component {
} }
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);
```

6
components/avatar/demo/type.md
View File

@ -13,7 +13,7 @@ title:
Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors. Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
````jsx ```jsx
import { Avatar } from 'antd'; import { Avatar } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -25,9 +25,9 @@ ReactDOM.render(
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar> <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" /> <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>, </div>,
mountNode mountNode,
); );
```` ```
<style> <style>
#components-avatar-demo-type .ant-avatar { #components-avatar-demo-type .ant-avatar {

2
components/avatar/index.en-US.md
View File

@ -9,7 +9,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - | | icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
| shape | the shape of avatar | `circle` \| `square` | `circle` | | shape | the shape of avatar | `circle` \| `square` | `circle` |
| size | the size of the avatar | number \| string: `large` `small` `default` | `default` | | size | the size of the avatar | number \| string: `large` `small` `default` | `default` |

6
components/back-top/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
The most basic usage. The most basic usage.
````jsx ```jsx
import { BackTop } from 'antd'; import { BackTop } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
<strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong> <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
button. button.
</div>, </div>,
mountNode mountNode,
); );
```` ```

11
components/back-top/demo/custom.md
View File

@ -13,8 +13,7 @@ title:
You can customize the style of the button, just note the size limit: no more than `40px * 40px`. You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
```jsx
````jsx
import { BackTop } from 'antd'; import { BackTop } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -26,11 +25,11 @@ ReactDOM.render(
<strong style={{ color: '#1088e9' }}> blue </strong> <strong style={{ color: '#1088e9' }}> blue </strong>
button. button.
</div>, </div>,
mountNode mountNode,
); );
```` ```
````css ```css
#components-back-top-demo-custom .ant-back-top { #components-back-top-demo-custom .ant-back-top {
bottom: 100px; bottom: 100px;
} }
@ -44,4 +43,4 @@ ReactDOM.render(
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
```` ```

2
components/back-top/index.en-US.md
View File

@ -18,7 +18,7 @@ title: BackTop
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`. > If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window | | target | specifies the scrollable area dom node | () => HTMLElement | () => window |
| visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400 | | visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400 |
| onClick | a callback function, which can be executed when you click the button | Function | - | | onClick | a callback function, which can be executed when you click the button | Function | - |

6
components/badge/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it. Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
````jsx ```jsx
import { Badge, Icon } from 'antd'; import { Badge, Icon } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -28,9 +28,9 @@ ReactDOM.render(
<a href="#" className="head-example" /> <a href="#" className="head-example" />
</Badge> </Badge>
</div>, </div>,
mountNode mountNode,
); );
```` ```
<style> <style>
.ant-badge:not(.ant-badge-not-a-wrapper) { .ant-badge:not(.ant-badge-not-a-wrapper) {

18
components/badge/demo/change.md
View File

@ -13,10 +13,8 @@ title:
The count will be animated as it changes. The count will be animated as it changes.
````jsx ```jsx
import { import { Badge, Button, Icon, Switch } from 'antd';
Badge, Button, Icon, Switch,
} from 'antd';
const ButtonGroup = Button.Group; const ButtonGroup = Button.Group;
@ -24,12 +22,12 @@ class Demo extends React.Component {
state = { state = {
count: 5, count: 5,
show: true, show: true,
} };
increase = () => { increase = () => {
const count = this.state.count + 1; const count = this.state.count + 1;
this.setState({ count }); this.setState({ count });
} };
decline = () => { decline = () => {
let count = this.state.count - 1; let count = this.state.count - 1;
@ -37,11 +35,11 @@ class Demo extends React.Component {
count = 0; count = 0;
} }
this.setState({ count }); this.setState({ count });
} };
onChange = (show) => { onChange = show => {
this.setState({ show }); this.setState({ show });
} };
render() { render() {
return ( return (
@ -71,4 +69,4 @@ class Demo extends React.Component {
} }
ReactDOM.render(<Demo />, mountNode); ReactDOM.render(<Demo />, mountNode);
```` ```

31
components/badge/demo/colorful.md
View File

@ -11,19 +11,32 @@ title:
## en-US ## en-US
New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
You can also set it to a hex color string for custom color.
````jsx ```jsx
import { Badge } from 'antd'; import { Badge } from 'antd';
const colors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime']; const colors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
];
ReactDOM.render( ReactDOM.render(
<div> <div>
<h4 style={{ marginBottom: 16 }}>Presets:</h4> <h4 style={{ marginBottom: 16 }}>Presets:</h4>
<div> <div>
{colors.map((color) => ( {colors.map(color => (
<div key={color}> <div key={color}>
<Badge color={color} text={color} /> <Badge color={color} text={color} />
</div> </div>
@ -40,12 +53,12 @@ ReactDOM.render(
<Badge color="#108ee9" text="#108ee9" /> <Badge color="#108ee9" text="#108ee9" />
</div> </div>
</div>, </div>,
mountNode mountNode,
); );
```` ```
````css ```css
.ant-tag { .ant-tag {
margin-bottom: 8px; margin-bottom: 8px;
} }
```` ```

9
components/badge/demo/dot.md
View File

@ -11,10 +11,9 @@ title:
## en-US ## en-US
This will simply display a red badge, without a specific count. This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
If count equals 0, it won't display the dot.
````jsx ```jsx
import { Badge, Icon } from 'antd'; import { Badge, Icon } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -29,9 +28,9 @@ ReactDOM.render(
<a href="#">Link something</a> <a href="#">Link something</a>
</Badge> </Badge>
</div>, </div>,
mountNode mountNode,
); );
```` ```
<style> <style>
.anticon-notification { .anticon-notification {

6
components/badge/demo/link.md
View File

@ -13,7 +13,7 @@ title:
The badge can be wrapped with `a` tag to make it linkable. The badge can be wrapped with `a` tag to make it linkable.
````jsx ```jsx
import { Badge } from 'antd'; import { Badge } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -22,6 +22,6 @@ ReactDOM.render(
<span className="head-example" /> <span className="head-example" />
</Badge> </Badge>
</a>, </a>,
mountNode mountNode,
); );
```` ```

11
components/badge/demo/no-wrapper.md
View File

@ -15,18 +15,21 @@ title:
Used in standalone when children is empty. Used in standalone when children is empty.
````jsx ```jsx
import { Badge } from 'antd'; import { Badge } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Badge count={25} /> <Badge count={25} />
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} /> <Badge
count={4}
style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
/>
<Badge count={109} style={{ backgroundColor: '#52c41a' }} /> <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
</div>, </div>,
mountNode mountNode,
); );
```` ```
<style> <style>
.ant-badge-not-a-wrapper:not(.ant-badge-status) { .ant-badge-not-a-wrapper:not(.ant-badge-status) {

6
components/badge/demo/overflow.md
View File

@ -13,7 +13,7 @@ title:
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`. `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
````jsx ```jsx
import { Badge } from 'antd'; import { Badge } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -31,6 +31,6 @@ ReactDOM.render(
<a href="#" className="head-example" /> <a href="#" className="head-example" />
</Badge> </Badge>
</div>, </div>,
mountNode mountNode,
); );
```` ```

6
components/badge/demo/status.md
View File

@ -13,7 +13,7 @@ title:
Standalone badge with status. Standalone badge with status.
````jsx ```jsx
import { Badge } from 'antd'; import { Badge } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -34,6 +34,6 @@ ReactDOM.render(
<br /> <br />
<Badge status="warning" text="Warning" /> <Badge status="warning" text="Warning" />
</div>, </div>,
mountNode mountNode,
); );
```` ```

6
components/badge/demo/title.md
View File

@ -14,7 +14,7 @@ debug: true
The badge will display `title` when hovered over, instead of `count`. The badge will display `title` when hovered over, instead of `count`.
````jsx ```jsx
import { Badge } from 'antd'; import { Badge } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -23,9 +23,9 @@ ReactDOM.render(
<a href="#" className="head-example" /> <a href="#" className="head-example" />
</Badge> </Badge>
</div>, </div>,
mountNode mountNode,
); );
```` ```
<style> <style>
.ant-badge:not(.ant-badge-not-a-wrapper) { .ant-badge:not(.ant-badge-not-a-wrapper) {

2
components/badge/index.en-US.md
View File

@ -23,7 +23,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
``` ```
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| -------- | ----------- | ---- | ------- | ------- | | --- | --- | --- | --- | --- |
| color | Customize Badge dot color | string | - | 3.16.0 | | color | Customize Badge dot color | string | - | 3.16.0 |
| count | Number to show in badge | ReactNode | | | | count | Number to show in badge | ReactNode | | |
| dot | Whether to display a red dot instead of `count` | boolean | `false` | | | dot | Whether to display a red dot instead of `count` | boolean | `false` | |

30
components/breadcrumb/demo/router-4.md
View File

@ -15,10 +15,8 @@ title:
Used together with `react-router@4` or other router. Used together with `react-router@4` or other router.
````jsx ```jsx
import { import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
HashRouter as Router, Route, Switch, Link, withRouter,
} from 'react-router-dom';
import { Breadcrumb, Alert } from 'antd'; import { Breadcrumb, Alert } from 'antd';
const Apps = () => ( const Apps = () => (
@ -39,24 +37,22 @@ const breadcrumbNameMap = {
'/apps/1/detail': 'Detail', '/apps/1/detail': 'Detail',
'/apps/2/detail': 'Detail', '/apps/2/detail': 'Detail',
}; };
const Home = withRouter((props) => { const Home = withRouter(props => {
const { location } = props; const { location } = props;
const pathSnippets = location.pathname.split('/').filter(i => i); const pathSnippets = location.pathname.split('/').filter(i => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => { const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return ( return (
<Breadcrumb.Item key={url}> <Breadcrumb.Item key={url}>
<Link to={url}> <Link to={url}>{breadcrumbNameMap[url]}</Link>
{breadcrumbNameMap[url]}
</Link>
</Breadcrumb.Item> </Breadcrumb.Item>
); );
}); });
const breadcrumbItems = [( const breadcrumbItems = [
<Breadcrumb.Item key="home"> <Breadcrumb.Item key="home">
<Link to="/">Home</Link> <Link to="/">Home</Link>
</Breadcrumb.Item> </Breadcrumb.Item>,
)].concat(extraBreadcrumbItems); ].concat(extraBreadcrumbItems);
return ( return (
<div className="demo"> <div className="demo">
<div className="demo-nav"> <div className="demo-nav">
@ -68,9 +64,7 @@ const Home = withRouter((props) => {
<Route render={() => <span>Home Page</span>} /> <Route render={() => <span>Home Page</span>} />
</Switch> </Switch>
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" /> <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
<Breadcrumb> <Breadcrumb>{breadcrumbItems}</Breadcrumb>
{breadcrumbItems}
</Breadcrumb>
</div> </div>
); );
}); });
@ -79,11 +73,11 @@ ReactDOM.render(
<Router> <Router>
<Home /> <Home />
</Router>, </Router>,
mountNode mountNode,
); );
```` ```
````css ```css
.demo { .demo {
margin: 16px; margin: 16px;
} }
@ -100,4 +94,4 @@ ReactDOM.render(
.app-list { .app-list {
margin-top: 16px; margin-top: 16px;
} }
```` ```

6
components/breadcrumb/demo/separator.md
View File

@ -13,7 +13,7 @@ title:
The separator can be customized by setting the separator property: separator=">" The separator can be customized by setting the separator property: separator=">"
````jsx ```jsx
import { Breadcrumb } from 'antd'; import { Breadcrumb } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
<Breadcrumb.Item href="">Application List</Breadcrumb.Item> <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item> <Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>, </Breadcrumb>,
mountNode mountNode,
); );
```` ```

10
components/breadcrumb/demo/withIcon.md
View File

@ -13,7 +13,7 @@ title:
The icon should be placed in front of the text. The icon should be placed in front of the text.
````jsx ```jsx
import { Breadcrumb, Icon } from 'antd'; import { Breadcrumb, Icon } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -25,10 +25,8 @@ ReactDOM.render(
<Icon type="user" /> <Icon type="user" />
<span>Application List</span> <span>Application List</span>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item> <Breadcrumb.Item>Application</Breadcrumb.Item>
Application
</Breadcrumb.Item>
</Breadcrumb>, </Breadcrumb>,
mountNode mountNode,
); );
```` ```

6
components/button/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
There are `primary` button, `default` button, `dashed` button and `danger` button in antd. There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
````jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -24,6 +24,6 @@ ReactDOM.render(
<Button type="danger">Danger</Button> <Button type="danger">Danger</Button>
<Button type="link">Link</Button> <Button type="link">Link</Button>
</div>, </div>,
mountNode mountNode,
); );
```` ```

22
components/button/demo/block.md
View File

@ -13,17 +13,25 @@ title:
`block` property will make the button fit to its parent width. `block` property will make the button fit to its parent width.
````jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Button type="primary" block>Primary</Button> <Button type="primary" block>
Primary
</Button>
<Button block>Default</Button> <Button block>Default</Button>
<Button type="dashed" block>Dashed</Button> <Button type="dashed" block>
<Button type="danger" block>Danger</Button> Dashed
<Button type="link" block>Link</Button> </Button>
<Button type="danger" block>
Danger
</Button>
<Button type="link" block>
Link
</Button>
</div>, </div>,
mountNode mountNode,
); );
```` ```

12
components/button/demo/button-group.md
View File

@ -17,7 +17,7 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr
The `size` can be set to `large`, `small` or left unset resulting in a default size. The `size` can be set to `large`, `small` or left unset resulting in a default size.
````jsx ```jsx
import { Button, Icon } from 'antd'; import { Button, Icon } from 'antd';
const ButtonGroup = Button.Group; const ButtonGroup = Button.Group;
@ -43,10 +43,12 @@ ReactDOM.render(
<h4>With Icon</h4> <h4>With Icon</h4>
<ButtonGroup> <ButtonGroup>
<Button type="primary"> <Button type="primary">
<Icon type="left" />Go back <Icon type="left" />
Go back
</Button> </Button>
<Button type="primary"> <Button type="primary">
Go forward<Icon type="right" /> Go forward
<Icon type="right" />
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup> <ButtonGroup>
@ -54,9 +56,9 @@ ReactDOM.render(
<Button type="primary" icon="cloud-download" /> <Button type="primary" icon="cloud-download" />
</ButtonGroup> </ButtonGroup>
</div>, </div>,
mountNode mountNode,
); );
```` ```
<style> <style>
#components-button-demo-button-group h4 { #components-button-demo-button-group h4 {

22
components/button/demo/disabled.md
View File

@ -13,27 +13,35 @@ title:
To mark a button as disabled, add the `disabled` property to the `Button`. To mark a button as disabled, add the `disabled` property to the `Button`.
````jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Button type="primary">Primary</Button> <Button type="primary">Primary</Button>
<Button type="primary" disabled>Primary(disabled)</Button> <Button type="primary" disabled>
Primary(disabled)
</Button>
<br /> <br />
<Button>Default</Button> <Button>Default</Button>
<Button disabled>Default(disabled)</Button> <Button disabled>Default(disabled)</Button>
<br /> <br />
<Button type="dashed">Dashed</Button> <Button type="dashed">Dashed</Button>
<Button type="dashed" disabled>Dashed(disabled)</Button> <Button type="dashed" disabled>
Dashed(disabled)
</Button>
<br /> <br />
<Button type="link">Link</Button> <Button type="link">Link</Button>
<Button type="link" disabled>Link(disabled)</Button> <Button type="link" disabled>
Link(disabled)
</Button>
<div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}> <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
<Button ghost>Ghost</Button> <Button ghost>Ghost</Button>
<Button ghost disabled>Ghost(disabled)</Button> <Button ghost disabled>
Ghost(disabled)
</Button>
</div> </div>
</div>, </div>,
mountNode mountNode,
); );
```` ```

22
components/button/demo/ghost.md
View File

@ -13,17 +13,25 @@ title:
`ghost` property will make button's background transparent, it is common used in colored background. `ghost` property will make button's background transparent, it is common used in colored background.
````jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}> <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
<Button type="primary" ghost>Primary</Button> <Button type="primary" ghost>
Primary
</Button>
<Button ghost>Default</Button> <Button ghost>Default</Button>
<Button type="dashed" ghost>Dashed</Button> <Button type="dashed" ghost>
<Button type="danger" ghost>danger</Button> Dashed
<Button type="link" ghost>link</Button> </Button>
<Button type="danger" ghost>
danger
</Button>
<Button type="link" ghost>
link
</Button>
</div>, </div>,
mountNode mountNode,
); );
```` ```

14
components/button/demo/icon.md
View File

@ -17,21 +17,25 @@ title:
If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property. If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
````jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Button type="primary" shape="circle" icon="search" /> <Button type="primary" shape="circle" icon="search" />
<Button type="primary" icon="search">Search</Button> <Button type="primary" icon="search">
Search
</Button>
<Button shape="circle" icon="search" /> <Button shape="circle" icon="search" />
<Button icon="search">Search</Button> <Button icon="search">Search</Button>
<br /> <br />
<Button shape="circle" icon="search" /> <Button shape="circle" icon="search" />
<Button icon="search">Search</Button> <Button icon="search">Search</Button>
<Button type="dashed" shape="circle" icon="search" /> <Button type="dashed" shape="circle" icon="search" />
<Button type="dashed" icon="search">Search</Button> <Button type="dashed" icon="search">
Search
</Button>
</div>, </div>,
mountNode mountNode,
); );
```` ```

17
components/button/demo/loading.md
View File

@ -13,22 +13,22 @@ title:
A loading indicator can be added to a button by setting the `loading` property on the `Button`. A loading indicator can be added to a button by setting the `loading` property on the `Button`.
````jsx ```jsx
import { Button } from 'antd'; import { Button } from 'antd';
class App extends React.Component { class App extends React.Component {
state = { state = {
loading: false, loading: false,
iconLoading: false, iconLoading: false,
} };
enterLoading = () => { enterLoading = () => {
this.setState({ loading: true }); this.setState({ loading: true });
} };
enterIconLoading = () => { enterIconLoading = () => {
this.setState({ iconLoading: true }); this.setState({ iconLoading: true });
} };
render() { render() {
return ( return (
@ -43,7 +43,12 @@ class App extends React.Component {
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}> <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
Click me! Click me!
</Button> </Button>
<Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}> <Button
type="primary"
icon="poweroff"
loading={this.state.iconLoading}
onClick={this.enterIconLoading}
>
Click me! Click me!
</Button> </Button>
<br /> <br />
@ -55,4 +60,4 @@ class App extends React.Component {
} }
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);
```` ```

11
components/button/demo/multiple.md
View File

@ -13,11 +13,8 @@ title:
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`. If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
```jsx
````jsx import { Button, Menu, Dropdown, Icon } from 'antd';
import {
Button, Menu, Dropdown, Icon,
} from 'antd';
function handleMenuClick(e) { function handleMenuClick(e) {
console.log('click', e); console.log('click', e);
@ -41,6 +38,6 @@ ReactDOM.render(
</Button> </Button>
</Dropdown> </Dropdown>
</div>, </div>,
mountNode mountNode,
); );
```` ```

41
components/button/demo/size.md
View File

@ -17,7 +17,7 @@ Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size. If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
````jsx ```jsx
import { Button, Radio, Icon } from 'antd'; import { Button, Radio, Icon } from 'antd';
class ButtonSize extends React.Component { class ButtonSize extends React.Component {
@ -25,9 +25,9 @@ class ButtonSize extends React.Component {
size: 'large', size: 'large',
}; };
handleSizeChange = (e) => { handleSizeChange = e => {
this.setState({ size: e.target.value }); this.setState({ size: e.target.value });
} };
render() { render() {
const size = this.state.size; const size = this.state.size;
@ -38,23 +38,38 @@ class ButtonSize extends React.Component {
<Radio.Button value="default">Default</Radio.Button> <Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button> <Radio.Button value="small">Small</Radio.Button>
</Radio.Group> </Radio.Group>
<br /><br /> <br />
<Button type="primary" size={size}>Primary</Button> <br />
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Normal</Button> <Button size={size}>Normal</Button>
<Button type="dashed" size={size}>Dashed</Button> <Button type="dashed" size={size}>
<Button type="danger" size={size}>Danger</Button> Dashed
<Button type="link" size={size}>Link</Button> </Button>
<Button type="danger" size={size}>
Danger
</Button>
<Button type="link" size={size}>
Link
</Button>
<br /> <br />
<Button type="primary" shape="circle" icon="download" size={size} /> <Button type="primary" shape="circle" icon="download" size={size} />
<Button type="primary" shape="round" icon="download" size={size}>Download</Button> <Button type="primary" shape="round" icon="download" size={size}>
<Button type="primary" icon="download" size={size}>Download</Button> Download
</Button>
<Button type="primary" icon="download" size={size}>
Download
</Button>
<br /> <br />
<Button.Group size={size}> <Button.Group size={size}>
<Button type="primary"> <Button type="primary">
<Icon type="left" />Backward <Icon type="left" />
Backward
</Button> </Button>
<Button type="primary"> <Button type="primary">
Forward<Icon type="right" /> Forward
<Icon type="right" />
</Button> </Button>
</Button.Group> </Button.Group>
</div> </div>
@ -63,4 +78,4 @@ class ButtonSize extends React.Component {
} }
ReactDOM.render(<ButtonSize />, mountNode); ReactDOM.render(<ButtonSize />, mountNode);
```` ```

2
components/button/index.en-US.md
View File

@ -15,7 +15,7 @@ A button means an operation (or a series of operations). Clicking a button will
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`. To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| disabled | disabled state of button | boolean | `false` | | disabled | disabled state of button | boolean | `false` |
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | `false` | | ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | `false` |
| href | redirect url of link button | string | - | | href | redirect url of link button | string | - |

3
components/button/index.zh-CN.md
View File

@ -18,7 +18,7 @@ subtitle: 按钮
按钮的属性说明如下： 按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- |
| disabled | 按钮失效状态 | boolean | `false` | | disabled | 按钮失效状态 | boolean | `false` |
| ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false | | ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |
@ -44,7 +44,6 @@ subtitle: 按钮
设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。 设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
<style> <style>
[id^="components-button-demo-"] .ant-btn { [id^="components-button-demo-"] .ant-btn {
margin-right: 8px; margin-right: 8px;

5
components/button/style/mixin.less
View File

@ -88,7 +88,6 @@
} }
.button-variant-ghost(@color; @border: @color) { .button-variant-ghost(@color; @border: @color) {
.button-color(@color; transparent; @border); .button-color(@color; transparent; @border);
text-shadow: none; text-shadow: none;
&:hover, &:hover,
&:focus { &:focus {
@ -149,13 +148,11 @@
&-lg > .@{btnClassName}, &-lg > .@{btnClassName},
&-lg > span > .@{btnClassName} { &-lg > span > .@{btnClassName} {
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0); .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
line-height: @btn-height-lg - 2px; line-height: @btn-height-lg - 2px;
} }
&-sm > .@{btnClassName}, &-sm > .@{btnClassName},
&-sm > span > .@{btnClassName} { &-sm > span > .@{btnClassName} {
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0); .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
line-height: @btn-height-sm - 2px; line-height: @btn-height-sm - 2px;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
font-size: @font-size-base; font-size: @font-size-base;
@ -229,7 +226,6 @@
// dashed button style // dashed button style
.btn-dashed() { .btn-dashed() {
.button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border); .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
border-style: dashed; border-style: dashed;
} }
// danger button style // danger button style
@ -239,7 +235,6 @@
// link button style // link button style
.btn-link() { .btn-link() {
.button-variant-other(@link-color, transparent, transparent); .button-variant-other(@link-color, transparent, transparent);
box-shadow: none; box-shadow: none;
&:hover, &:hover,
&:focus, &:focus,

9
components/calendar/demo/basic.md
View File

@ -13,15 +13,12 @@ title:
A basic calendar component with Year/Month switch. A basic calendar component with Year/Month switch.
````jsx ```jsx
import { Calendar } from 'antd'; import { Calendar } from 'antd';
function onPanelChange(value, mode) { function onPanelChange(value, mode) {
console.log(value, mode); console.log(value, mode);
} }
ReactDOM.render( ReactDOM.render(<Calendar onPanelChange={onPanelChange} />, mountNode);
<Calendar onPanelChange={onPanelChange} />, ```
mountNode
);
````

6
components/calendar/demo/card.md
View File

@ -13,7 +13,7 @@ title:
Nested inside a container element for rendering in limited space. Nested inside a container element for rendering in limited space.
````jsx ```jsx
import { Calendar } from 'antd'; import { Calendar } from 'antd';
function onPanelChange(value, mode) { function onPanelChange(value, mode) {
@ -24,6 +24,6 @@ ReactDOM.render(
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}> <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} onPanelChange={onPanelChange} /> <Calendar fullscreen={false} onPanelChange={onPanelChange} />
</div>, </div>,
mountNode mountNode,
); );
```` ```

25
components/calendar/demo/notice-calendar.md
View File

@ -13,7 +13,7 @@ title:
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need. This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
````jsx ```jsx
import { Calendar, Badge } from 'antd'; import { Calendar, Badge } from 'antd';
function getListData(value) { function getListData(value) {
@ -23,13 +23,15 @@ function getListData(value) {
listData = [ listData = [
{ type: 'warning', content: 'This is warning event.' }, { type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' }, { type: 'success', content: 'This is usual event.' },
]; break; ];
break;
case 10: case 10:
listData = [ listData = [
{ type: 'warning', content: 'This is warning event.' }, { type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' }, { type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' }, { type: 'error', content: 'This is error event.' },
]; break; ];
break;
case 15: case 15:
listData = [ listData = [
{ type: 'warning', content: 'This is warning event' }, { type: 'warning', content: 'This is warning event' },
@ -38,7 +40,8 @@ function getListData(value) {
{ type: 'error', content: 'This is error event 2.' }, { type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' }, { type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' }, { type: 'error', content: 'This is error event 4.' },
]; break; ];
break;
default: default:
} }
return listData || []; return listData || [];
@ -48,13 +51,11 @@ function dateCellRender(value) {
const listData = getListData(value); const listData = getListData(value);
return ( return (
<ul className="events"> <ul className="events">
{ {listData.map(item => (
listData.map(item => (
<li key={item.content}> <li key={item.content}>
<Badge status={item.type} text={item.content} /> <Badge status={item.type} text={item.content} />
</li> </li>
)) ))}
}
</ul> </ul>
); );
} }
@ -77,11 +78,11 @@ function monthCellRender(value) {
ReactDOM.render( ReactDOM.render(
<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />, <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
mountNode mountNode,
); );
```` ```
````css ```css
.events { .events {
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -101,4 +102,4 @@ ReactDOM.render(
.notes-month section { .notes-month section {
font-size: 28px; font-size: 28px;
} }
```` ```

18
components/calendar/demo/select.md
View File

@ -13,7 +13,7 @@ title:
A basic calendar component with Year/Month switch. A basic calendar component with Year/Month switch.
````jsx ```jsx
import { Calendar, Alert } from 'antd'; import { Calendar, Alert } from 'antd';
import moment from 'moment'; import moment from 'moment';
@ -21,24 +21,26 @@ class App extends React.Component {
state = { state = {
value: moment('2017-01-25'), value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'), selectedValue: moment('2017-01-25'),
} };
onSelect = (value) => { onSelect = value => {
this.setState({ this.setState({
value, value,
selectedValue: value, selectedValue: value,
}); });
} };
onPanelChange = (value) => { onPanelChange = value => {
this.setState({ value }); this.setState({ value });
} };
render() { render() {
const { value, selectedValue } = this.state; const { value, selectedValue } = this.state;
return ( return (
<div> <div>
<Alert message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`} /> <Alert
message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
/>
<Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} /> <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
</div> </div>
); );
@ -46,4 +48,4 @@ class App extends React.Component {
} }
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);
```` ```

2
components/calendar/index.en-US.md
View File

@ -30,7 +30,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | | dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - | | dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date | | defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |

18
components/card/demo/basic.md
View File

@ -11,35 +11,25 @@ title:
## en-US ## en-US
A basic card containing a title, content and an extra corner content. A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
Supports two sizes: `default` and `small`.
```jsx ```jsx
import { Card } from 'antd'; import { Card } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Card <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
title="Default size card"
extra={<a href="#">More</a>}
style={{ width: 300 }}
>
<p>Card content</p> <p>Card content</p>
<p>Card content</p> <p>Card content</p>
<p>Card content</p> <p>Card content</p>
</Card> </Card>
<Card <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
size="small"
title="Small size card"
extra={<a href="#">More</a>}
style={{ width: 300 }}
>
<p>Card content</p> <p>Card content</p>
<p>Card content</p> <p>Card content</p>
<p>Card content</p> <p>Card content</p>
</Card> </Card>
</div>, </div>,
mountNode mountNode,
); );
``` ```

6
components/card/demo/border-less.md
View File

@ -13,7 +13,7 @@ title:
A borderless card on a gray background. A borderless card on a gray background.
````jsx ```jsx
import { Card } from 'antd'; import { Card } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -24,6 +24,6 @@ ReactDOM.render(
<p>Card content</p> <p>Card content</p>
</Card> </Card>
</div>, </div>,
mountNode mountNode,
); );
```` ```

12
components/card/demo/flexible-content.md
View File

@ -13,8 +13,7 @@ title:
You can use `Card.Meta` to support more flexible content. You can use `Card.Meta` to support more flexible content.
```jsx
````jsx
import { Card } from 'antd'; import { Card } from 'antd';
const { Meta } = Card; const { Meta } = Card;
@ -25,11 +24,8 @@ ReactDOM.render(
style={{ width: 240 }} style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />} cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
> >
<Meta <Meta title="Europe Street beat" description="www.instagram.com" />
title="Europe Street beat"
description="www.instagram.com"
/>
</Card>, </Card>,
mountNode mountNode,
); );
```` ```

6
components/card/demo/grid-card.md
View File

@ -13,7 +13,7 @@ title:
Grid style card content. Grid style card content.
````jsx ```jsx
import { Card } from 'antd'; import { Card } from 'antd';
const gridStyle = { const gridStyle = {
@ -31,6 +31,6 @@ ReactDOM.render(
<Card.Grid style={gridStyle}>Content</Card.Grid> <Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid style={gridStyle}>Content</Card.Grid> <Card.Grid style={gridStyle}>Content</Card.Grid>
</Card>, </Card>,
mountNode mountNode,
); );
```` ```

18
components/card/demo/in-column.md
View File

@ -13,23 +13,29 @@ title:
Cards usually cooperate with grid column layout in overview page. Cards usually cooperate with grid column layout in overview page.
````jsx ```jsx
import { Card, Col, Row } from 'antd'; import { Card, Col, Row } from 'antd';
ReactDOM.render( ReactDOM.render(
<div style={{ background: '#ECECEC', padding: '30px' }}> <div style={{ background: '#ECECEC', padding: '30px' }}>
<Row gutter={16}> <Row gutter={16}>
<Col span={8}> <Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card> <Card title="Card title" bordered={false}>
Card content
</Card>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card> <Card title="Card title" bordered={false}>
Card content
</Card>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card> <Card title="Card title" bordered={false}>
Card content
</Card>
</Col> </Col>
</Row> </Row>
</div>, </div>,
mountNode mountNode,
); );
```` ```

12
components/card/demo/inner.md
View File

@ -13,7 +13,7 @@ title:
It can be placed inside the ordinary card to display the information of the multilevel structure. It can be placed inside the ordinary card to display the information of the multilevel structure.
````jsx ```jsx
import { Card } from 'antd'; import { Card } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -28,11 +28,7 @@ ReactDOM.render(
> >
Group title Group title
</p> </p>
<Card <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
type="inner"
title="Inner Card title"
extra={<a href="#">More</a>}
>
Inner Card content Inner Card content
</Card> </Card>
<Card <Card
@ -44,6 +40,6 @@ ReactDOM.render(
Inner Card content Inner Card content
</Card> </Card>
</Card>, </Card>,
mountNode mountNode,
); );
```` ```

22
components/card/demo/loading.md
View File

@ -13,21 +13,19 @@ title:
Shows a loading indicator while the contents of the card is being fetched. Shows a loading indicator while the contents of the card is being fetched.
````jsx ```jsx
import { import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';
Skeleton, Switch, Card, Icon, Avatar,
} from 'antd';
const { Meta } = Card; const { Meta } = Card;
class App extends React.Component { class App extends React.Component {
state = { state = {
loading: true, loading: true,
} };
onChange = (checked) => { onChange = checked => {
this.setState({ loading: !checked }); this.setState({ loading: !checked });
} };
render() { render() {
const { loading } = this.state; const { loading } = this.state;
@ -38,7 +36,9 @@ class App extends React.Component {
<Card style={{ width: 300, marginTop: 16 }} loading={loading}> <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Meta <Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />} avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
}
title="Card title" title="Card title"
description="This is the description" description="This is the description"
/> />
@ -50,7 +50,9 @@ class App extends React.Component {
> >
<Skeleton loading={loading} avatar active> <Skeleton loading={loading} avatar active>
<Meta <Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />} avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
}
title="Card title" title="Card title"
description="This is the description" description="This is the description"
/> />
@ -62,4 +64,4 @@ class App extends React.Component {
} }
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);
```` ```

13
components/card/demo/meta.md
View File

@ -13,7 +13,7 @@ title:
A Card that supports `cover`, `avatar`, `title` and `description`. A Card that supports `cover`, `avatar`, `title` and `description`.
````jsx ```jsx
import { Card, Icon, Avatar } from 'antd'; import { Card, Icon, Avatar } from 'antd';
const { Meta } = Card; const { Meta } = Card;
@ -21,7 +21,12 @@ const { Meta } = Card;
ReactDOM.render( ReactDOM.render(
<Card <Card
style={{ width: 300 }} style={{ width: 300 }}
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />} cover={
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]} actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
> >
<Meta <Meta
@ -30,6 +35,6 @@ ReactDOM.render(
description="This is the description" description="This is the description"
/> />
</Card>, </Card>,
mountNode mountNode,
); );
```` ```

6
components/card/demo/simple.md
View File

@ -13,7 +13,7 @@ title:
A simple card only containing a content area. A simple card only containing a content area.
````jsx ```jsx
import { Card } from 'antd'; import { Card } from 'antd';
ReactDOM.render( ReactDOM.render(
@ -22,6 +22,6 @@ ReactDOM.render(
<p>Card content</p> <p>Card content</p>
<p>Card content</p> <p>Card content</p>
</Card>, </Card>,
mountNode mountNode,
); );
```` ```

40
components/card/demo/tabs.md
View File

@ -13,32 +13,39 @@ title:
More content can be hosted. More content can be hosted.
````jsx ```jsx
import { Card } from 'antd'; import { Card } from 'antd';
const tabList = [{ const tabList = [
{
key: 'tab1', key: 'tab1',
tab: 'tab1', tab: 'tab1',
}, { },
{
key: 'tab2', key: 'tab2',
tab: 'tab2', tab: 'tab2',
}]; },
];
const contentList = { const contentList = {
tab1: <p>content1</p>, tab1: <p>content1</p>,
tab2: <p>content2</p>, tab2: <p>content2</p>,
}; };
const tabListNoTitle = [{ const tabListNoTitle = [
{
key: 'article', key: 'article',
tab: 'article', tab: 'article',
}, { },
{
key: 'app', key: 'app',
tab: 'app', tab: 'app',
}, { },
{
key: 'project', key: 'project',
tab: 'project', tab: 'project',
}]; },
];
const contentListNoTitle = { const contentListNoTitle = {
article: <p>article content</p>, article: <p>article content</p>,
@ -50,12 +57,12 @@ class TabsCard extends React.Component {
state = { state = {
key: 'tab1', key: 'tab1',
noTitleKey: 'app', noTitleKey: 'app',
} };
onTabChange = (key, type) => { onTabChange = (key, type) => {
console.log(key, type); console.log(key, type);
this.setState({ [type]: key }); this.setState({ [type]: key });
} };
render() { render() {
return ( return (
@ -66,16 +73,21 @@ class TabsCard extends React.Component {
extra={<a href="#">More</a>} extra={<a href="#">More</a>}
tabList={tabList} tabList={tabList}
activeTabKey={this.state.key} activeTabKey={this.state.key}
onTabChange={(key) => { this.onTabChange(key, 'key'); }} onTabChange={key => {
this.onTabChange(key, 'key');
}}
> >
{contentList[this.state.key]} {contentList[this.state.key]}
</Card> </Card>
<br /><br /> <br />
<br />
<Card <Card
style={{ width: '100%' }} style={{ width: '100%' }}
tabList={tabListNoTitle} tabList={tabListNoTitle}
activeTabKey={this.state.noTitleKey} activeTabKey={this.state.noTitleKey}
onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }} onTabChange={key => {
this.onTabChange(key, 'noTitleKey');
}}
> >
{contentListNoTitle[this.state.noTitleKey]} {contentListNoTitle[this.state.noTitleKey]}
</Card> </Card>
@ -85,4 +97,4 @@ class TabsCard extends React.Component {
} }
ReactDOM.render(<TabsCard />, mountNode); ReactDOM.render(<TabsCard />, mountNode);
```` ```

6
components/card/index.en-US.md
View File

@ -20,7 +20,7 @@ A card can be used to display content related to a single subject. The content c
### Card ### Card
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --- | --- | --- | --- |
| actions | The action list, shows at the bottom of the Card. | Array&lt;ReactNode> | - | | actions | The action list, shows at the bottom of the Card. | Array&lt;ReactNode> | - |
| activeTabKey | Current TabPane's key | string | - | | activeTabKey | Current TabPane's key | string | - |
| headStyle | Inline style to apply to the card head | object | - | | headStyle | Inline style to apply to the card head | object | - |
@ -40,14 +40,14 @@ A card can be used to display content related to a single subject. The content c
### Card.Grid ### Card.Grid
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --------- | ------------------------- | ------ | ------- |
| className | className of container | string | - | | className | className of container | string | - |
| style | style object of container | object | - | | style | style object of container | object | - |
### Card.Meta ### Card.Meta
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | ----------- | ------------------------- | --------- | ------- |
| avatar | avatar or icon | ReactNode | - | | avatar | avatar or icon | ReactNode | - |
| className | className of container | string | - | | className | className of container | string | - |
| description | description content | ReactNode | - | | description | description content | ReactNode | - |

4
components/card/index.zh-CN.md
View File

@ -41,14 +41,14 @@ cols: 1
### Card.Grid ### Card.Grid
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | --------- | ---------------------- | ------ | ------- |
| className | 网格容器类名 | string | - | | className | 网格容器类名 | string | - |
| style | 定义网格容器类名的样式 | object | - | | style | 定义网格容器类名的样式 | object | - |
### Card.Meta ### Card.Meta
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- | | ----------- | ------------------ | --------- | ------- |
| avatar | 头像/图标 | ReactNode | - | | avatar | 头像/图标 | ReactNode | - |
| className | 容器类名 | string | - | | className | 容器类名 | string | - |
| description | 描述内容 | ReactNode | - | | description | 描述内容 | ReactNode | - |

26
components/carousel/demo/autoplay.md
View File

@ -13,21 +13,29 @@ title:
Timing of scrolling to the next card/picture. Timing of scrolling to the next card/picture.
````jsx ```jsx
import { Carousel } from 'antd'; import { Carousel } from 'antd';
ReactDOM.render( ReactDOM.render(
<Carousel autoplay> <Carousel autoplay>
<div><h3>1</h3></div> <div>
<div><h3>2</h3></div> <h3>1</h3>
<div><h3>3</h3></div> </div>
<div><h3>4</h3></div> <div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>, </Carousel>,
mountNode mountNode,
); );
```` ```
````css ```css
/* For demo */ /* For demo */
.ant-carousel .slick-slide { .ant-carousel .slick-slide {
text-align: center; text-align: center;
@ -40,4 +48,4 @@ ReactDOM.render(
.ant-carousel .slick-slide h3 { .ant-carousel .slick-slide h3 {
color: #fff; color: #fff;
} }
```` ```

26
components/carousel/demo/basic.md
View File

@ -13,7 +13,7 @@ title:
Basic usage. Basic usage.
````jsx ```jsx
import { Carousel } from 'antd'; import { Carousel } from 'antd';
function onChange(a, b, c) { function onChange(a, b, c) {
@ -22,16 +22,24 @@ function onChange(a, b, c) {
ReactDOM.render( ReactDOM.render(
<Carousel afterChange={onChange}> <Carousel afterChange={onChange}>
<div><h3>1</h3></div> <div>
<div><h3>2</h3></div> <h3>1</h3>
<div><h3>3</h3></div> </div>
<div><h3>4</h3></div> <div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>, </Carousel>,
mountNode mountNode,
); );
```` ```
````css ```css
/* For demo */ /* For demo */
.ant-carousel .slick-slide { .ant-carousel .slick-slide {
text-align: center; text-align: center;
@ -44,4 +52,4 @@ ReactDOM.render(
.ant-carousel .slick-slide h3 { .ant-carousel .slick-slide h3 {
color: #fff; color: #fff;
} }
```` ```

26
components/carousel/demo/fade.md
View File

@ -13,21 +13,29 @@ title:
Slides use fade for transition. Slides use fade for transition.
````jsx ```jsx
import { Carousel } from 'antd'; import { Carousel } from 'antd';
ReactDOM.render( ReactDOM.render(
<Carousel effect="fade"> <Carousel effect="fade">
<div><h3>1</h3></div> <div>
<div><h3>2</h3></div> <h3>1</h3>
<div><h3>3</h3></div> </div>
<div><h3>4</h3></div> <div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>, </Carousel>,
mountNode mountNode,
); );
```` ```
````css ```css
/* For demo */ /* For demo */
.ant-carousel .slick-slide { .ant-carousel .slick-slide {
text-align: center; text-align: center;
@ -40,4 +48,4 @@ ReactDOM.render(
.ant-carousel .slick-slide h3 { .ant-carousel .slick-slide h3 {
color: #fff; color: #fff;
} }
```` ```

30
components/carousel/demo/position.md
View File

@ -13,7 +13,7 @@ title:
There are 4 position options available. There are 4 position options available.
````jsx ```jsx
import { Carousel, Radio } from 'antd'; import { Carousel, Radio } from 'antd';
class PositionCarouselDemo extends React.Component { class PositionCarouselDemo extends React.Component {
@ -27,17 +27,29 @@ class PositionCarouselDemo extends React.Component {
const { dotPosition } = this.state; const { dotPosition } = this.state;
return ( return (
<div> <div>
<Radio.Group onChange={this.handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}> <Radio.Group
onChange={this.handlePositionChange}
value={dotPosition}
style={{ marginBottom: 8 }}
>
<Radio.Button value="top">Top</Radio.Button> <Radio.Button value="top">Top</Radio.Button>
<Radio.Button value="bottom">Bottom</Radio.Button> <Radio.Button value="bottom">Bottom</Radio.Button>
<Radio.Button value="left">Left</Radio.Button> <Radio.Button value="left">Left</Radio.Button>
<Radio.Button value="right">Right</Radio.Button> <Radio.Button value="right">Right</Radio.Button>
</Radio.Group> </Radio.Group>
<Carousel dotPosition={dotPosition}> <Carousel dotPosition={dotPosition}>
<div><h3>1</h3></div> <div>
<div><h3>2</h3></div> <h3>1</h3>
<div><h3>3</h3></div> </div>
<div><h3>4</h3></div> <div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel> </Carousel>
</div> </div>
); );
@ -45,9 +57,9 @@ class PositionCarouselDemo extends React.Component {
} }
ReactDOM.render(<PositionCarouselDemo />, mountNode); ReactDOM.render(<PositionCarouselDemo />, mountNode);
```` ```
````css ```css
/* For demo */ /* For demo */
.ant-carousel .slick-slide { .ant-carousel .slick-slide {
text-align: center; text-align: center;
@ -60,4 +72,4 @@ ReactDOM.render(<PositionCarouselDemo />, mountNode);
.ant-carousel .slick-slide h3 { .ant-carousel .slick-slide h3 {
color: #fff; color: #fff;
} }
```` ```

4
components/carousel/index.en-US.md
View File

@ -15,7 +15,7 @@ A carousel component. Scales with its container.
## API ## API
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| -------- | ----------- | ---- | ------- | ------- | | --- | --- | --- | --- | --- |
| afterChange | Callback function called after the current index changes | function(current) | - | | | afterChange | Callback function called after the current index changes | function(current) | - | |
| autoplay | Whether to scroll automatically | boolean | `false` | | | autoplay | Whether to scroll automatically | boolean | `false` | |
| beforeChange | Callback function called before the current index changes | function(from, to) | - | | | beforeChange | Callback function called before the current index changes | function(from, to) | - | |
@ -27,7 +27,7 @@ A carousel component. Scales with its container.
## Methods ## Methods
| Name | Description | | Name | Description |
| ---- | ----------- | | --- | --- |
| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation | | goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
| next() | Change current slide to next slide | | next() | Change current slide to next slide |
| prev() | Change current slide to previous slide | | prev() | Change current slide to previous slide |

2
components/carousel/index.zh-CN.md
View File

@ -28,7 +28,7 @@ subtitle: 走马灯
## 方法 ## 方法
| 名称 | 描述 | | 名称 | 描述 |
| --- | --- | | ------------------------------ | ------------------------------------------------- |
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 | | goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
| next() | 切换到下一面板 | | next() | 切换到下一面板 |
| prev() | 切换到上一面板 | | prev() | 切换到上一面板 |

39
components/cascader/demo/basic.md
View File

@ -13,32 +13,43 @@ title:
Cascade selection box for selecting province/city/district. Cascade selection box for selecting province/city/district.
````jsx ```jsx
import { Cascader } from 'antd'; import { Cascader } from 'antd';
const options = [{ const options = [
{
value: 'zhejiang', value: 'zhejiang',
label: 'Zhejiang', label: 'Zhejiang',
children: [{ children: [
{
value: 'hangzhou', value: 'hangzhou',
label: 'Hangzhou', label: 'Hangzhou',
children: [{ children: [
{
value: 'xihu', value: 'xihu',
label: 'West Lake', label: 'West Lake',
}], },
}], ],
}, { },
],
},
{
value: 'jiangsu', value: 'jiangsu',
label: 'Jiangsu', label: 'Jiangsu',
children: [{ children: [
{
value: 'nanjing', value: 'nanjing',
label: 'Nanjing', label: 'Nanjing',
children: [{ children: [
{
value: 'zhonghuamen', value: 'zhonghuamen',
label: 'Zhong Hua Men', label: 'Zhong Hua Men',
}], },
}], ],
}]; },
],
},
];
function onChange(value) { function onChange(value) {
console.log(value); console.log(value);
@ -46,6 +57,6 @@ function onChange(value) {
ReactDOM.render( ReactDOM.render(
<Cascader options={options} onChange={onChange} placeholder="Please select" />, <Cascader options={options} onChange={onChange} placeholder="Please select" />,
mountNode mountNode,
); );
```` ```

42
components/cascader/demo/change-on-select.md
View File

@ -13,39 +13,47 @@ title:
Allow only select parent options. Allow only select parent options.
````jsx ```jsx
import { Cascader } from 'antd'; import { Cascader } from 'antd';
const options = [{ const options = [
{
value: 'zhejiang', value: 'zhejiang',
label: 'Zhejiang', label: 'Zhejiang',
children: [{ children: [
{
value: 'hangzhou', value: 'hangzhou',
label: 'Hanzhou', label: 'Hanzhou',
children: [{ children: [
{
value: 'xihu', value: 'xihu',
label: 'West Lake', label: 'West Lake',
}], },
}], ],
}, { },
],
},
{
value: 'jiangsu', value: 'jiangsu',
label: 'Jiangsu', label: 'Jiangsu',
children: [{ children: [
{
value: 'nanjing', value: 'nanjing',
label: 'Nanjing', label: 'Nanjing',
children: [{ children: [
{
value: 'zhonghuamen', value: 'zhonghuamen',
label: 'Zhong Hua Men', label: 'Zhong Hua Men',
}], },
}], ],
}]; },
],
},
];
function onChange(value) { function onChange(value) {
console.log(value); console.log(value);
} }
ReactDOM.render( ReactDOM.render(<Cascader options={options} onChange={onChange} changeOnSelect />, mountNode);
<Cascader options={options} onChange={onChange} changeOnSelect />, ```
mountNode
);
````

42
components/cascader/demo/custom-render.md
View File

@ -13,41 +13,53 @@ title:
For instance, add an external link after the selected value. For instance, add an external link after the selected value.
````jsx ```jsx
import { Cascader } from 'antd'; import { Cascader } from 'antd';
const options = [{ const options = [
{
value: 'zhejiang', value: 'zhejiang',
label: 'Zhejiang', label: 'Zhejiang',
children: [{ children: [
{
value: 'hangzhou', value: 'hangzhou',
label: 'Hangzhou', label: 'Hangzhou',
children: [{ children: [
{
value: 'xihu', value: 'xihu',
label: 'West Lake', label: 'West Lake',
code: 752100, code: 752100,
}], },
}], ],
}, { },
],
},
{
value: 'jiangsu', value: 'jiangsu',
label: 'Jiangsu', label: 'Jiangsu',
children: [{ children: [
{
value: 'nanjing', value: 'nanjing',
label: 'Nanjing', label: 'Nanjing',
children: [{ children: [
{
value: 'zhonghuamen', value: 'zhonghuamen',
label: 'Zhong Hua Men', label: 'Zhong Hua Men',
code: 453400, code: 453400,
}], },
}], ],
}]; },
],
},
];
function handleAreaClick(e, label, option) { function handleAreaClick(e, label, option) {
e.stopPropagation(); e.stopPropagation();
console.log('clicked', label, option); console.log('clicked', label, option);
} }
const displayRender = (labels, selectedOptions) => labels.map((label, i) => { const displayRender = (labels, selectedOptions) =>
labels.map((label, i) => {
const option = selectedOptions[i]; const option = selectedOptions[i];
if (i === labels.length - 1) { if (i === labels.length - 1) {
return ( return (
@ -66,6 +78,6 @@ ReactDOM.render(
displayRender={displayRender} displayRender={displayRender}
style={{ width: '100%' }} style={{ width: '100%' }}
/>, />,
mountNode mountNode,
); );
```` ```

27
components/cascader/demo/custom-trigger.md
View File

@ -13,24 +13,31 @@ title:
Separate trigger button and result. Separate trigger button and result.
````jsx ```jsx
import { Cascader } from 'antd'; import { Cascader } from 'antd';
const options = [{ const options = [
{
value: 'zhejiang', value: 'zhejiang',
label: 'Zhejiang', label: 'Zhejiang',
children: [{ children: [
{
value: 'hangzhou', value: 'hangzhou',
label: 'Hangzhou', label: 'Hangzhou',
}], },
}, { ],
},
{
value: 'jiangsu', value: 'jiangsu',
label: 'Jiangsu', label: 'Jiangsu',
children: [{ children: [
{
value: 'nanjing', value: 'nanjing',
label: 'Nanjing', label: 'Nanjing',
}], },
}]; ],
},
];
class CitySwitcher extends React.Component { class CitySwitcher extends React.Component {
state = { state = {
@ -41,7 +48,7 @@ class CitySwitcher extends React.Component {
this.setState({ this.setState({
text: selectedOptions.map(o => o.label).join(', '), text: selectedOptions.map(o => o.label).join(', '),
}); });
} };
render() { render() {
return ( return (
@ -57,4 +64,4 @@ class CitySwitcher extends React.Component {
} }
ReactDOM.render(<CitySwitcher />, mountNode); ReactDOM.render(<CitySwitcher />, mountNode);
```` ```

Some files were not shown because too many files have changed in this diff Show More