test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 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 = '';
// Build components in one file: lib/style/components.less
fs.readdir(componentsPath, (err, files) => {
files.forEach((file) => {
files.forEach(file => {
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
}

2
.depslintrc.js
View File

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

13
.eslintrc.js
View File

@ -1,9 +1,5 @@
const eslintrc = {
extends: [
'airbnb',
'prettier',
'plugin:jest/recommended',
],
extends: ['airbnb', 'prettier', 'plugin:jest/recommended'],
env: {
browser: true,
node: true,
@ -12,12 +8,7 @@ const eslintrc = {
es6: true,
},
parser: 'babel-eslint',
plugins: [
'markdown',
'react',
'babel',
'jest',
],
plugins: ['markdown', 'react', 'babel', 'jest'],
rules: {
'react/jsx-one-expression-per-line': 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 ⚠️"
about: The issue which is not created via http://new-issue.ant.design will be closed
immediately.
name: '⚠️ Please use new-issue.ant.design ⚠️'
about: The issue which is not created via http://new-issue.ant.design will be closed immediately.
labels:
---
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)]
-->
### 🤔 This is a ...
- [ ] New feature

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

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

5
.remarkrc.js
View File

@ -1,8 +1,5 @@
const config = {
plugins: [
'remark-preset-lint-recommended',
['remark-lint-list-item-indent', 'space'],
],
plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', 'space']],
};
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:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* 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
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- 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
## Our Responsibilities

26
README-zh_CN.md
View File

@ -10,21 +10,11 @@
一套企业级的 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)
[![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)
[![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)
[![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)
[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI)
[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![](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)
</div>
@ -41,13 +31,13 @@
## 🖥 支持环境
* 现代浏览器和 IE9 及以上。
* 支持服务端渲染。
* [Electron](http://electron.atom.io/)
- 现代浏览器和 IE9 及以上。
- 支持服务端渲染。
- [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 |
| --------- | --------- | --------- | --------- | --------- | --------- |
| 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.
[![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)
[![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)
[![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)
[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI)
[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![](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)
</div>
@ -41,13 +31,13 @@ English | [简体中文](./README-zh_CN.md)
## 🖥 Environment Support
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
* Server-side Rendering
* [Electron](http://electron.atom.io/)
- Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
- Server-side Rendering
- [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 |
| --------- | --------- | --------- | --------- | --------- | --------- |
| 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

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

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

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

@ -13,13 +13,13 @@ title:
Callback with affixed state.
````jsx
```jsx
import { Affix, Button } from 'antd';
ReactDOM.render(
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
<Button>120px to affix top</Button>
</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`).
````jsx
```jsx
import { Affix, Button } from 'antd';
class Demo extends React.Component {
render() {
return (
<div className="scrollable-container" ref={(node) => { this.container = node; }}>
<div
className="scrollable-container"
ref={node => {
this.container = node;
}}
>
<div className="background">
<Affix target={() => this.container}>
<Button type="primary">
Fixed at the top of container
</Button>
<Button type="primary">Fixed at the top of container</Button>
</Affix>
</div>
</div>
@ -33,7 +36,7 @@ class Demo extends React.Component {
}
ReactDOM.render(<Demo />, mountNode);
````
```
<style>
#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
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| 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 |
| 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`:
```jsx
<Affix style={{ position: 'absolute', top: y, left: x }}>
...
</Affix>
<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
```
## FAQ

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

@ -25,9 +25,7 @@ title: Affix
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
```jsx
<Affix style={{ position: 'absolute', top: y, left: x }}>
...
</Affix>
<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
```
## 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);
}
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) {
return offsetTop + targetRect.top;
}
return undefined;
}
export function getFixedBottom(placeholderReact: Rect, targetRect: Rect, offsetBottom: number | undefined) {
if (
offsetBottom !== undefined &&
targetRect.bottom < placeholderReact.bottom + offsetBottom
export function getFixedBottom(
placeholderReact: Rect,
targetRect: Rect,
offsetBottom: number | undefined,
) {
if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
const targetBottomOffset = window.innerHeight - targetRect.bottom;
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.
````jsx
```jsx
import { Alert } from 'antd';
ReactDOM.render(
<div>
<Alert message="Warning text" banner />
<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 />
<Alert showIcon={false} message="Warning text without icon" banner />
<br />
<Alert type="error" message="Error text" banner />
</div>,
mountNode
mountNode,
);
````
```

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

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

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

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

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

@ -13,11 +13,8 @@ title:
Replace the default icon with customized text.
````jsx
```jsx
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Info Text" type="info" closeText="Close Now" />,
mountNode
);
````
ReactDOM.render(<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.
````jsx
```jsx
import { Alert, Icon } from 'antd';
const icon = <Icon type="smile" />;
@ -55,6 +55,6 @@ ReactDOM.render(
showIcon
/>
</div>,
mountNode
mountNode,
);
````
```

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

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

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

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

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

@ -14,7 +14,7 @@ Alert component for feedback.
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| afterClose | Called when close animation is finished | () => void | - |
| banner | Whether to show as banner | boolean | false |
| 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>
</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>
</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>
</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
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| affix | Fixed mode of Anchor | boolean | true |
| bounds | Bounding distance of anchor area | number | 5(px) |
| getContainer | Scrolling container | () => HTMLElement | () => window |
@ -28,6 +28,6 @@ For displaying anchor hyperlinks on page and jumping between them.
### Link Props
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| -------- | -------------------- | ----------------- | ------- |
| href | target of hyperlink | string | |
| title | content of hyperlink | string\|ReactNode | |

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

@ -29,6 +29,6 @@ title: Anchor
### Link Props
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| ----- | -------- | ----------------- | ------ |
| href | 锚点链接 | string | |
| 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.
````jsx
```jsx
import { AutoComplete } from 'antd';
function onSelect(value) {
@ -23,17 +23,13 @@ function onSelect(value) {
class Complete extends React.Component {
state = {
dataSource: [],
}
};
handleSearch = (value) => {
handleSearch = value => {
this.setState({
dataSource: !value ? [] : [
value,
value + value,
value + value + value,
],
dataSource: !value ? [] : [value, value + value, value + value + value],
});
}
};
render() {
const { dataSource } = this.state;
@ -50,4 +46,4 @@ class Complete extends React.Component {
}
ReactDOM.render(<Complete />, mountNode);
````
```

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

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

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

@ -13,7 +13,7 @@ title:
Customize Input Component
````jsx
```jsx
import { AutoComplete, Input } from 'antd';
const { TextArea } = Input;
@ -25,21 +25,17 @@ function onSelect(value) {
class Complete extends React.Component {
state = {
dataSource: [],
}
};
handleSearch = (value) => {
handleSearch = value => {
this.setState({
dataSource: !value ? [] : [
value,
value + value,
value + value + value,
],
dataSource: !value ? [] : [value, value + value, value + value + value],
});
}
};
handleKeyPress = (ev) => {
handleKeyPress = ev => {
console.log('handleKeyPress', ev);
}
};
render() {
const { dataSource } = this.state;
@ -62,4 +58,4 @@ class Complete extends React.Component {
}
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
````jsx
```jsx
import { AutoComplete } from 'antd';
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
@ -24,10 +24,12 @@ function Complete() {
style={{ width: 200 }}
dataSource={dataSource}
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);
````
```

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

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

@ -11,13 +11,10 @@ title:
## en-US
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
Basic Usage, set datasource of autocomplete with `dataSource` property.
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx
import {
Icon, Button, Input, AutoComplete,
} from 'antd';
```jsx
import { Icon, Button, Input, AutoComplete } from 'antd';
const Option = AutoComplete.Option;
@ -30,7 +27,9 @@ function getRandomInt(max, min = 0) {
}
function searchResult(query) {
return (new Array(getRandomInt(5))).join('.').split('.')
return new Array(getRandomInt(5))
.join('.')
.split('.')
.map((item, idx) => ({
query,
category: `${query}${idx}`,
@ -62,13 +61,13 @@ function renderOption(item) {
class Complete extends React.Component {
state = {
dataSource: [],
}
};
handleSearch = (value) => {
handleSearch = value => {
this.setState({
dataSource: value ? searchResult(value) : [],
});
}
};
render() {
const { dataSource } = this.state;
@ -85,11 +84,11 @@ class Complete extends React.Component {
optionLabelProp="text"
>
<Input
suffix={(
suffix={
<Button className="search-btn" size="large" type="primary">
<Icon type="search" />
</Button>
)}
}
/>
</AutoComplete>
</div>
@ -98,9 +97,9 @@ class Complete extends React.Component {
}
ReactDOM.render(<Complete />, mountNode);
````
```
````css
```css
.global-search-wrapper {
padding-right: 50px;
}
@ -139,4 +138,4 @@ ReactDOM.render(<Complete />, mountNode);
.global-search-item-count {
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
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
<AutoComplete dataSource={dataSource} />;
```
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| autoFocus | get focus when component mounted | boolean | false |
| backfill | backfill selected item the input when using keyboard | boolean | false |
@ -45,6 +45,6 @@ const dataSource = ['12345', '23456', '34567'];
## Methods
| Name | Description |
| ---- | ----------- |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |

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

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

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

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

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

@ -13,7 +13,7 @@ title:
Three sizes and two shapes are available.
````jsx
```jsx
import { Avatar } from 'antd';
ReactDOM.render(
@ -31,9 +31,9 @@ ReactDOM.render(
<Avatar shape="square" size="small" icon="user" />
</div>
</div>,
mountNode
mountNode,
);
````
```
<style>
#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.
````jsx
```jsx
import { Avatar, Button } from 'antd';
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],
color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
});
}
};
render() {
return (
@ -42,7 +42,11 @@ class Autoset extends React.Component {
<Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large">
{this.state.user}
</Avatar>
<Button size="small" style={{ marginLeft: 16, verticalAlign: 'middle' }} onClick={this.changeUser}>
<Button
size="small"
style={{ marginLeft: 16, verticalAlign: 'middle' }}
onClick={this.changeUser}
>
Change
</Button>
</div>
@ -51,4 +55,4 @@ class Autoset extends React.Component {
}
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.
````jsx
```jsx
import { Avatar, Button } from 'antd';
class App extends React.Component {
@ -28,7 +28,7 @@ class App extends React.Component {
this.setState({
hide: !this.state.hide,
});
}
};
toggleSize = () => {
const sizes = ['small', 'default', 'large'];
@ -39,13 +39,13 @@ class App extends React.Component {
this.setState({
size: sizes[current],
});
}
};
changeScale = () => {
this.setState({
scale: this.state.scale === 1 ? 2 : 1,
});
}
};
render() {
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
</Avatar>
<Avatar size={size} src="invalid" style={{ background: '#00a2ae', display: hide ? 'none' : '' }}>
<Avatar
size={size}
src="invalid"
style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
>
Invalid
</Avatar>
<div style={{ display: hide ? 'none' : '' }}>
@ -78,3 +82,4 @@ class App extends React.Component {
}
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.
````jsx
```jsx
import { Avatar } from 'antd';
ReactDOM.render(
@ -25,9 +25,9 @@ ReactDOM.render(
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>,
mountNode
mountNode,
);
````
```
<style>
#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
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
| shape | the shape of avatar | `circle` \| `square` | `circle` |
| 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.
````jsx
```jsx
import { BackTop } from 'antd';
ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
<strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
button.
</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`.
````jsx
```jsx
import { BackTop } from 'antd';
ReactDOM.render(
@ -26,11 +25,11 @@ ReactDOM.render(
<strong style={{ color: '#1088e9' }}> blue </strong>
button.
</div>,
mountNode
mountNode,
);
````
```
````css
```css
#components-back-top-demo-custom .ant-back-top {
bottom: 100px;
}
@ -44,4 +43,4 @@ ReactDOM.render(
text-align: center;
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`.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| 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 |
| 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.
````jsx
```jsx
import { Badge, Icon } from 'antd';
ReactDOM.render(
@ -28,9 +28,9 @@ ReactDOM.render(
<a href="#" className="head-example" />
</Badge>
</div>,
mountNode
mountNode,
);
````
```
<style>
.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.
````jsx
import {
Badge, Button, Icon, Switch,
} from 'antd';
```jsx
import { Badge, Button, Icon, Switch } from 'antd';
const ButtonGroup = Button.Group;
@ -24,12 +22,12 @@ class Demo extends React.Component {
state = {
count: 5,
show: true,
}
};
increase = () => {
const count = this.state.count + 1;
this.setState({ count });
}
};
decline = () => {
let count = this.state.count - 1;
@ -37,11 +35,11 @@ class Demo extends React.Component {
count = 0;
}
this.setState({ count });
}
};
onChange = (show) => {
onChange = show => {
this.setState({ show });
}
};
render() {
return (
@ -71,4 +69,4 @@ class Demo extends React.Component {
}
ReactDOM.render(<Demo />, mountNode);
````
```

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

@ -11,19 +11,32 @@ title:
## en-US
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.
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.
````jsx
```jsx
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(
<div>
<h4 style={{ marginBottom: 16 }}>Presets:</h4>
<div>
{colors.map((color) => (
{colors.map(color => (
<div key={color}>
<Badge color={color} text={color} />
</div>
@ -40,12 +53,12 @@ ReactDOM.render(
<Badge color="#108ee9" text="#108ee9" />
</div>
</div>,
mountNode
mountNode,
);
````
```
````css
```css
.ant-tag {
margin-bottom: 8px;
}
````
```

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

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

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

@ -15,18 +15,21 @@ title:
Used in standalone when children is empty.
````jsx
```jsx
import { Badge } from 'antd';
ReactDOM.render(
<div>
<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' }} />
</div>,
mountNode
mountNode,
);
````
```
<style>
.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`.
````jsx
```jsx
import { Badge } from 'antd';
ReactDOM.render(
@ -31,6 +31,6 @@ ReactDOM.render(
<a href="#" className="head-example" />
</Badge>
</div>,
mountNode
mountNode,
);
````
```

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

@ -13,7 +13,7 @@ title:
Standalone badge with status.
````jsx
```jsx
import { Badge } from 'antd';
ReactDOM.render(
@ -34,6 +34,6 @@ ReactDOM.render(
<br />
<Badge status="warning" text="Warning" />
</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`.
````jsx
```jsx
import { Badge } from 'antd';
ReactDOM.render(
@ -23,9 +23,9 @@ ReactDOM.render(
<a href="#" className="head-example" />
</Badge>
</div>,
mountNode
mountNode,
);
````
```
<style>
.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 |
| -------- | ----------- | ---- | ------- | ------- |
| --- | --- | --- | --- | --- |
| color | Customize Badge dot color | string | - | 3.16.0 |
| count | Number to show in badge | ReactNode | | |
| 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.
````jsx
import {
HashRouter as Router, Route, Switch, Link, withRouter,
} from 'react-router-dom';
```jsx
import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
import { Breadcrumb, Alert } from 'antd';
const Apps = () => (
@ -39,24 +37,22 @@ const breadcrumbNameMap = {
'/apps/1/detail': 'Detail',
'/apps/2/detail': 'Detail',
};
const Home = withRouter((props) => {
const Home = withRouter(props => {
const { location } = props;
const pathSnippets = location.pathname.split('/').filter(i => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return (
<Breadcrumb.Item key={url}>
<Link to={url}>
{breadcrumbNameMap[url]}
</Link>
<Link to={url}>{breadcrumbNameMap[url]}</Link>
</Breadcrumb.Item>
);
});
const breadcrumbItems = [(
const breadcrumbItems = [
<Breadcrumb.Item key="home">
<Link to="/">Home</Link>
</Breadcrumb.Item>
)].concat(extraBreadcrumbItems);
</Breadcrumb.Item>,
].concat(extraBreadcrumbItems);
return (
<div className="demo">
<div className="demo-nav">
@ -68,9 +64,7 @@ const Home = withRouter((props) => {
<Route render={() => <span>Home Page</span>} />
</Switch>
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
<Breadcrumb>
{breadcrumbItems}
</Breadcrumb>
<Breadcrumb>{breadcrumbItems}</Breadcrumb>
</div>
);
});
@ -79,11 +73,11 @@ ReactDOM.render(
<Router>
<Home />
</Router>,
mountNode
mountNode,
);
````
```
````css
```css
.demo {
margin: 16px;
}
@ -100,4 +94,4 @@ ReactDOM.render(
.app-list {
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=">"
````jsx
```jsx
import { Breadcrumb } from 'antd';
ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</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.
````jsx
```jsx
import { Breadcrumb, Icon } from 'antd';
ReactDOM.render(
@ -25,10 +25,8 @@ ReactDOM.render(
<Icon type="user" />
<span>Application List</span>
</Breadcrumb.Item>
<Breadcrumb.Item>
Application
</Breadcrumb.Item>
<Breadcrumb.Item>Application</Breadcrumb.Item>
</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.
````jsx
```jsx
import { Button } from 'antd';
ReactDOM.render(
@ -24,6 +24,6 @@ ReactDOM.render(
<Button type="danger">Danger</Button>
<Button type="link">Link</Button>
</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.
````jsx
```jsx
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button type="primary" block>Primary</Button>
<Button type="primary" block>
Primary
</Button>
<Button block>Default</Button>
<Button type="dashed" block>Dashed</Button>
<Button type="danger" block>Danger</Button>
<Button type="link" block>Link</Button>
<Button type="dashed" block>
Dashed
</Button>
<Button type="danger" block>
Danger
</Button>
<Button type="link" block>
Link
</Button>
</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.
````jsx
```jsx
import { Button, Icon } from 'antd';
const ButtonGroup = Button.Group;
@ -43,10 +43,12 @@ ReactDOM.render(
<h4>With Icon</h4>
<ButtonGroup>
<Button type="primary">
<Icon type="left" />Go back
<Icon type="left" />
Go back
</Button>
<Button type="primary">
Go forward<Icon type="right" />
Go forward
<Icon type="right" />
</Button>
</ButtonGroup>
<ButtonGroup>
@ -54,9 +56,9 @@ ReactDOM.render(
<Button type="primary" icon="cloud-download" />
</ButtonGroup>
</div>,
mountNode
mountNode,
);
````
```
<style>
#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`.
````jsx
```jsx
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button type="primary">Primary</Button>
<Button type="primary" disabled>Primary(disabled)</Button>
<Button type="primary" disabled>
Primary(disabled)
</Button>
<br />
<Button>Default</Button>
<Button disabled>Default(disabled)</Button>
<br />
<Button type="dashed">Dashed</Button>
<Button type="dashed" disabled>Dashed(disabled)</Button>
<Button type="dashed" disabled>
Dashed(disabled)
</Button>
<br />
<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)' }}>
<Button ghost>Ghost</Button>
<Button ghost disabled>Ghost(disabled)</Button>
<Button ghost disabled>
Ghost(disabled)
</Button>
</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.
````jsx
```jsx
import { Button } from 'antd';
ReactDOM.render(
<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 type="dashed" ghost>Dashed</Button>
<Button type="danger" ghost>danger</Button>
<Button type="link" ghost>link</Button>
<Button type="dashed" ghost>
Dashed
</Button>
<Button type="danger" ghost>
danger
</Button>
<Button type="link" ghost>
link
</Button>
</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.
````jsx
```jsx
import { Button } from 'antd';
ReactDOM.render(
<div>
<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 icon="search">Search</Button>
<br />
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<Button type="dashed" shape="circle" icon="search" />
<Button type="dashed" icon="search">Search</Button>
<Button type="dashed" icon="search">
Search
</Button>
</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`.
````jsx
```jsx
import { Button } from 'antd';
class App extends React.Component {
state = {
loading: false,
iconLoading: false,
}
};
enterLoading = () => {
this.setState({ loading: true });
}
};
enterIconLoading = () => {
this.setState({ iconLoading: true });
}
};
render() {
return (
@ -43,7 +43,12 @@ class App extends React.Component {
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
Click me!
</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!
</Button>
<br />
@ -55,4 +60,4 @@ class App extends React.Component {
}
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`.
````jsx
import {
Button, Menu, Dropdown, Icon,
} from 'antd';
```jsx
import { Button, Menu, Dropdown, Icon } from 'antd';
function handleMenuClick(e) {
console.log('click', e);
@ -41,6 +38,6 @@ ReactDOM.render(
</Button>
</Dropdown>
</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.
````jsx
```jsx
import { Button, Radio, Icon } from 'antd';
class ButtonSize extends React.Component {
@ -25,9 +25,9 @@ class ButtonSize extends React.Component {
size: 'large',
};
handleSizeChange = (e) => {
handleSizeChange = e => {
this.setState({ size: e.target.value });
}
};
render() {
const size = this.state.size;
@ -38,23 +38,38 @@ class ButtonSize extends React.Component {
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br /><br />
<Button type="primary" size={size}>Primary</Button>
<br />
<br />
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Normal</Button>
<Button type="dashed" size={size}>Dashed</Button>
<Button type="danger" size={size}>Danger</Button>
<Button type="link" size={size}>Link</Button>
<Button type="dashed" size={size}>
Dashed
</Button>
<Button type="danger" size={size}>
Danger
</Button>
<Button type="link" size={size}>
Link
</Button>
<br />
<Button type="primary" shape="circle" icon="download" size={size} />
<Button type="primary" shape="round" icon="download" size={size}>Download</Button>
<Button type="primary" icon="download" size={size}>Download</Button>
<Button type="primary" shape="round" icon="download" size={size}>
Download
</Button>
<Button type="primary" icon="download" size={size}>
Download
</Button>
<br />
<Button.Group size={size}>
<Button type="primary">
<Icon type="left" />Backward
<Icon type="left" />
Backward
</Button>
<Button type="primary">
Forward<Icon type="right" />
Forward
<Icon type="right" />
</Button>
</Button.Group>
</div>
@ -63,4 +78,4 @@ class ButtonSize extends React.Component {
}
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`.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| disabled | disabled state of button | 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 | - |

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

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

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

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

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

@ -13,15 +13,12 @@ title:
A basic calendar component with Year/Month switch.
````jsx
```jsx
import { Calendar } from 'antd';
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(
<Calendar onPanelChange={onPanelChange} />,
mountNode
);
````
ReactDOM.render(<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.
````jsx
```jsx
import { Calendar } from 'antd';
function onPanelChange(value, mode) {
@ -24,6 +24,6 @@ ReactDOM.render(
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
</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.
````jsx
```jsx
import { Calendar, Badge } from 'antd';
function getListData(value) {
@ -23,13 +23,15 @@ function getListData(value) {
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
]; break;
];
break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
];
break;
case 15:
listData = [
{ 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 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
];
break;
default:
}
return listData || [];
@ -48,13 +51,11 @@ function dateCellRender(value) {
const listData = getListData(value);
return (
<ul className="events">
{
listData.map(item => (
{listData.map(item => (
<li key={item.content}>
<Badge status={item.type} text={item.content} />
</li>
))
}
))}
</ul>
);
}
@ -77,11 +78,11 @@ function monthCellRender(value) {
ReactDOM.render(
<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
mountNode
mountNode,
);
````
```
````css
```css
.events {
list-style: none;
margin: 0;
@ -101,4 +102,4 @@ ReactDOM.render(
.notes-month section {
font-size: 28px;
}
````
```

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

@ -13,7 +13,7 @@ title:
A basic calendar component with Year/Month switch.
````jsx
```jsx
import { Calendar, Alert } from 'antd';
import moment from 'moment';
@ -21,24 +21,26 @@ class App extends React.Component {
state = {
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
}
};
onSelect = (value) => {
onSelect = value => {
this.setState({
value,
selectedValue: value,
});
}
};
onPanelChange = (value) => {
onPanelChange = value => {
this.setState({ value });
}
};
render() {
const { value, selectedValue } = this.state;
return (
<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} />
</div>
);
@ -46,4 +48,4 @@ class App extends React.Component {
}
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 |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| 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 | - |
| 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
A basic card containing a title, content and an extra corner content.
Supports two sizes: `default` and `small`.
A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
```jsx
import { Card } from 'antd';
ReactDOM.render(
<div>
<Card
title="Default size card"
extra={<a href="#">More</a>}
style={{ width: 300 }}
>
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
<Card
size="small"
title="Small size card"
extra={<a href="#">More</a>}
style={{ width: 300 }}
>
<Card 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>
</Card>
</div>,
mountNode
mountNode,
);
```

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

@ -13,7 +13,7 @@ title:
A borderless card on a gray background.
````jsx
```jsx
import { Card } from 'antd';
ReactDOM.render(
@ -24,6 +24,6 @@ ReactDOM.render(
<p>Card content</p>
</Card>
</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.
````jsx
```jsx
import { Card } from 'antd';
const { Meta } = Card;
@ -25,11 +24,8 @@ ReactDOM.render(
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
<Meta title="Europe Street beat" description="www.instagram.com" />
</Card>,
mountNode
mountNode,
);
````
```

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

@ -13,7 +13,7 @@ title:
Grid style card content.
````jsx
```jsx
import { Card } from 'antd';
const gridStyle = {
@ -31,6 +31,6 @@ ReactDOM.render(
<Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid style={gridStyle}>Content</Card.Grid>
</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.
````jsx
```jsx
import { Card, Col, Row } from 'antd';
ReactDOM.render(
<div style={{ background: '#ECECEC', padding: '30px' }}>
<Row gutter={16}>
<Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
</Row>
</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.
````jsx
```jsx
import { Card } from 'antd';
ReactDOM.render(
@ -28,11 +28,7 @@ ReactDOM.render(
>
Group title
</p>
<Card
type="inner"
title="Inner Card title"
extra={<a href="#">More</a>}
>
<Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
Inner Card content
</Card>
<Card
@ -44,6 +40,6 @@ ReactDOM.render(
Inner Card content
</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.
````jsx
import {
Skeleton, Switch, Card, Icon, Avatar,
} from 'antd';
```jsx
import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';
const { Meta } = Card;
class App extends React.Component {
state = {
loading: true,
}
};
onChange = (checked) => {
onChange = checked => {
this.setState({ loading: !checked });
}
};
render() {
const { loading } = this.state;
@ -38,7 +36,9 @@ class App extends React.Component {
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
}
title="Card title"
description="This is the description"
/>
@ -50,7 +50,9 @@ class App extends React.Component {
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
}
title="Card title"
description="This is the description"
/>
@ -62,4 +64,4 @@ class App extends React.Component {
}
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`.
````jsx
```jsx
import { Card, Icon, Avatar } from 'antd';
const { Meta } = Card;
@ -21,7 +21,12 @@ const { Meta } = Card;
ReactDOM.render(
<Card
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" />]}
>
<Meta
@ -30,6 +35,6 @@ ReactDOM.render(
description="This is the description"
/>
</Card>,
mountNode
mountNode,
);
````
```

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

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

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

@ -13,32 +13,39 @@ title:
More content can be hosted.
````jsx
```jsx
import { Card } from 'antd';
const tabList = [{
const tabList = [
{
key: 'tab1',
tab: 'tab1',
}, {
},
{
key: 'tab2',
tab: 'tab2',
}];
},
];
const contentList = {
tab1: <p>content1</p>,
tab2: <p>content2</p>,
};
const tabListNoTitle = [{
const tabListNoTitle = [
{
key: 'article',
tab: 'article',
}, {
},
{
key: 'app',
tab: 'app',
}, {
},
{
key: 'project',
tab: 'project',
}];
},
];
const contentListNoTitle = {
article: <p>article content</p>,
@ -50,12 +57,12 @@ class TabsCard extends React.Component {
state = {
key: 'tab1',
noTitleKey: 'app',
}
};
onTabChange = (key, type) => {
console.log(key, type);
this.setState({ [type]: key });
}
};
render() {
return (
@ -66,16 +73,21 @@ class TabsCard extends React.Component {
extra={<a href="#">More</a>}
tabList={tabList}
activeTabKey={this.state.key}
onTabChange={(key) => { this.onTabChange(key, 'key'); }}
onTabChange={key => {
this.onTabChange(key, 'key');
}}
>
{contentList[this.state.key]}
</Card>
<br /><br />
<br />
<br />
<Card
style={{ width: '100%' }}
tabList={tabListNoTitle}
activeTabKey={this.state.noTitleKey}
onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}
onTabChange={key => {
this.onTabChange(key, 'noTitleKey');
}}
>
{contentListNoTitle[this.state.noTitleKey]}
</Card>
@ -85,4 +97,4 @@ class TabsCard extends React.Component {
}
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
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| actions | The action list, shows at the bottom of the Card. | Array&lt;ReactNode> | - |
| activeTabKey | Current TabPane's key | string | - |
| 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
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --------- | ------------------------- | ------ | ------- |
| className | className of container | string | - |
| style | style object of container | object | - |
### Card.Meta
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| ----------- | ------------------------- | --------- | ------- |
| avatar | avatar or icon | ReactNode | - |
| className | className of container | string | - |
| description | description content | ReactNode | - |

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

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

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

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

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

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

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

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

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

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

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

@ -15,7 +15,7 @@ A carousel component. Scales with its container.
## API
| Property | Description | Type | Default | Version |
| -------- | ----------- | ---- | ------- | ------- |
| --- | --- | --- | --- | --- |
| afterChange | Callback function called after the current index changes | function(current) | - | |
| autoplay | Whether to scroll automatically | boolean | `false` | |
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
@ -27,7 +27,7 @@ A carousel component. Scales with its container.
## Methods
| Name | Description |
| ---- | ----------- |
| --- | --- |
| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
| next() | Change current slide to next 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 时，不使用动画 |
| next() | 切换到下一面板 |
| prev() | 切换到上一面板 |

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

@ -13,32 +13,43 @@ title:
Cascade selection box for selecting province/city/district.
````jsx
```jsx
import { Cascader } from 'antd';
const options = [{
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
children: [
{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [{
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [{
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
},
],
},
],
},
];
function onChange(value) {
console.log(value);
@ -46,6 +57,6 @@ function onChange(value) {
ReactDOM.render(
<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.
````jsx
```jsx
import { Cascader } from 'antd';
const options = [{
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
children: [
{
value: 'hangzhou',
label: 'Hanzhou',
children: [{
children: [
{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [{
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [{
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
},
],
},
],
},
];
function onChange(value) {
console.log(value);
}
ReactDOM.render(
<Cascader options={options} onChange={onChange} changeOnSelect />,
mountNode
);
````
ReactDOM.render(<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.
````jsx
```jsx
import { Cascader } from 'antd';
const options = [{
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
children: [
{
value: 'xihu',
label: 'West Lake',
code: 752100,
}],
}],
}, {
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [{
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [{
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
code: 453400,
}],
}],
}];
},
],
},
],
},
];
function handleAreaClick(e, label, option) {
e.stopPropagation();
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];
if (i === labels.length - 1) {
return (
@ -66,6 +78,6 @@ ReactDOM.render(
displayRender={displayRender}
style={{ width: '100%' }}
/>,
mountNode
mountNode,
);
````
```

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

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

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