mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
chore: 💄 Prettier all files (Merge pull request #16448 from ant-design/prettier-all)
chore: 💄 Prettier all files
This commit is contained in:
commit
1d93339c3b
@ -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`;
|
||||
}
|
||||
|
@ -11,8 +11,8 @@ module.exports = {
|
||||
],
|
||||
modulePattern: [
|
||||
{
|
||||
pattern: /ConfigConsumer.*renderEmpty/sm,
|
||||
pattern: /ConfigConsumer.*renderEmpty/ms,
|
||||
module: '../empty',
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
13
.eslintrc.js
13
.eslintrc.js
@ -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,
|
||||
|
@ -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.
|
||||
labels:
|
||||
|
||||
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
1
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -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
1
.github/PULL_REQUEST_TEMPLATE/pr_cn.md
vendored
@ -7,6 +7,7 @@
|
||||
|
||||
[[English Template / 英文模板](?expand=1)]
|
||||
-->
|
||||
|
||||
### 🤔 这个变动的性质是?
|
||||
|
||||
- [ ] 新特性提交
|
||||
|
@ -1,4 +1,27 @@
|
||||
**/*.svg
|
||||
package.json
|
||||
.umi
|
||||
.umi-production
|
||||
.umi-production
|
||||
AUTHORS.txt
|
||||
lib/
|
||||
es/
|
||||
dist/
|
||||
_site/
|
||||
coverage/
|
||||
CNAME
|
||||
LICENSE
|
||||
yarn.lock
|
||||
netlify.toml
|
||||
yarn-error.log
|
||||
*.sh
|
||||
*.snap
|
||||
components/*/*.js
|
||||
components/*/*.jsx
|
||||
.gitignore
|
||||
.npmignore
|
||||
.prettierignore
|
||||
.DS_Store
|
||||
.editorconfig
|
||||
.eslintignore
|
||||
**/*.yml
|
||||
components/style/color/*.less
|
||||
|
@ -11,4 +11,4 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -9,7 +9,8 @@
|
||||
"comment-empty-line-before": null,
|
||||
"function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
|
||||
"no-invalid-double-slash-comments": null,
|
||||
"no-descending-specificity": null
|
||||
"no-descending-specificity": null,
|
||||
"declaration-empty-line-before": null
|
||||
},
|
||||
"ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
|
||||
}
|
||||
|
@ -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
|
||||
|
||||
|
@ -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 |
|
||||
|
||||
## 📦 安装
|
||||
|
||||
@ -69,7 +59,7 @@ ReactDOM.render(<DatePicker />, mountNode);
|
||||
引入样式:
|
||||
|
||||
```jsx
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
```
|
||||
|
||||
你也可以 [按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
|
||||
|
28
README.md
28
README.md
@ -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
|
||||
|
||||
@ -69,7 +59,7 @@ ReactDOM.render(<DatePicker />, mountNode);
|
||||
And import style manually:
|
||||
|
||||
```jsx
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
```
|
||||
|
||||
Or [import components on demand](https://ant.design/docs/react/getting-started#Import-on-Demand).
|
||||
|
@ -35,4 +35,4 @@ wrapperRaf.cancel = function(pid?: number) {
|
||||
delete ids[pid];
|
||||
};
|
||||
|
||||
wrapperRaf.ids = ids; // export this for test usage
|
||||
wrapperRaf.ids = ids; // export this for test usage
|
||||
|
@ -4,4 +4,4 @@ export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
|
||||
if (!React.isValidElement(element)) return element;
|
||||
|
||||
return React.cloneElement(element, ...restArgs);
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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 {
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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 ? (
|
||||
<Alert
|
||||
message="Alert Message Text"
|
||||
type="success"
|
||||
closable
|
||||
afterClose={this.handleClose}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
{this.state.visible ? (
|
||||
<Alert
|
||||
message="Alert Message Text"
|
||||
type="success"
|
||||
closable
|
||||
afterClose={this.handleClose}
|
||||
/>
|
||||
) : null}
|
||||
<p>placeholder text here</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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 | - |
|
||||
|
@ -27,7 +27,7 @@ ReactDOM.render(
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>,
|
||||
mountNode
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
|
@ -32,6 +32,6 @@ ReactDOM.render(
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>,
|
||||
mountNode
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
@ -27,6 +27,6 @@ ReactDOM.render(
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>,
|
||||
mountNode
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
@ -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 |
|
||||
@ -27,7 +27,7 @@ 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 | |
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | -------------------- | ----------------- | ------- |
|
||||
| href | target of hyperlink | string | |
|
||||
| title | content of hyperlink | string\|ReactNode | |
|
||||
|
@ -28,7 +28,7 @@ title: Anchor
|
||||
|
||||
### Link Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| href | 锚点链接 | string | |
|
||||
| title | 文字内容 | string\|ReactNode | |
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
| ----- | -------- | ----------------- | ------ |
|
||||
| href | 锚点链接 | string | |
|
||||
| title | 文字内容 | string\|ReactNode | |
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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 = [{
|
||||
title: '话题',
|
||||
children: [{
|
||||
title: 'AntDesign',
|
||||
count: 10000,
|
||||
}, {
|
||||
title: 'AntDesign UI',
|
||||
count: 10600,
|
||||
}],
|
||||
}, {
|
||||
title: '问题',
|
||||
children: [{
|
||||
title: 'AntDesign UI 有多好',
|
||||
count: 60100,
|
||||
}, {
|
||||
title: 'AntDesign 是啥',
|
||||
count: 30010,
|
||||
}],
|
||||
}, {
|
||||
title: '文章',
|
||||
children: [{
|
||||
title: 'AntDesign 是一个设计语言',
|
||||
count: 100000,
|
||||
}],
|
||||
}];
|
||||
const dataSource = [
|
||||
{
|
||||
title: '话题',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign',
|
||||
count: 10000,
|
||||
},
|
||||
{
|
||||
title: 'AntDesign UI',
|
||||
count: 10600,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '问题',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign UI 有多好',
|
||||
count: 60100,
|
||||
},
|
||||
{
|
||||
title: 'AntDesign 是啥',
|
||||
count: 30010,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '文章',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign 是一个设计语言',
|
||||
count: 100000,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
function renderTitle(title) {
|
||||
return (
|
||||
@ -55,35 +66,31 @@ 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)}
|
||||
>
|
||||
{group.children.map(opt => (
|
||||
<Option key={opt.title} value={opt.title}>
|
||||
{opt.title}
|
||||
<span className="certain-search-item-count">{opt.count} 人 关注</span>
|
||||
</Option>
|
||||
))}
|
||||
</OptGroup>
|
||||
)).concat([
|
||||
<Option disabled key="all" className="show-all">
|
||||
<a
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
查看所有结果
|
||||
</a>
|
||||
</Option>,
|
||||
]);
|
||||
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}
|
||||
<span className="certain-search-item-count">{opt.count} 人 关注</span>
|
||||
</Option>
|
||||
))}
|
||||
</OptGroup>
|
||||
))
|
||||
.concat([
|
||||
<Option disabled key="all" className="show-all">
|
||||
<a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
|
||||
查看所有结果
|
||||
</a>
|
||||
</Option>,
|
||||
]);
|
||||
|
||||
function Complete() {
|
||||
return (
|
||||
@ -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 {
|
||||
@ -136,9 +143,9 @@ ReactDOM.render(<Complete />, mountNode);
|
||||
}
|
||||
|
||||
.certain-search-item-count {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
right: 16px;
|
||||
position: absolute;
|
||||
color: #999;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.certain-category-search.ant-select-focused .certain-category-icon {
|
||||
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -15,16 +15,16 @@ 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 |
|
||||
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
|
||||
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
|
||||
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
|
||||
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
|
||||
| defaultValue | Initial selected option. | string\|string\[]\| - |
|
||||
@ -44,7 +44,7 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
|
@ -16,7 +16,7 @@ title: AutoComplete
|
||||
|
||||
```jsx
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />
|
||||
<AutoComplete dataSource={dataSource} />;
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
@ -45,7 +45,7 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
|
||||
## 方法
|
||||
|
||||
| 名称 | 描述 |
|
||||
| --- | --- |
|
||||
| blur() | 移除焦点 |
|
||||
| 名称 | 描述 |
|
||||
| ------- | -------- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
```
|
||||
|
@ -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 {
|
||||
|
@ -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` |
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -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 | - |
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -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 {
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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) {
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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) {
|
||||
|
@ -23,13 +23,13 @@ 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` | |
|
||||
| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - | |
|
||||
| overflowCount | Max count to show | number | 99 | |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
|
||||
| title | Text to show when hovering over the badge | string | `count` | |
|
||||
| count | Number to show in badge | ReactNode | | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
|
||||
| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - | |
|
||||
| overflowCount | Max count to show | number | 99 | |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
|
||||
| title | Text to show when hovering over the badge | string | `count` | |
|
||||
|
@ -26,11 +26,11 @@ title: Badge
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 自定义小圆点的颜色 | string | - | 3.16.0 |
|
||||
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | ReactNode | | |
|
||||
| dot | 不展示数字,只有一个小红点 | boolean | false | |
|
||||
| offset | 设置状态点的位置偏移,格式为 `[x, y]` | `[number, number]` | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时,是否展示 Badge | boolean | false | |
|
||||
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
|
||||
| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | string | '' | |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
|
||||
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | ReactNode | | |
|
||||
| dot | 不展示数字,只有一个小红点 | boolean | false | |
|
||||
| offset | 设置状态点的位置偏移,格式为 `[x, y]` | `[number, number]` | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时,是否展示 Badge | boolean | false | |
|
||||
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
|
||||
| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | string | '' | |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
title:
|
||||
zh-CN: 分隔符
|
||||
en-US: Configuring the Separator
|
||||
---
|
||||
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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 {
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -7,17 +7,14 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
|
||||
按钮组合使用时,推荐使用 1 个主操作 + n 个次操作,3 个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
|
||||
|
||||
## en-US
|
||||
|
||||
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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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 | - |
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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);
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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 => (
|
||||
<li key={item.content}>
|
||||
<Badge status={item.type} text={item.content} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
{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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -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);
|
||||
````
|
||||
```
|
||||
|
@ -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 |
|
||||
|
@ -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,
|
||||
);
|
||||
```
|
||||
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -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,
|
||||
);
|
||||
````
|
||||
```
|
||||
|
@ -13,32 +13,39 @@ title:
|
||||
|
||||
More content can be hosted.
|
||||
|
||||
````jsx
|
||||
```jsx
|
||||
import { Card } from 'antd';
|
||||
|
||||
const tabList = [{
|
||||
key: 'tab1',
|
||||
tab: 'tab1',
|
||||
}, {
|
||||
key: 'tab2',
|
||||
tab: 'tab2',
|
||||
}];
|
||||
const tabList = [
|
||||
{
|
||||
key: 'tab1',
|
||||
tab: 'tab1',
|
||||
},
|
||||
{
|
||||
key: 'tab2',
|
||||
tab: 'tab2',
|
||||
},
|
||||
];
|
||||
|
||||
const contentList = {
|
||||
tab1: <p>content1</p>,
|
||||
tab2: <p>content2</p>,
|
||||
};
|
||||
|
||||
const tabListNoTitle = [{
|
||||
key: 'article',
|
||||
tab: 'article',
|
||||
}, {
|
||||
key: 'app',
|
||||
tab: 'app',
|
||||
}, {
|
||||
key: 'project',
|
||||
tab: 'project',
|
||||
}];
|
||||
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);
|
||||
````
|
||||
```
|
||||
|
@ -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<ReactNode> | - |
|
||||
| activeTabKey | Current TabPane's key | string | - |
|
||||
| headStyle | Inline style to apply to the card head | object | - |
|
||||
@ -39,17 +39,17 @@ 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 | - |
|
||||
| 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 | - |
|
||||
| style | style object of container | object | - |
|
||||
| title | title content | ReactNode | - |
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ------------------------- | --------- | ------- |
|
||||
| avatar | avatar or icon | ReactNode | - |
|
||||
| className | className of container | string | - |
|
||||
| description | description content | ReactNode | - |
|
||||
| style | style object of container | object | - |
|
||||
| title | title content | ReactNode | - |
|
||||
|
@ -40,17 +40,17 @@ cols: 1
|
||||
|
||||
### Card.Grid
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| className | 网格容器类名 | string | - |
|
||||
| style | 定义网格容器类名的样式 | object | - |
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | ---------------------- | ------ | ------- |
|
||||
| className | 网格容器类名 | string | - |
|
||||
| style | 定义网格容器类名的样式 | object | - |
|
||||
|
||||
### Card.Meta
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| avatar | 头像/图标 | ReactNode | - |
|
||||
| className | 容器类名 | string | - |
|
||||
| description | 描述内容 | ReactNode | - |
|
||||
| style | 定义容器类名的样式 | object | - |
|
||||
| title | 标题内容 | ReactNode | - |
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ------------------ | --------- | ------- |
|
||||
| avatar | 头像/图标 | ReactNode | - |
|
||||
| className | 容器类名 | string | - |
|
||||
| description | 描述内容 | ReactNode | - |
|
||||
| style | 定义容器类名的样式 | object | - |
|
||||
| title | 标题内容 | ReactNode | - |
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
@ -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;
|
||||
}
|
||||
````
|
||||
```
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user