mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-14 21:39:20 +08:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e051e8ae32 | ||
|
|
9558aa2c64 |
5
.babelrc
5
.babelrc
@@ -1,6 +1,3 @@
|
||||
{
|
||||
"presets": ["es2015", "react", "stage-0"],
|
||||
"plugins": [
|
||||
"add-module-exports"
|
||||
]
|
||||
"presets": ["es2015", "react", "stage-0"]
|
||||
}
|
||||
|
||||
19
.eslintrc.js
19
.eslintrc.js
@@ -1,3 +1,5 @@
|
||||
'use strict';
|
||||
|
||||
const eslintrc = {
|
||||
extends: ['eslint-config-airbnb'],
|
||||
env: {
|
||||
@@ -22,26 +24,18 @@ const eslintrc = {
|
||||
],
|
||||
rules: {
|
||||
'func-names': 0,
|
||||
'prefer-const': 0,
|
||||
'arrow-body-style': 0,
|
||||
'react/sort-comp': 0,
|
||||
'react/prop-types': 0,
|
||||
'react/jsx-closing-bracket-location': 0,
|
||||
'react/jsx-first-prop-new-line': 0,
|
||||
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
|
||||
'import/extensions': 0,
|
||||
'import/no-unresolved': 0,
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
'no-param-reassign': 0,
|
||||
'no-return-assign': 0,
|
||||
'max-len': 0,
|
||||
'consistent-return': 0,
|
||||
'no-redeclare': 0,
|
||||
'react/require-extension': 0,
|
||||
'react/jsx-indent': 0,
|
||||
'jsx-a11y/no-static-element-interactions': 0,
|
||||
'jsx-a11y/anchor-has-content': 0,
|
||||
'react/no-danger': 0,
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
if (process.env.RUN_ENV === 'DEMO') {
|
||||
@@ -53,13 +47,10 @@ if (process.env.RUN_ENV === 'DEMO') {
|
||||
|
||||
Object.assign(eslintrc.rules, {
|
||||
'no-console': 0,
|
||||
'no-plusplus': 0,
|
||||
'eol-last': 0,
|
||||
'prefer-rest-params': 0,
|
||||
'react/no-multi-comp': 0,
|
||||
'react/prefer-es6-class': 0,
|
||||
'jsx-a11y/href-no-hash': 0,
|
||||
'import/newline-after-import': 0,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
10
.github/CONTRIBUTING.md
vendored
10
.github/CONTRIBUTING.md
vendored
@@ -13,13 +13,13 @@ The following guidelines are about *How to avoid Homework Questions*.
|
||||
|
||||
### 1. Read the documentation.
|
||||
|
||||
It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001). It's helpful to understand our documentation.
|
||||
It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001). It's helpful to understand our documentation.
|
||||
|
||||
Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
|
||||
|
||||
### 2. Make sure that your question is about Ant Design, not React
|
||||
|
||||
Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentation](http://facebook.github.io/react/docs/getting-started.html) or just Google (not Baidu, seriously) your questions with keyword *React* first. If you are sure that your question is about Ant Design, go ahead.
|
||||
Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead.
|
||||
|
||||
### 3. Read the FAQ and search the issues list of Ant Design
|
||||
|
||||
@@ -36,7 +36,7 @@ It is a good habit which will save maintainers' time. Thank you!
|
||||
|
||||
## Providing a demo while reporting a bug
|
||||
|
||||
It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug.
|
||||
It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug.
|
||||
|
||||
|
||||
## Tips about Feature Request
|
||||
@@ -48,11 +48,9 @@ If you believe that Ant Design should provide some features, but it does not. Yo
|
||||
|
||||
## Tips about Pull Request
|
||||
|
||||
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
|
||||
|
||||
It's welcomed to pull request. And there are some tips about that:
|
||||
|
||||
1. It is a good habit to create a feature request issue to discuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentation, just create a pull request.
|
||||
1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentaion, just create a pull request.
|
||||
1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style.
|
||||
1. Rebase before creating a PR to keep commit history clear.
|
||||
1. Add some descriptions and refer relative issues for you PR.
|
||||
|
||||
72
.github/ISSUE_TEMPLATE.md
vendored
72
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,35 +1,53 @@
|
||||
<!-- Issue Template -->
|
||||
If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)
|
||||
|
||||
<!--
|
||||
antd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足够精力提供此类咨询服务：
|
||||
If you are going to report a bug, please answer the following questions, thank you!
|
||||
|
||||
1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)
|
||||
2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
|
||||
3. [Gitter](https://gitter.im/ant-design/ant-design)
|
||||
## What you did
|
||||
|
||||
如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。
|
||||
-->
|
||||
(e.g. I ate a hamburger)
|
||||
|
||||
#### 发生问题的环境是：
|
||||
## What you would like to happen
|
||||
|
||||
<!-- 务必提供 -->
|
||||
(e.g. I should be full)
|
||||
|
||||
## What actually happened
|
||||
|
||||
(e.g. But I am still hungry now T_T)
|
||||
|
||||
## Online demo
|
||||
|
||||
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
|
||||
|
||||
## Environment Information
|
||||
|
||||
- The version of antd(e.g. 0.12.0):
|
||||
- Your operating system and it's version(e.g. OSX 10.11.0):
|
||||
- Your browser and it's version(e.g. Chrome 48.0.0.0(64-bit)):
|
||||
|
||||
---
|
||||
|
||||
提问之前，建议先阅读[这份提示](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question)。:-)
|
||||
|
||||
如果是报告 bug，请按照下列格式编辑问题，务必提供复现步骤，否则恕难解决，非常感谢！
|
||||
|
||||
## 你做了什么？
|
||||
|
||||
（例如，我吃了一个汉堡）
|
||||
|
||||
## 你期待的结果是：
|
||||
|
||||
（例如，我应该饱了）
|
||||
|
||||
## 实际上的结果和抱怨：
|
||||
|
||||
（例如，我还是饿的，肯定是哪里出问题了）
|
||||
|
||||
## 可重现的在线演示
|
||||
|
||||
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
|
||||
|
||||
## 本地环境信息
|
||||
|
||||
- antd 版本:
|
||||
- 操作系统及其版本:
|
||||
- 操作系统及其版本：
|
||||
- 浏览器及其版本:
|
||||
|
||||
#### 您做了什么？请提供尽可能详细的重现步骤。
|
||||
|
||||
<!-- 如：引入 antd 了 Button -->
|
||||
|
||||
#### 您期待的结果是:
|
||||
|
||||
<!-- 如：像官网一样正常显示 -->
|
||||
|
||||
#### 实际上的结果是:
|
||||
|
||||
<!-- 如：样式错位了，最好提供截图 -->
|
||||
|
||||
#### 可重现的在线演示
|
||||
|
||||
<!-- 请修改并 Fork http://codepen.io/benjycui/pen/KgPZrE?editors=001 -->
|
||||
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -15,7 +15,6 @@ Thumbs.db
|
||||
*.swp
|
||||
*.swo
|
||||
*.log
|
||||
*.json.gzip
|
||||
node_modules/
|
||||
.buildpath
|
||||
.settings
|
||||
@@ -27,7 +26,4 @@ dist
|
||||
/lib
|
||||
elasticsearch-*
|
||||
config/base.yaml
|
||||
components/**/*.js
|
||||
components/**/*.jsx
|
||||
/.vscode/
|
||||
/coverage
|
||||
typings
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
eslint:
|
||||
enabled: true
|
||||
config_file: .eslintrc.js
|
||||
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"setupFiles": [
|
||||
"tests/setup.js"
|
||||
],
|
||||
"moduleFileExtensions": [
|
||||
"ts",
|
||||
"tsx",
|
||||
"js",
|
||||
"md"
|
||||
],
|
||||
"transform": {
|
||||
"\\.tsx?$": "node_modules/typescript-babel-jest",
|
||||
"tests/.*\\.js$": "node_modules/babel-jest",
|
||||
"\\.md$": "node_modules/antd-demo-jest"
|
||||
},
|
||||
"testRegex": "/tests/.*demo\\.test\\.js$",
|
||||
"testEnvironment": "node"
|
||||
}
|
||||
@@ -9,10 +9,8 @@
|
||||
"duplicateProperty": false,
|
||||
"importPath": false,
|
||||
"finalNewline": false,
|
||||
"newlineAfterBlock": false,
|
||||
"maxCharPerLine": false,
|
||||
"excludedFiles": [
|
||||
"components/grid/style/mixin.less",
|
||||
"components/layout/style/mixin.less",
|
||||
"components/style/core/base.less",
|
||||
"components/style/core/iconfont.less",
|
||||
"components/style/core/normalize.less",
|
||||
|
||||
@@ -3,7 +3,4 @@ sudo: false
|
||||
language: node_js
|
||||
|
||||
node_js:
|
||||
- "6"
|
||||
|
||||
after_script:
|
||||
- cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js
|
||||
- "5"
|
||||
|
||||
61
AUTHORS.txt
61
AUTHORS.txt
@@ -1,58 +1,30 @@
|
||||
Albert Zheng <lisong.zheng@gmail.com>
|
||||
Andrew Murray <radarhere@gmail.com>
|
||||
Andrey G <plandem@gmail.com>
|
||||
Benjy Cui <benjytrys@gmail.com>
|
||||
Bernie <bernie.wangbj@gmail.com>
|
||||
Bozhao <yubz86@gmail.com>
|
||||
Bruce Mitchener <bruce.mitchener@gmail.com>
|
||||
Bruno Maia <bruno.mm.maia@gmail.com>
|
||||
C <4019980@qq.com>
|
||||
Cam Song <neosoyn@gmail.com>
|
||||
Catalin Miron <mironcatalin@gmail.com>
|
||||
Cee Cirno <i@cee.moe>
|
||||
Cody Chan <int64ago@gmail.com>
|
||||
Danny Hoower Antonio Viasus Avila <danjavia@gmail.com>
|
||||
Daqi Song <dqaria@gmail.com>
|
||||
DengYun <tdzl2003@gmail.com>
|
||||
Eddie Xie <oeddyo@gmail.com>
|
||||
Emma <sima.zhang1990@gmail.com>
|
||||
Eric <84263800@qq.com>
|
||||
Eward Song <eward.song@gmail.com>
|
||||
Gray Choi <gray.choi.1988@gmail.com>
|
||||
Guan Hao <raptium@gmail.com>
|
||||
Haibin Yu <haibin.yu@oceanwing.com>
|
||||
Hanai <ihanai1991@gmail.com>
|
||||
ImJoeHs <865439601@qq.com>
|
||||
Infinity <305870677@qq.com>
|
||||
James <james@schoolshape.com>
|
||||
Jerry Bendy <jerry@icewingcc.com>
|
||||
Junyu Zhan <irrigator@yeah.net>
|
||||
KgTong <kgtong1992@gmail.com>
|
||||
Leon Shi <superRaytin@163.com>
|
||||
Leon Shi <superRaytin@gmail.com>
|
||||
Liu Yang <zation1@gmail.com>
|
||||
LongYinan <lynweklm@gmail.com>
|
||||
MG12 <wuzhao.mail@gmail.com>
|
||||
Ma Tianxiao <matx2215@outlook.com>
|
||||
Marius Ileana <visvadw@gmail.com>
|
||||
Marshall Chen <Juniors.fei@gmail.com>
|
||||
Meck <yesmeck@gmail.com>
|
||||
Mr.Tone <vector@malubei.com>
|
||||
Nathan Wells <nwwells@gmail.com>
|
||||
Neverland <chenjiahan@buaa.edu.cn>
|
||||
Nimo <nimo.jser@gmail.com>
|
||||
Pyiner <lijiuyang1992@gmail.com>
|
||||
Qiaosen Huang <joesonw@gmail.com>
|
||||
RaoHai <surgesoft@gmail.com>
|
||||
Rrrandom <emanonhere@gmail.com>
|
||||
Sean Lin <sean@ejoy.com>
|
||||
Sebastian Blade <blade254353074@hotmail.com>
|
||||
Shawn Sit <xueqingxiao@gmail.com>
|
||||
ShiTengFei <shitengfei@goyoo.com>
|
||||
SimaQ <sima.zhang1990@gmail.com>
|
||||
The Rock <zhoguoxin@126.com>
|
||||
Vadim Macagon <vadim.macagon@gmail.com>
|
||||
Vincent Zhang <vxzhong@qq.com>
|
||||
Wei Zhu <yesmeck@gmail.com>
|
||||
Yuwei Ba <i@xiaoba.me>
|
||||
Zap <a124116186@qq.com>
|
||||
@@ -61,71 +33,44 @@ bang <sqibang@gmail.com>
|
||||
bang88 <sqibang@gmail.com>
|
||||
chencheng (云谦) <sorrycc@gmail.com>
|
||||
ddcat1115 <ddcat1115@gmail.com>
|
||||
denzw <denzw@21cn.com>
|
||||
detailyang <detailyang@gmail.com>
|
||||
devqin <devqin@gmail.com>
|
||||
djorkaeff <djorkae55@gmail.com>
|
||||
ecofe <150641329@qq.com>
|
||||
edgji <j.edgji@gmail.com>
|
||||
elrrrrrrr <elrrrrrrr@gmail.com>
|
||||
ezpub <ez.foro@gmail.com>
|
||||
feng zhi hao <fzhihao@outlook.com>
|
||||
fengmk2 <m@fengmk2.com>
|
||||
genie <genie88@163.com>
|
||||
haoxin <coderhaoxin@outlook.com>
|
||||
hi-caicai <hi@cai-cai.me>
|
||||
ioldfish <fish.wangl@gmail.com>
|
||||
jasonslyvia <jasonslyvia@gmail.com>
|
||||
jiang <155259966@qq.com>
|
||||
jinouwuque <ee2win@gmail.com>
|
||||
kagawagao <kingsongao1221@gmail.com>
|
||||
kaifei <150641329@qq.com>
|
||||
kasinooya <kasinooya@gmail.com>
|
||||
kayw <kayw@outlook.com>
|
||||
leon.shi <superRaytin@163.com>
|
||||
lgmcolin <gengmin.lgm@gmail.com>
|
||||
lgmcolin <lgmcolin@gmail.com>
|
||||
lixiaochou077 <qi.liqi07@gmail.com>
|
||||
lizhaocai <lzc09008@gmail.com>
|
||||
muzuiget <muzuiget@gmail.com>
|
||||
parlop <parlop@gmail.com>
|
||||
pizn <pizner@gmail.com>
|
||||
plandem <plandem@gmail.com>
|
||||
popomore <sakura9515@gmail.com>
|
||||
qubaoming <qubaoming@didichuxing.com>
|
||||
ryangun <ryangun@foxmail.com>
|
||||
shelwin <wxfans@gmail.com>
|
||||
shouyong <enlangs@163.com>
|
||||
simaQ <sima.zhang1990@gmail.com>
|
||||
snadn <snadn@snadn.cn>
|
||||
sorrycc <sorrycc@gmail.com>
|
||||
swindme <swindme@163.com>
|
||||
tianli.zhao <275287902@qq.com>
|
||||
tom <caolvchong@gmail.com>
|
||||
ustccjw <317713370@qq.com>
|
||||
warmhug <hualei5280@gmail.com>
|
||||
wizawu <wizawu@gmail.com>
|
||||
xiaofan2406 <xiaofan2406@gmail.com>
|
||||
yeliex <yeliex@yeliex.com>
|
||||
yiminghe <yiminghe@gmail.com>
|
||||
yubozhao <yubz86@gmail.com>
|
||||
yuche <i@yuche.me>
|
||||
z <haig8@msn.com>
|
||||
zack <zxyah@126.com>
|
||||
zhangpc <zhangpc@tenxcloud.com>
|
||||
zhaocai <lzc09008@gmail.com>
|
||||
zhujun24 <zhujun87654321@gmail.com>
|
||||
zilong <jzlxiaohei@163.com>
|
||||
zinkey <yaya@uloveit.com.cn>
|
||||
zuiidea <zuiiidea@gmail.com>
|
||||
偏右 <afc163@gmail.com>
|
||||
逸达 <dqaria@gmail.com>
|
||||
蔡伦 <sliuqin@gmail.com>
|
||||
陆离 <surgesoft@gmail.com>
|
||||
低位 <zhujun87654321@gmail.com>
|
||||
广彬-梁 <326741518@qq.com>
|
||||
闲耘™ <hotoo.cn@gmail.com>
|
||||
吕立青 <jimmy.jinglv@gmail.com>
|
||||
马斯特 <sd4399340@126.com>
|
||||
马金花儿 <o.o@mug.dog>
|
||||
偏右 <afc163@gmail.com>
|
||||
白羊座小葛 <abeyuhang@gmail.com>
|
||||
逸达 <dqaria@gmail.com>
|
||||
闲耘™ <hotoo.cn@gmail.com>
|
||||
|
||||
@@ -1,418 +0,0 @@
|
||||
---
|
||||
order: 6
|
||||
title: Change Log
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0).
|
||||
|
||||
---
|
||||
|
||||
## 2.5.2
|
||||
|
||||
`2016-12-10`
|
||||
|
||||
* Improve selected item style of Menu.
|
||||
* Fix issue resulting in Mention not responses `onFocus` and `onBlur`. [#4163](https://github.com/ant-design/ant-design/issues/4163)
|
||||
* Fix issue resulting in there is a redundant shadow between `disabled` and `checked` Radio. [#4114](https://github.com/ant-design/ant-design/pull/4114) @jdz321
|
||||
* Fix error when setting Momment `defaultValue` or `value` on RangePicker, TimePicker, Calendar. [#4147](https://github.com/ant-design/ant-design/issues/4147)
|
||||
* Fix issue resulting in Affix disappears when it's uesed in animated Tabs. [#3943](https://github.com/ant-design/ant-design/issues/3943)
|
||||
* Fix issue resulting in Cascader passes different `selectedOptions` to `onChange` when manually selecting and selecting by search. [#4096](https://github.com/ant-design/ant-design/issues/4096)
|
||||
* Fix issue resulting in Tabs get offset, when too many tabs are opening. [#3637](https://github.com/ant-design/ant-design/issues/3637)
|
||||
* Table
|
||||
* Align text of grouped parent header to center.
|
||||
* Fix issue resulting in `filterDropdownVisible` can't be set correctly. [#4162](https://github.com/ant-design/ant-design/issues/4162)
|
||||
|
||||
## 2.5.1
|
||||
|
||||
`2016-12-03`
|
||||
|
||||
* Improve website experience on mobile devices.
|
||||
* Add some migrate warnings for `1.x` to `2.x`.
|
||||
* ToolTip, Popover, Popconfirm support to wrap text node and multiple node directly now. [#3924](https://github.com/ant-design/ant-design/issues/3924)
|
||||
* Anchor
|
||||
* Fix current position bug when scroll fastly. [#4053](https://github.com/ant-design/ant-design/issues/4053)
|
||||
* Fix a bug of parent component ref node is undefined. [#4037](https://github.com/ant-design/ant-design/issues/4037)
|
||||
* Table
|
||||
* Fix a selection problem when setting defaultChecked in rowSelection. [#4020](https://github.com/ant-design/ant-design/issues/4020)
|
||||
* Fix grouping column title cannot work with filters. [#4099](https://github.com/ant-design/ant-design/issues/4099)
|
||||
* Fix a misplace bug when using Popover over `Input[type="textarea"]`. [#4092](https://github.com/ant-design/ant-design/issues/4092)
|
||||
* Fix Popconfirm `visible` is not-working problem. [#4068](https://github.com/ant-design/ant-design/issues/4068)
|
||||
* Fix TimePicker can not override width by `style.width`.
|
||||
* Unify Steps icon size. [#3817](https://github.com/ant-design/ant-design/issues/3817)
|
||||
* Fix style details of Form, Button, Slider, Table.
|
||||
|
||||
## 2.5.0
|
||||
|
||||
`2016-11-25`
|
||||
|
||||
* Change the default theme to Alipay style and improve lots of style details.
|
||||
* Supports server-side rendering. (`Mention` will throw warning for [draft-js](https://github.com/facebook/draft-js/issues/385)' issue)
|
||||
* Introduce [Jest Snapshot](https://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing) to test the structure of components and SSR issues.
|
||||
* Improve official website and documentation.
|
||||
* Add [document](https://ant.design/docs/react/customize-theme) for customizing theme.
|
||||
* Add [Sketch template files](https://ant.design/docs/resource/download).
|
||||
* `LocaleProvider` supports Brazilian. [#4004](https://github.com/ant-design/ant-design/pull/4004) [@nathantn](https://github.com/nathantn)
|
||||
* DatePicker
|
||||
* DatePicker can determine whether to show "Today" button. [commit](https://github.com/ant-design/ant-design/commit/bbef274aae169d142e3e7e3ea0af922d48e6dd64)
|
||||
* RangePicker can set presetted ranges. [demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges)
|
||||
* Fix "Now" button doesn't work while `DatePicker[showTime]` is set. [#3748](https://github.com/ant-design/ant-design/issues/3748)
|
||||
* Fix `RangePicker[format]` should work. [#3808](https://github.com/ant-design/ant-design/issues/3808)
|
||||
* Add and update some icons. [#3977](https://github.com/ant-design/ant-design/pull/3977)
|
||||
* New component `Input.Search`. [demo](https://ant.design/components/input/#components-input-demo-search-input)
|
||||
* Mention onSelect event will get complete record. [#3867](https://github.com/ant-design/ant-design/issues/3867)
|
||||
* Pagination can get current range. [demo](https://ant.design/components/pagination/#components-pagination-demo-total)
|
||||
* Table
|
||||
* We can control the visible of customized `filterDropdown`. [demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel)
|
||||
* Supports JSX-style columns. [demo](https://ant.design/components/table/#components-table-demo-jsx)
|
||||
* Can listen the click event of table cell. [#3774](https://github.com/ant-design/ant-design/issues/3774)
|
||||
* Fix border radius of head of border-less table.
|
||||
* Fix that height of title and footer don't follow `Table[size]`. [commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23)
|
||||
* Fix issue with selected status. [#3900](https://github.com/ant-design/ant-design/issues/3900)
|
||||
* Upload
|
||||
* Fix that children could not be `null`.
|
||||
* Fix logic of preview. [commit](https://github.com/ant-design/ant-design/commit/e552880c32aaa3f5b0fb09a5e1fb7454c24d5378)
|
||||
* Fix `z-index` of Badge. [#3898](https://github.com/ant-design/ant-design/issues/3898)
|
||||
* Fix alignment of multi-line Checkbox. [#3971](https://github.com/ant-design/ant-design/issues/3971) [@flashback313](https://github.com/flashback313)
|
||||
* Fix alignment of InputNumber while using with other form controls. [#3866(comment)](https://github.com/ant-design/ant-design/issues/3866#issuecomment-261148256)
|
||||
* Fix style of `Menu.Divider`. [#3813](https://github.com/ant-design/ant-design/issues/3813)
|
||||
* Fix that Popover should support Checkbox and Radio as children. [#3455](https://github.com/ant-design/ant-design/issues/3455)
|
||||
* Fix height of `Select[combobox]`. [#3855](https://github.com/ant-design/ant-design/issues/3855)
|
||||
* Fix style of actived Switch. [#3838](https://github.com/ant-design/ant-design/issues/3838)
|
||||
* Fix that Transfer doesn't show "Not Found" while there is no search result. [#3996](https://github.com/ant-design/ant-design/issues/3996)
|
||||
* Fix style of placeholder of TreeSelect. [#3841](https://github.com/ant-design/ant-design/issues/3841)
|
||||
* Fix compile errors in TypeScript. [#3969](https://github.com/ant-design/ant-design/pull/3969) [@AlbertZheng](https://github.com/AlbertZheng)
|
||||
* Fix that feedback icon should not affect users' operation. [#3891](https://github.com/ant-design/ant-design/issues/3891)
|
||||
|
||||
## 2.4.3
|
||||
|
||||
`2016-11-17`
|
||||
|
||||
* Fix errors in `Anchor` about querySelector, and make some experience Optimization .[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844)
|
||||
|
||||
## 2.4.2
|
||||
|
||||
`2016-11-13`
|
||||
|
||||
* Fix `Dropdown.Button` cannot popup menu.[#3815](https://github.com/ant-design/ant-design/issues/3815)
|
||||
|
||||
## 2.4.1
|
||||
|
||||
`2016-11-11`
|
||||
|
||||
* Fix `2.4.0` missing index files.
|
||||
|
||||
## 2.4.0
|
||||
|
||||
`2016-11-11`
|
||||
|
||||
* Adjust components structure.
|
||||
* New [Anchor](https://ant.design/components/anchor) Component.
|
||||
* Fix less variables `@font-size-base` and `@text-color`, add `@font-size-lg` `@text-color-secondary`.
|
||||
* Add new props `selectedKeys` for `Transfer` component [#3729]. (https://github.com/ant-design/ant-design/issues/3729)
|
||||
* Add `Tag` selected status.
|
||||
* Fix `Dropdown.Button` not support `visible` and `onVisibleChange`. [#3779](https://github.com/ant-design/ant-design/issues/3779)
|
||||
* Fix `Now` button of `DatePicker[showTime]`. [#3748](https://github.com/ant-design/ant-design/issues/3748)
|
||||
* Fix style of `Steps` in vertical mode. [#3760](https://github.com/ant-design/ant-design/issues/3760)
|
||||
* Fix style compatibility of `Spin` in IE10+.[#3755](https://github.com/ant-design/ant-design/issues/3755)
|
||||
* Fix default style of `Carousel` component.
|
||||
* Fix focus logic of `Mention` component. [#3801](https://github.com/ant-design/ant-design/issues/3801)
|
||||
* Fix animate bug of `Progress` component. [#3784](https://github.com/ant-design/ant-design/issues/3784)
|
||||
* Fix focus bug of `Select` component. [#3778](https://github.com/ant-design/ant-design/issues/3778)
|
||||
* Fix `TimePicker` not support `format="HH"` bug. [#3793](https://github.com/ant-design/ant-design/issues/3793)
|
||||
* Fix `Input` `suffix` mouse event responsive area. [#3714](https://github.com/ant-design/ant-design/issues/3714)
|
||||
* Improve performance of `Table` selection. [#3757](https://github.com/ant-design/ant-design/pull/3757)
|
||||
* Improve Carousel default UI style.
|
||||
* Improve style of `Checkbox` and `Radio`. [#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* Fix style of DatePickek, Form, Table.
|
||||
|
||||
## 2.3.2
|
||||
|
||||
`2016-11-09`
|
||||
|
||||
* Fix dead loop while using `getFieldProps`.
|
||||
|
||||
## 2.3.1
|
||||
|
||||
`2016-11-07`
|
||||
|
||||
* Add missing `dist/antd.css` back.
|
||||
|
||||
## 2.3.0
|
||||
|
||||
`2016-11-04`
|
||||
|
||||
* Upgrade normalize.css to 5.0.
|
||||
* Point main file to `lib/index.js` in package.json. [#3397](https://github.com/ant-design/ant-design/pull/3397)
|
||||
* A brand new `Spin` design.
|
||||
* Add `addon` for `TimePicker` to allow render some addon to its bottom.
|
||||
* Add `onDragEnd` for `Tree`.
|
||||
* Add `bordered` for `Collapse`.
|
||||
* Improve `Tabs` switch animation.
|
||||
* Improve `Radio` and `Checkbox` style when it's disabled and mouse hovered. [#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* Optimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860)
|
||||
* Fix nested `Popover` style issue. [#3448](https://github.com/ant-design/ant-design/issues/3448)
|
||||
* Fix issue resulting in server side render `Transfer` failed. [#3686](https://github.com/ant-design/ant-design/issues/3686)
|
||||
* Fix issue resulting in preview image not display when `Upload` in `picture-card` mode. [#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
|
||||
* DatePicker
|
||||
* `onChange` will be triggered when `DatePicker` in `showTime` mode on blur now.
|
||||
* Add `monthCellContentRender` and `cellContentRender` for `MonthPicker`.
|
||||
* `Rangepicker` can input time manually now.[#3718](https://github.com/ant-design/ant-design/issues/3718)
|
||||
* Add czech locale/translations.
|
||||
* Badge
|
||||
* Improve number over 99 displaying when mouse hovering. [#3645](https://github.com/ant-design/ant-design/issues/3645)
|
||||
* Fix moving animation when using `Badge` alone. [#3709](https://github.com/ant-design/ant-design/issues/3709)
|
||||
* Mention
|
||||
* Fix issue resulting in `Mention` will be covered by `Table`. [#3588](https://github.com/ant-design/ant-design/issues/3588)
|
||||
* Add `getSuggestionContainer` to allow specify container. [#3658](https://github.com/ant-design/ant-design/pull/3658)
|
||||
* Tag
|
||||
* Deprecate `color`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Add `type`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Add `checkable`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Radio.Group
|
||||
* Add `className`。
|
||||
* `null` or `undefined` `children` will be ignored.
|
||||
* Select
|
||||
* Add `tokenSeparators` to support automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071)
|
||||
* Add `onFocus` callback. [#3587](https://github.com/ant-design/ant-design/issues/3587)
|
||||
* Fix issue resulting in Select can't display correct selected item text in `combobox` mode. [#3401](https://github.com/ant-design/ant-design/issues/3401)
|
||||
|
||||
## 2.2.1
|
||||
|
||||
`2016-11-02`
|
||||
|
||||
* Fix controlled DatePicker[showTime] not working bug. [#3665](https://github.com/ant-design/ant-design/issues/3665)
|
||||
|
||||
## 2.2.0
|
||||
|
||||
`2016-10-28`
|
||||
|
||||
* Supports TypeScript@2.0. [@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
|
||||
* Not rely on specific version of React now. [#3627](https://github.com/ant-design/ant-design/pull/3627)
|
||||
* Alert supports `className` `style`.
|
||||
* DatePicker & MonthPicker & RangePicker allow developers to set whether to show the clear button. [#3618](https://github.com/ant-design/ant-design/issues/3618)
|
||||
* Form.Item can generate `validateStatus` & `help` for nested form control automatically. [#3212](https://github.com/ant-design/ant-design/issues/3212)
|
||||
* RangePicker can set some hours or minutes or seconds to be not selectable. [#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
|
||||
* Switch
|
||||
* The width of Switch will resize automatically, according to `checkedChildren/unCheckedChildren`. [#3380](https://github.com/ant-design/ant-design/issues/3380)
|
||||
* Improve the switch animation.
|
||||
* Upload can [customized request](https://github.com/react-component/upload#customrequest) now. [@edgji](https://github.com/edgji)
|
||||
* Icon
|
||||
* New icons `bulb` `select` `like-o` `dislike-o`.
|
||||
* Adjust existing icons `loading` `like` `dislike`.
|
||||
* Improve the TypeScript definition of Card & DatePicker & Icon & Table. [@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
|
||||
* Fix Cascader `defaultValue` should work. [#3470](https://github.com/ant-design/ant-design/issues/3470)
|
||||
* Fix the alignment of Button & Input & DatePicker & Select. [#3481](https://github.com/ant-design/ant-design/issues/3481)
|
||||
* DatePicker
|
||||
* Fix wrong timing of triggering `onChange` while `DatePicker[showTime]` is set. [#3523](https://github.com/ant-design/ant-design/issues/3523)
|
||||
* Fix `Dropdown.Button[disabled]` doesn't works for behaviour. [#3535](https://github.com/ant-design/ant-design/issues/3535)
|
||||
* Menu
|
||||
* Fix errors in SSR, thanks to [@xpcode](https://github.com/xpcode) to find the solution. [#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
|
||||
* Fix children don't support `null`. [#3599](https://github.com/ant-design/ant-design/issues/3599)
|
||||
* Fix loading status animation for message.[#3536](https://github.com/ant-design/ant-design/issues/3536)
|
||||
* Form
|
||||
* Fix style issue while using `Form[inline]` and `Input[addonBefore|addonAfter]` together. [#3524](https://github.com/ant-design/ant-design/issues/3524)
|
||||
* Fix style issue for Radio.Button in Form.Item.
|
||||
* Fix style issue for search button in Form.Item. [#3630](https://github.com/ant-design/ant-design/issues/3630)
|
||||
* Fix Form.Item should not treat no user input as validate success. [#3613](https://github.com/ant-design/ant-design/issues/3613)
|
||||
* Should not limit the min width of Popover while `Popover[title]` is not set.
|
||||
* Table
|
||||
* Fix style of fixed header of Table while `dataSource` is empty.[#3567](https://github.com/ant-design/ant-design/issues/3567)
|
||||
* Fix Table will overlap SubMenu while `dataSource` is empty. [#3521](https://github.com/ant-design/ant-design/issues/3521)
|
||||
* Tabs
|
||||
* Height of header of `Tabs[type="card|editable-card"]` should follow design.
|
||||
* Fix height of TabPane should follow height of its content. [#3304](https://github.com/ant-design/ant-design/issues/3304)
|
||||
* Fix style of `TreeSelect[showSearch]`. [#3520](https://github.com/ant-design/ant-design/issues/3520)
|
||||
|
||||
## 2.1.0
|
||||
|
||||
`2016-10-16`
|
||||
|
||||
- Supports spinning Icon.
|
||||
- Tabs's switch animation could be disabled now. [#3324](https://github.com/ant-design/ant-design/issues/3324)
|
||||
- Add Spanish localization for LocaleProvider. @Danjavia
|
||||
- Update Russian localization for LocaleProvider. @plandem
|
||||
- Add `onSelect` event for AutoComplete.
|
||||
- Improve style of Modal.
|
||||
- Improve animation of Tooltip.
|
||||
- Improve style of Transfer's buttons.
|
||||
- Improve style of Tree.
|
||||
- Fix some less variables.
|
||||
- Fix errors while import the whole antd in SSR.
|
||||
- Fix errors while render Affix and BackTop on server. [#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
|
||||
- Fix conflicts between Cascader search mode and browser's autocomplete behaviour. [#3350](https://github.com/ant-design/ant-design/issues/3350)
|
||||
- Fix bug that `h3` cannot be the value of Card[title]. [#3388](https://github.com/ant-design/ant-design/issues/3388)
|
||||
- DatePicker
|
||||
- Fix bug that `onChange` will be trigger twice when `showTime` is set. [#3376](https://github.com/ant-design/ant-design/issues/3376)
|
||||
- Fix differences between overlay's and trigger's date format. [#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
|
||||
- Fix style conflicts with TimePicker. [#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
|
||||
- Fix overflow issue for Form.Item label.
|
||||
- Fix that Icon should not show border in Safari.
|
||||
- Fix infinite loop while inc/dec InputNubmer with keyboard. [#3239](https://github.com/ant-design/ant-design/issues/3239)
|
||||
- Fix the style of the arrow of Popover.
|
||||
- Fix bug Popover and Popconfirm `arrowPointAtCenter` doesn't work.
|
||||
- Select
|
||||
- Fix bug that styles of Select are imported twice. [#3332](https://github.com/ant-design/ant-design/issues/3332)
|
||||
- Fix bug `notFoundContent` cannot be set as `''`. [#3345](https://github.com/ant-design/ant-design/issues/3345)
|
||||
- Fix the unstable width of table cell with Select[showSearch]. [#3413](https://github.com/ant-design/ant-design/issues/3413)
|
||||
- Fix style conflicts while use `border` & `title` & `footer` of Table at the same time. [#3301](https://github.com/ant-design/ant-design/issues/3301)
|
||||
- Fix that the height of TabPane doesn't follow height of content. [#3377](https://github.com/ant-design/ant-design/issues/3377)
|
||||
- Fix bug Transfer[titles] is not under the control of LocaleProvider. [#3264](https://github.com/ant-design/ant-design/pull/3264)
|
||||
- Upload
|
||||
- Fix bug users' `onRemove` will override default behaviour. [#3317](https://github.com/ant-design/ant-design/issues/3317)
|
||||
- Fix style for `listType='picture-card'`.[#3316](https://github.com/ant-design/ant-design/issues/3316)
|
||||
- Fix bug that moment locales is not found while built. [#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
|
||||
|
||||
## 2.0.1
|
||||
|
||||
`2016-10-01`
|
||||
|
||||
- Fix developers cannot call methods of react-slick. [#3164](https://github.com/ant-design/ant-design/issues/3164)
|
||||
- Fix Steps.Step[icon] should support React.ReactNode. [#3159](https://github.com/ant-design/ant-design/issues/3159)
|
||||
- Fix server-side render for Affix. [#3216](https://github.com/ant-design/ant-design/issues/3216)
|
||||
- Fix Mention should support `onSelect` `placeholder`. [#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
|
||||
- Fix Transfer cannot work with `getFieldDecorator`.
|
||||
- Fix LocaleProvider doesn't work for time-related components.
|
||||
- Fix Cascader doesn't show search text in search mode.
|
||||
- Fix the animation & text Spin should be placed in vertical middle.
|
||||
- Fix styles of RangePicker Modal Tag Progress.
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2016-09-28`
|
||||
|
||||
After four months, `antd@2.0.0` is published. We had refactored code and improve functionalities and details of existing components. What's more, we provide English version of the documentation. The antd community help us a lot in developing `antd@2.0.0`.
|
||||
|
||||
If you meet any problem while you try to upgrade from `antd@1.0.0`, feel free to [create issues on GitHub](https://github.com/ant-design/ant-design/issues).
|
||||
|
||||
### 2.x Major changes
|
||||
|
||||
* Refactor components with TypeScript, and provide **`.d.ts` files which are officially supported**. Thanks to all the developers that contributed to [#1846](https://github.com/ant-design/ant-design/issues/1846) and @infeng.
|
||||
* **Translate the documentation into English**, and we are going to provide both of Chinese and English versions of the documentation in the future. Thanks to all the translators and reviewers that contributed to [#1471](https://github.com/ant-design/ant-design/issues/1471).
|
||||
* DatePicker, TimePicker, Calendar and other components that are designed to select time **are refactored to replace [gregorian-calendar](github.com/yiminghe/gregorian-calendar) with [moment](http://momentjs.com/)**.
|
||||
* All the [icons](http://ant.design/components/icon/) are re-designed.
|
||||
* New component [Mention](http://ant.design/components/mention/).
|
||||
* New component [AutoComplete](http://ant.design/components/auto-complete/).
|
||||
* The `getFieldProps` of Form is replaced with `getFieldDecorator` which will warn developers if they make mistakes. Related discussion [#1533](https://github.com/ant-design/ant-design/issues/1533).
|
||||
* Table supports [grouping columns](http://ant.design/components/table/#components-table-demo-grouping-columns). @yesmeck
|
||||
* Removed components and features which are deprecated in `antd@1.x`, such as QueueAnim, Validation, Form.ValueMixin, Progress.Line, Progress.Circle, Popover[overlay] and Slider[marks] will not support array any more.
|
||||
|
||||
### 2.x Breaking changes
|
||||
|
||||
> We suggest you upgrade to lastest version of `2.x`.
|
||||
|
||||
There are some breaking changes in `antd@2.0.0`, and you need to modify your code to work with it.
|
||||
|
||||
* `value` and `defaultValue` of all the time-related components will not support type `String/Date`, please use [moment](http://momentjs.com/):
|
||||
```diff
|
||||
- <TimePicker defaultValue="12:08:23" />
|
||||
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
|
||||
|
||||
- <DatePicker defaultValue="2015/01/01" />
|
||||
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />
|
||||
|
||||
- <Calendar defaultValue={new Date('2010-10-10')} />
|
||||
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
|
||||
```
|
||||
* Parameters of type `Date/GregorianCalendar` of functions such as `onChange` and `onPanelChange`, plus other callback functions had been changed to type moment. Please consult [APIs of gregorian-calendar](https://github.com/yiminghe/gregorian-calendar) and [APIs of moment](http://momentjs.com/docs/), and update your code accordingly. And you can consult this [commit](https://github.com/ant-design/ant-design/commit/4026221d451b246956983bb42140142d4a48b7d7) to see how to update.
|
||||
|
||||
Because the return value of `JSON.stringy(date: moment)` will lost time zone, we should use `.format` to convert date to string first, see related issue [#3082](https://github.com/ant-design/ant-design/issues/3082) for details:
|
||||
```js
|
||||
handleSubmit() {
|
||||
const values = this.props.form.getFieldsValue();
|
||||
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // or other format
|
||||
const data = JSON.stringify(values);
|
||||
// send data to server
|
||||
}
|
||||
```
|
||||
* For the value of time-related components becomes an instance of `moment`, you should replace `type: 'date'` with `type: 'object'` in form validation.
|
||||
* The `format` of time-related components is changed from [gregorian-calendar-format](https://github.com/yiminghe/gregorian-calendar-format#api) to [moment format](http://momentjs.com/docs/#/parsing/string-format/) now, for instance the format `yyyy-MM-dd` should change to `YYYY-MM-DD`.
|
||||
* `linkRender` and `nameRender` of Breadcrumb are removed, please use `itemRender`.
|
||||
* `onClose` and `onOpen` of Menu are removed, please use `onOpenChange`. As being totally different, please check [this demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first.
|
||||
* Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns).
|
||||
* `Popover[overlay]` is removed, please use `Popover[content]` instead.
|
||||
|
||||
The following change will throw some warnings in the console and it will still work, but we recommend to update your code.
|
||||
|
||||
* `getFieldProps` of Form is deprecated, please use `getFieldDecorator`:
|
||||
|
||||
```diff
|
||||
- <Input placeholder="text" {...getFieldProps('userName', { ... })} />
|
||||
+ {getFieldDecorator('userName', { ... })(
|
||||
+ <Input placeholder="text" />
|
||||
+ )}
|
||||
```
|
||||
|
||||
Look up to [#1533](https://github.com/ant-design/ant-design/issues/1533) for related discussion.
|
||||
|
||||
* `toggleOpen` of DatePicker is deprecated, please use `onOpenChange`:
|
||||
|
||||
```diff
|
||||
- handleToggleOpen({ open }) {
|
||||
+ handleOpenChange(open) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 2.x Bug fixes
|
||||
|
||||
* Dropdown.Button[disabled] should work. [#3070](https://github.com/ant-design/ant-design/issues/3070)
|
||||
* `option.withRef` of Form.create should work. [#2843](https://github.com/ant-design/ant-design/issues/2843)
|
||||
* Fix slow response of expanding sub menu in Menu[inline] mode. [#2701](https://github.com/ant-design/ant-design/issues/2701)
|
||||
* The button of Modal.confirm(and so on) should not be clickable while it is closed asynchronously. [#2684](https://github.com/ant-design/ant-design/issues/2684)
|
||||
* `format` of DatePicker[showTime] should work. [#3123](https://github.com/ant-design/ant-design/issues/3123)
|
||||
* Fix Table[dataSource] treat key whose value is `0` as inexisting. [#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
|
||||
* Tree.Node should not show arrow if it has no child nodes. [#2616](https://github.com/ant-design/ant-design/issues/2616)
|
||||
* Fix cursor style of arrows that are hidden of Tree.Node. [#2748](https://github.com/ant-design/ant-design/issues/2748)
|
||||
|
||||
### 2.x Other improvements
|
||||
|
||||
* Alert supports [`banner` mode](http://ant.design/components/alert/#components-alert-demo-banner).
|
||||
* BackTop will scroll to top with animation.
|
||||
* Badge supports [status dot mode](http://ant.design/components/badge/#components-badge-demo-status).
|
||||
* Cascader supports [searching options directly](http://ant.design/components/cascader/#components-cascader-demo-search).
|
||||
* Checkbox supports [indeterminate mode](http://ant.design/components/checkbox/#components-checkbox-demo-check-all).
|
||||
* Form supports [vertical layout](http://ant.design/components/form/#components-form-demo-validate-customized).
|
||||
* InputNumber supports long press to increase/decrease number. [#](http://ant.design/components/input-number/#components-input-number-demo-basic)
|
||||
* notification supports [customized icon](http://ant.design/components/notification/#components-notification-demo-custom-icon).
|
||||
* Spin allows [customized tips and animation work together](http://ant.design/components/spin/#components-spin-demo-tip). @jerrybendy
|
||||
* Transfer can handle event while options are checked/unchecked. [#](http://ant.design/components/transfer/#components-transfer-demo-basic)
|
||||
* Transfer can determine [whether an option is checkable](http://ant.design/components/transfer/#components-transfer-demo-basic).
|
||||
* Improve style of Alert and notification.
|
||||
* Modal.confirm(and so on) can be closed by keyboard. @Dafrok
|
||||
* Improve the user experience of [selecting time in DatePicker](http://ant.design/components/date-picker/#components-date-picker-demo-time).
|
||||
* Improve the status changed animation of [Spin](http://ant.design/components/spin/#components-spin-demo-nested ).
|
||||
* Update [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc).
|
||||
|
||||
### 2.x Workflow
|
||||
|
||||
* [AntD Library](http://library.ant.design/) a collection of Axure files which includes components and patterns that follow Ant Design Specification.
|
||||
* Rename `babel-plugin-antd` to [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import), and this means that `babel-plugin-import` becomes an common load-on-demand solution and not just for `antd`.
|
||||
|
||||
Please update `package.json`:
|
||||
|
||||
```diff
|
||||
{
|
||||
"devDependencies": {
|
||||
- "babel-plugin-antd": "^0.x.x",
|
||||
+ "babel-plugin-import": "^1.0.0",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
And update your babel config in `.babelrc` or other place:
|
||||
|
||||
```diff
|
||||
{
|
||||
- "plugins": [["antd", { style: "css" }]]
|
||||
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
* [dva@1.0.0](https://github.com/dvajs/dva) is published and it is officially recommended framework [in real world](http://ant.design/docs/react/practical-projects).
|
||||
* The officially recommended scaffold is [dva-cli](https://github.com/dvajs/dva-cli) now, the old `antd-init` is just for studying and demo.
|
||||
|
||||
## 1.11.4
|
||||
|
||||
Visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0) to read change logs from `0.x` to `1.x`。
|
||||
845
CHANGELOG.md
Normal file
845
CHANGELOG.md
Normal file
@@ -0,0 +1,845 @@
|
||||
---
|
||||
order: 3
|
||||
chinese: 更新日志
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
你也可以查看 GitHub 上的 [发布日志](https://github.com/ant-design/ant-design/releases)。
|
||||
|
||||
---
|
||||
|
||||
## 1.3.2
|
||||
|
||||
`2016-06-06`
|
||||
|
||||
- 修复全局模式下引用 antd，IE8 环境报错的问题。 [#1970](https://github.com/ant-design/ant-design/issues/1970)
|
||||
|
||||
## 1.3.1
|
||||
|
||||
`2016-06-06`
|
||||
|
||||
- 修复 `Message` `Notification` 找不到的问题。 [#1968](https://github.com/ant-design/ant-design/issues/1968)
|
||||
|
||||
## 1.3.0
|
||||
|
||||
`2016-06-02`
|
||||
|
||||
- Transfer 组件增加 `rowKey` 属性，可自定义数据源主键。 [#1900](https://github.com/ant-design/ant-design/issues/1900)
|
||||
- Tag 组件 `default` 类型的样式增加边框，防止淹没在背景中。 [#1910](https://github.com/ant-design/ant-design/issues/1910)
|
||||
- Table
|
||||
- 修复筛选为单选时仍旧展示多选框的问题。 [#1880](https://github.com/ant-design/ant-design/issues/1880)
|
||||
- 修复 fixed left 的固定列会覆盖 rowSelection 的 Checkbox 的问题。 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 升级 rc-table 依赖
|
||||
- 修复了 fixed 列中数据重复展示以及一些错位问题。 [#1898](https://github.com/ant-design/ant-design/issues/1898)
|
||||
- `dataIndex` 支持内嵌属性的写法。 [react-component/table#46](https://github.com/react-component/table/issues/46)
|
||||
- 修复了 v1.2.0 新增加的组件属性的 TypeScript 定义。 [#1933](https://github.com/ant-design/ant-design/issues/1933)
|
||||
- Form 修复 label中冒号的国际化问题，采用样式实现冒号，不再需要手动输入冒号。 [#1877](https://github.com/ant-design/ant-design/issues/1877)
|
||||
- 修复 DatePicker 组件点击『此刻』失效的问题，并进行了一些代码优化。 [#1902](https://github.com/ant-design/ant-design/issues/1902)
|
||||
- 升级 rc-upload 依赖，修复了 IE10 中第二次上传同一文件不触发 `onChange` 的问题。 [058af3c](https://github.com/ant-design/ant-design/commit/b15a4e3165be5e4db995d3fe75d4d557c7f21c61)
|
||||
- 文档使用 [bisheng](https://github.com/benjycui/bisheng) 重构。
|
||||
|
||||
## 1.2.1
|
||||
|
||||
`2016-05-27`
|
||||
|
||||
- 修复一个 Select 组件的文字重复问题。
|
||||
|
||||
## 1.2.0
|
||||
|
||||
`2016-05-26`
|
||||
|
||||
- Input 组件的文档现在和 Form 分离。 [3c98d3](https://github.com/ant-design/ant-design/commit/3c98d3f80f4ec80066756adc3b4108141d4383ca)
|
||||
- Affix
|
||||
- 新增了 `onChange` 属性。当固定状态改变时回调 [#1777](https://github.com/ant-design/ant-design/issues/1777)
|
||||
- 找回了从 affixStyle 中走失的 `width` 属性，修复固定后错位的问题。[#1820](https://github.com/ant-design/ant-design/issues/1820)
|
||||
- Table
|
||||
- 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
|
||||
- 修复了当有列固定在左边时，选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 修复了当 Checkbox 的 label 为数字 0 时， label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
|
||||
- 修复了 Tag 组件为 closeable 时，内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
|
||||
- Tab 组件新增 `hideAdd` 属性，用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
|
||||
- 修复了一个在某些情况下找不到 `normalize.css/normalize.css` 文件的问题。[ant-design/antd-init#52](https://github.com/ant-design/antd-init/issues/52)
|
||||
- 修复构建文件在 IE8 下报错的问题。[#1804](https://github.com/ant-design/ant-design/issues/1804)
|
||||
- 更新了第三方依赖。
|
||||
|
||||
## 1.1.0
|
||||
|
||||
`2016-05-18`
|
||||
|
||||
- Cascader 的选择框支持自定义渲染节点，并给 `displayRender` 方法增加了 `selectedOptions` 参数。[#1726](https://github.com/ant-design/ant-design/issues/1726)
|
||||
- Input.Group 新增 `size` 属性，可设置控件尺寸。[#1732](https://github.com/ant-design/ant-design/issues/1732)
|
||||
- Layout 新增常用布局：侧边导航展开收起模式。[#1643](https://github.com/ant-design/ant-design/issues/1643)
|
||||
- Transfer 支持自定义渲染行数据。[#1664](https://github.com/ant-design/ant-design/issues/1664)
|
||||
- Upload 的 children 为空时，不再显示上传按钮。[#1610](https://github.com/ant-design/ant-design/issues/1610)
|
||||
- Table
|
||||
- 修复 `filter` 过滤数据后显示错误分页的问题。[#1669](https://github.com/ant-design/ant-design/issues/1669)
|
||||
- 修复 `pagination` 不指定时显示错误分页的问题。[#1683](https://github.com/ant-design/ant-design/issues/1683)
|
||||
- Modal
|
||||
- 修复弹出时背景依然跟随滚动的问题。[#1751](https://github.com/ant-design/ant-design/issues/1751)
|
||||
- 修复关闭按钮获得焦点时的样式问题。[#1668](https://github.com/ant-design/ant-design/issues/1668)
|
||||
- 将搜索输入框相关样式移到 Input 组件下。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
|
||||
- 修复 Select 获得焦点时的样式问题。[#1684](https://github.com/ant-design/ant-design/issues/1684)
|
||||
- 修复 TreeSelect 占位符样式问题。[#1657](https://github.com/ant-design/ant-design/issues/1657)
|
||||
- 修复了类型定义以更好地支持 `TypeScript`。[#1696](https://github.com/ant-design/ant-design/pull/1696) [@xujihui1985](https://github.com/xujihui1985)
|
||||
- 优化了 LocaleProvider。[a3850a4](https://github.com/ant-design/ant-design/commit/a3850a4df84d7055a1a40600919f2f9ba1bbf2b2)
|
||||
- 其他组件的样式优化。
|
||||
|
||||
## 1.0.1
|
||||
|
||||
`2016-05-11`
|
||||
|
||||
- 修复当 Table 的 `rowSelection.type` 为 'radio' 时的报错。[#1627](https://github.com/ant-design/ant-design/issues/1627)
|
||||
- 修复 CheckboxGroup 与 `getFieldProps`共用时的问题。[#1631](https://github.com/ant-design/ant-design/issues/1631)
|
||||
- 修复 RangePicker 中 TimePicker 不会受 locale 控制的问题。[#1635](https://github.com/ant-design/ant-design/issues/1635)
|
||||
- 修复 Tag 组件缺失的问题。
|
||||
- 修复 Table 的 className 不在最外层容器上的问题。
|
||||
- 修复一个样式文件重复打包的问题。
|
||||
|
||||
## 1.0.0
|
||||
|
||||
`2016-05-09`
|
||||
|
||||
很高兴的通知各位，经过四个月时间的紧密开发，`antd@1.0.0` 终于发布了。从去年 5 月 7 日提交第一行代码以来，经过整整一年的开发迭代，antd 受到社区的大量关注，使用的公司和产品持续增加，已经日趋成熟。这个版本我们重构了底层代码和站点，持续完善现有组件功能和优化细节，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时反馈给我们。
|
||||
|
||||
### 主要变化
|
||||
|
||||
- **兼容 React@15.x**。
|
||||
- **全新单页站点**，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。
|
||||
- **样式支持按需加载**。可参考 [antd-init](https://github.com/ant-design/antd-init) 的模版代码, 需要配合 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd#usage) 插件和 `style` 配置进行使用。[#900](https://github.com/ant-design/ant-design/issues/900)
|
||||
- **提供独立的构建文件**。[文档](/docs/react/install?scrollTo=浏览器引入)
|
||||
- 新增卡片组件 [Card](/components/card)。
|
||||
- 新增评分组件 [Rate](/components/rate)。
|
||||
- 新增 [LocaleProvider](/components/locale-provider) 组件，提供组件文案的国际化支持，并新增了英语和俄语的语言配置。[#1411](https://github.com/ant-design/ant-design/issues/1411)
|
||||
- 更好的服务端渲染支持，修复了 Badge、Spin、Calendar、Upload 等组件服务端渲染的问题。
|
||||
- 新增 antd.d.ts 以更好的支持 TypeScript。[@bang88](https://github.com/bang88)
|
||||
- 布局组件支持响应式布局和栅格间隔设置。[#1082](https://github.com/ant-design/ant-design/issues/1082)
|
||||
- Table 支持固定列和横向滚动。[#1265](https://github.com/ant-design/ant-design/issues/1265)
|
||||
|
||||
### 不兼容改动
|
||||
|
||||
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
|
||||
|
||||
- 推荐使用样式按需加载, 如果需要整体载入样式, **样式入口文件变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
|
||||
|
||||
```diff
|
||||
- import 'antd/lib/index.css'; // import 'antd/style/index.less';
|
||||
+ import 'antd/dist/antd.css'; // import 'antd/dist/antd.less';
|
||||
```
|
||||
|
||||
- 完全移除了 `0.12` 中废弃的 Validation 组件，可以直接 import [rc-form-validation](https://github.com/react-component/form-validation) 用以代替。[#1096](https://github.com/ant-design/ant-design/issues/1096)
|
||||
- Breadcrumb.Item 的 `href` 属性被移除，请直接用 `a` 标签包裹可点击的内容。
|
||||
- Modal 移除了 `align` 属性，现在可以使用 `style` 属性调整位置。
|
||||
- `Modal.confirm` 等方法的配置项 `iconClassName` 重命名为 `iconType`。
|
||||
- Select 移除了 `onChange` 中的 `label` 参数，新增了 `labelInValue` 属性。[#1695](https://github.com/ant-design/ant-design/issues/1695)
|
||||
- 移除了 `import { Form } from 'antd/lib/form';` 的用法，应统一为 `import { Form } from 'antd';` 或 `import Form from 'antd/lib/form';`。
|
||||
|
||||
#### 有兼容提示的改动
|
||||
|
||||
这里的改动在升级后控制台会出现警告提示，请按提示进行修改。
|
||||
|
||||
- 废弃 QueueAnim，可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/#/components/queue-anim)，欢迎前往探索。
|
||||
- Affix 的 `offset` 属性重命名为 `offsetTop`。
|
||||
- Popover 的 `overlay` 属性重命名为 `content`。
|
||||
- Progress.Line 使用方式改为 `<Progress />` 或 `<Progress type="line" />`。
|
||||
- Progress.Circle 使用方式改为 `<Progress type="circle" />`。
|
||||
- Spin 的 `spining` 属性更正为 `spinning`。
|
||||
- Alert 的 type `warn` 重命名为 `warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225)
|
||||
- Tree 的 `onExpand` 参数从 `function(node, expanded, expandedKeys)` 调整为 `function(expandedKeys, {expanded, node})`。
|
||||
|
||||
### Bug 修复
|
||||
|
||||
- 修复 Table 的 `size` 为 `middle` 时，分页器大小无法控制的问题。[#1396](https://github.com/ant-design/ant-design/issues/1396)
|
||||
- 修复 Table 的 `pagination.defaultCurrent` 失效的问题。
|
||||
- 修复 Cascader 的 `defaultValue` 没有被 `value` 覆盖的问题。
|
||||
- 修复 Select 同时设置 `allowClear` `disabled` 时还是会出现清除按钮的问题。[#1480](https://github.com/ant-design/ant-design/issues/1480)
|
||||
- 修复 Transfer 的 `DataSource` 变化时已选中项没有同步的问题。[#1587](https://github.com/ant-design/ant-design/issues/1587)
|
||||
- 修复 DatePicker 日期格式与国际化配置不同步的问题。[#1509](https://github.com/ant-design/ant-design/issues/1509)
|
||||
- 修复 Button 禁用时事件仍然会冒泡的问题。[#1541](https://github.com/ant-design/ant-design/issues/1541)
|
||||
- 修复 Carousel 自动播放时的卡顿和报错问题。[#1397](https://github.com/ant-design/ant-design/issues/1397)
|
||||
- 修复 Tabs 的 card 类型内嵌标准 Tabs 时的样式问题。[#1617](https://github.com/ant-design/ant-design/issues/1617)
|
||||
- 修复 Menu `horizontal` 和 `vertical` 模式不支持受控 `openKeys` 的问题。
|
||||
|
||||
### 其他改进
|
||||
|
||||
- 样式变量梳理，去除了部分无用的变量，另外还有大量样式细节问题修复。
|
||||
- 依赖的 normalize.css 升级到 [4.x](https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md)。
|
||||
- 使用 ES2016 classes 重构了代码。[@waywardmonkeys](https://github.com/waywardmonkeys)
|
||||
- Popover、Popconfirm 和 Tooltip 组件根据不同的弹出位置有了更精准方向的弹出动画。
|
||||
- 补充 Select TreeSelect Switch Radio Checkbox 等组件的 `focus` 表现，增强表单组件的可用性。[#1358](https://github.com/ant-design/ant-design/issues/1358)
|
||||
- message 和 notification 现在可以全局配置 `duration`。[#1143](https://github.com/ant-design/ant-design/issues/1143)
|
||||
- DatePicker 和 TimePicker 的 `onChange(date, dateString)` 方法增加第二个参数用于获得格式化后的日期字符串。[#1104](https://github.com/ant-design/ant-design/issues/1104)
|
||||
- DatePicker 和 DatePicker.RangePicker 现在可以设置内部 TimePikcer 的属性。[#1415](https://github.com/ant-design/ant-design/issues/1415)
|
||||
- Checkbox
|
||||
- 支持类似 Radio 的使用方式 `<Checkbox>option</Checkbox>`。[#1029](https://github.com/ant-design/ant-design/issues/1029)
|
||||
- Checkbox.Group 现在允许 `label` 和 `value` 不同。[#1025](https://github.com/ant-design/ant-design/issues/1025)
|
||||
- Checkbox.Group 允许单独设置某个 Checkbox 为 `disabled`。[#1218](https://github.com/ant-design/ant-design/issues/1218)
|
||||
- Breadcrumb
|
||||
- 支持路由模式下自定义链接 `linkRender`。[#1026](https://github.com/ant-design/ant-design/issues/1026)
|
||||
- 支持路由模式下自定义最后一项内容 `nameRender`。[#1304](https://github.com/ant-design/ant-design/issues/1304)
|
||||
- Modal
|
||||
- 新增 `Modal.warning` 方法。
|
||||
- 弹出时背景不再跟随滚动。[#1195](https://github.com/ant-design/ant-design/issues/1195)
|
||||
- Select
|
||||
- 搜索框和单选选择框合并，以优化视觉和交互效果。
|
||||
- 优化多选框的选中效果。
|
||||
- Spin
|
||||
- 增加延时展示以优化体验。[#1273](https://github.com/ant-design/ant-design/issues/1273)
|
||||
- 增加 `tip` 属性用于定义加载文案。[#1046](https://github.com/ant-design/ant-design/issues/1046)
|
||||
- Steps
|
||||
- 重构布局方式，以支持更灵活的自适应布局和优化了性能，并移除了 `maxDescriptionWidth` 属性。[#1099](https://github.com/ant-design/ant-design/issues/1099)
|
||||
- 新增 `status` 属性以指定当前步骤状态，同时支持错误步骤的展示。[#1098](https://github.com/ant-design/ant-design/issues/1098)
|
||||
- Timeline
|
||||
- 新增 `dot` 属性，可自定义时间轴点。
|
||||
- 现在可以设置 `className` 和 `style` 的问题。
|
||||
- `color` 属性现在支持自定义色值。
|
||||
- Tree
|
||||
- 当子节点被选中时，自动展开父节点。
|
||||
- 新增 `checkStrictly` 属性，支持父子节点选中关系脱离。
|
||||
- Upload
|
||||
- 在上传文件列表中的文件被删除时，将触发 `onRemove` 事件。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- 增加 `onPreview` 支持文件的自定义预览方式。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- `data` 属性支持设为一个函数，用于动态修改上传参数。[react-component/upload#32](https://github.com/react-component/upload/pull/32)
|
||||
- Slider `marks` 现在支持 JSX 并可以单独设置某个标记的样式。
|
||||
- Tag 的 `onClose` 可以使用 `e.preventDefault()` 阻止默认事件。[#1267](https://github.com/ant-design/ant-design/issues/1267)
|
||||
- Form.Item 在有多个 child 时也可以自动生成错误信息与校验状态，但一个 Form.Item 内仍然只能有一个表单控件。[#1287](https://github.com/ant-design/ant-design/issues/1287)
|
||||
- Input 新增 `onPressEnter` 属性监听回车事件。
|
||||
- Table 现在可以通过 `filteredValue` `sortOrder` 控制筛选和排序的状态。[#971](https://github.com/ant-design/ant-design/issues/971)
|
||||
- Button 增加了 `icon` 属性。[#1199](https://github.com/ant-design/ant-design/issues/1199)
|
||||
- SubMenu 增加 `onTitleClick` 属性。
|
||||
- Affix 增加 `offsetBottm` 属性，支持固定在底部。[#1000](https://github.com/ant-design/ant-design/issues/1000)
|
||||
|
||||
### 相关工具发布
|
||||
|
||||
- [antd-init](http://github.com/ant-design/antd-init) 同步发布 `1.0.0` 版本，享受最新 [ant-tool](https://github.com/ant-tool/) 工具带来的流畅开发体验。
|
||||
- [Ant Motion](http://motion.ant.design) 全新的动效设计解决方案。
|
||||
- [Ant UX](http://ux.ant.design/) 发布 1.0 版本，提供多种平台的流程素材支持。
|
||||
|
||||
## 0.12.17
|
||||
|
||||
`2016-05-05`
|
||||
|
||||
- 修复 FormItem 校验时表单项高度跳动的问题。[#1557](https://github.com/ant-design/ant-design/issues/1557)
|
||||
- 修复一个 Table 圆角样式的小问题。
|
||||
|
||||
## 0.12.16
|
||||
|
||||
`2016-04-27`
|
||||
|
||||
- 修复 Collapse 在 safari 中切换动画异常的问题。[#1494](https://github.com/ant-design/ant-design/issues/1494)
|
||||
- 修复 Table 的 selectedRowKeys 在初次渲染时失效的问题。[#1501](https://github.com/ant-design/ant-design/issues/1501)
|
||||
- Table 现在点击选择框时将不再触发 `onRowClick`。[#1470](https://github.com/ant-design/ant-design/issues/1470)
|
||||
- 修复一个 Calender 服务端渲染时提示 `Option is not defined` 的问题。[#1521](https://github.com/ant-design/ant-design/issues/1521)
|
||||
- 修复 Menu 动态切换模式时的一些细节问题。
|
||||
- 优化了 export 导出图标。
|
||||
- 修复 Form 的一些样式细节。
|
||||
|
||||
## 0.12.15
|
||||
|
||||
`2016-04-21`
|
||||
|
||||
- 升级 rc-collapse 修复一个性能问题。
|
||||
- 修复一个 Collapse 内嵌 Tabs 的选中项样式问题。[#1451](https://github.com/ant-design/ant-design/issues/1451)
|
||||
- 修复 Input 组件服务端渲染报错的问题。[#1321](https://github.com/ant-design/ant-design/issues/1321)
|
||||
- 修复 Tag 组件调用了两次 afterClose 的问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
|
||||
- 修复一个 Table 控制模式的问题。[#1434](https://github.com/ant-design/ant-design/issues/1434)
|
||||
- 修复一个 Tabs 相互嵌套的样式问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
|
||||
- 修复 Dropdown.Button 点击右边也触发 onClick 的问题。
|
||||
- 修复 Radio.Button 在 IE8 下无法选择的问题。[#1459](https://github.com/ant-design/ant-design/issues/1459)
|
||||
- 优化了 Button 点击后仍然有 focus 效果的问题。
|
||||
|
||||
## 0.12.14
|
||||
|
||||
`2016-04-13`
|
||||
|
||||
- Form 和 Form.Item 支持 style 属性。[#1290](https://github.com/ant-design/ant-design/issues/1290)
|
||||
- 修正 IE9 下没有 prefix css3 属性的问题。
|
||||
- 修正 Table 中指定了 pagination.current 时依然能响应用户操作的问题。[#1311](https://github.com/ant-design/ant-design/issues/1311)
|
||||
- 修正 Table 的单选模式无法用 `selectedRowKeys` 控制的问题。[#1346](https://github.com/ant-design/ant-design/issues/1346)
|
||||
- 修正 DatePicker 启用 showTime 时时区失效的问题。[#1356](https://github.com/ant-design/ant-design/issues/1356)
|
||||
- 修正 Menu、Progress、Form、Table、Select、Pagination、Cascader 的样式细节问题。
|
||||
- 修正 Breadcrumb 不支持 IndexRoute 的问题。[#1375](https://github.com/ant-design/ant-design/issues/1375)
|
||||
- 修正 Table 的筛选菜单 filters 的 value 为数字时无法选中的问题。
|
||||
- 修正 DatePicker 面板输入框的日期格式 format 和外面不一致的问题。[#1403](https://github.com/ant-design/ant-design/issues/1403)
|
||||
|
||||
## 0.12.13
|
||||
|
||||
`2016-03-29`
|
||||
|
||||
- 按照最新的规范修正 Message、Alert、Notification 的默认图标。
|
||||
- 统一梳理和优化了各浮层组件的 `z-index`，并增加了对应的 less 变量。
|
||||
- 修复一个 Breadcrumb 组件未指定 breadcrumbName 导致的解析问题。[#1251](https://github.com/ant-design/ant-design/pull/1251)
|
||||
- 现在 Upload 服务端返回数据不是 JSON 格式时将不判断为出错。[#1248](https://github.com/ant-design/ant-design/issues/1248)
|
||||
- 修复 Cascader 在 Chrome 下无法滚动菜单的问题。
|
||||
- 修复 Select、Radio、Progress、Table、DatePicker 的一些样式细节。
|
||||
|
||||
## 0.12.12
|
||||
|
||||
`2016-03-18`
|
||||
|
||||
- 更新了设计资源文件 `Axure Components` 和 `Axure Box`。
|
||||
- 修复 Popover 和 Popconfirm 箭头消失的问题。
|
||||
- 修复一个 Table 切换分页长度时的页码溢出的问题。
|
||||
|
||||
## 0.12.11
|
||||
|
||||
`2016-03-16`
|
||||
|
||||
- 全新的设计文档 `语言` 部分。
|
||||
- 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。
|
||||
- TreeSelect 组件补充 `showCheckedStrategy` 属性，支持回填数据的不同展示方式。
|
||||
- 补充 Modal `align` 属性的文档。
|
||||
- 修复 Menu 弹出菜单 `z-index` 丢失的问题。
|
||||
- Progress 的默认颜色固定，不再随着主色变化。
|
||||
- 优化 Button 点击动画在 Chrome 下的效果。
|
||||
- 修复一个 Affix 的 `z-index` 太低的问题。
|
||||
- 修复 Table 树形数据的二级节点列前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212)
|
||||
- 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206)
|
||||
- 修复 Table 指定 `rowKey` 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。
|
||||
|
||||
## 0.12.10
|
||||
|
||||
- 修复 0.12.9 版本 npm 包打包错误的问题。
|
||||
|
||||
## 0.12.9
|
||||
|
||||
`2016-03-11`
|
||||
|
||||
- Transfer
|
||||
- 可以定义 `notFoundContent `。
|
||||
- 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。
|
||||
- 修复 Popconfirm、Popover、Tooltip 的箭头位置未指向元素的问题。
|
||||
- 修正 Badge 在搜狗等旧版 webkit 浏览器下无法使用的问题。
|
||||
- 调整 Tabs 样式。
|
||||
- 修复 Table 中的 Pagination 默认配置问题。
|
||||
- 调整 Form.Item 在 inline 模式下的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141)
|
||||
- 修复 DatePicker `style` 设置错误的问题。
|
||||
- 优化 Popconfirm、Button 样式。
|
||||
- Dropdown 增加默认的 mouseEnterDelay 延迟以优化体验。
|
||||
- 修复 Dialog 样式问题。
|
||||
- 修复 Upload 上传中的状态问题。[#1159](https://github.com/ant-design/ant-design/issues/1159)
|
||||
- 优化 Menu、Tabs 在 Chorme 下的渲染问题。
|
||||
- Form 默认阻止 submit 事件。
|
||||
|
||||
## 0.12.8
|
||||
|
||||
`2016-03-06`
|
||||
|
||||
- 新增 `heart` `calculator` 图标。
|
||||
- Table 补充了 `showHeader` 和 `footer` 属性。
|
||||
- Modal 补充了 `maskClosable` 属性。
|
||||
- 修正一个 Tag 和 Popover 配合使用的问题。[#1111](https://github.com/ant-design/ant-design/issues/1111)
|
||||
- 将 TreeSelect 的 `treeDefaultExpandAll` 默认属性设为 false，并优化了性能。
|
||||
- 修复 RadioGroup 无法垂直布局的问题。[#1119](https://github.com/ant-design/ant-design/issues/1119)
|
||||
- 统一了 less 文件的部分变量。
|
||||
- 修正部分组件的样式。
|
||||
|
||||
## 0.12.7
|
||||
|
||||
`2016-03-03`
|
||||
|
||||
- 修正 Table 的 `rowSelect.onSelectAll` 的第三个参数 `deselectedRows` 为 `changeRows`，记录每次变化的列。
|
||||
|
||||
## 0.12.6
|
||||
|
||||
`2016-03-02`
|
||||
|
||||
- 优化 Table 本地排序在 Chrome 下的稳定性问题。
|
||||
- 修正 Pagination 的 pageSize 属性为受控属性，并补充了 `defaultPageSize` 属性。[#1087](https://github.com/ant-design/ant-design/issues/1087)
|
||||
- 优化 Select 的 combobox 模式的交互体验。
|
||||
- 升级 react-slick 依赖到 `0.11`，修复自动播放有时会失效的问题。[#1009](https://github.com/ant-design/ant-design/issues/1009)
|
||||
- 修复 TreeSelect 的 allowClear 属性失效的问题。[#1084](https://github.com/ant-design/ant-design/issues/1084)
|
||||
- 修复 Input 组件的 className 属性失效的问题。[#1103](https://github.com/ant-design/ant-design/issues/1103)
|
||||
- 修复 Dropdown 的 onClick 属性失效的问题。[#1097](https://github.com/ant-design/ant-design/issues/1097)
|
||||
- 修复多个 CheckboxGroup 选项互相影响的问题。[#1101](https://github.com/ant-design/ant-design/pull/1101)
|
||||
- 修复 FormItem 的子元素为 `null` 时报错的问题。
|
||||
- 修复 Table 组件的选择功能和展开功能配合使用的问题。[#1102](https://github.com/ant-design/ant-design/issues/1102)
|
||||
- 增加了一个搜索框和提示功能结合的 [例子](http://ant.design/components/select/#demo-search-box)。
|
||||
- 允许可编辑的 Tabs 删除最后一个页签。[#1071](https://github.com/ant-design/ant-design/issues/1071)
|
||||
- Table 的 `rowSelect.onSelectAll` 补充了第三个参数 `deselectedRows`, `rowSelect.onChange` 补充了第二个参数 `selectedRows`。[#1105](https://github.com/ant-design/ant-design/issues/1105)
|
||||
- 修正部分组件的样式。
|
||||
|
||||
## 0.12.5
|
||||
|
||||
`2016-02-25`
|
||||
|
||||
- Pagination 支持 `showTotal` 属性。[#1077](https://github.com/ant-design/ant-design/pull/1077)
|
||||
- Cascader 添加 `allowClear` 属性，允许隐藏清除按钮。
|
||||
- 补充了一个带图标的搜索建议框的例子。[#1067](https://github.com/ant-design/ant-design/issues/1067)
|
||||
- 修复 Transfer 在不支持 Object.assign 的浏览器上报错的问题。
|
||||
- 修复 Cascader 在 Safari 下错位的问题。[#1066](https://github.com/ant-design/ant-design/issues/1066)
|
||||
- 移除对 Button 圆角的降级方案。
|
||||
- 修复了部分组件样式的小问题。
|
||||
|
||||
## 0.12.4
|
||||
|
||||
`2016-02-22`
|
||||
|
||||
- Radio 的 value 支持更多类型。[#1043](https://github.com/ant-design/ant-design/pull/1043)
|
||||
- 修复 Spin 组件的大小、居中等样式问题。
|
||||
- FormItem 补充 extra 属性的文档。[#931](https://github.com/ant-design/ant-design/issues/931)
|
||||
- 修复的 Table 下树形数据和选择框配合时的样式问题。
|
||||
- 修复一个水平表单的错误提示的样式错位问题。[#1040](https://github.com/ant-design/ant-design/issues/1040)
|
||||
- 添加了一个轻微的 Button 点击动效。
|
||||
|
||||
## 0.12.3
|
||||
|
||||
`2016-02-19`
|
||||
|
||||
- DatePicker 补充 allowClear 属性，支持单选的清空。
|
||||
- 修复显示时间的 DatePicker 的清空按钮失效的问题。
|
||||
- 优化 DatePicker 的 `确定` 按钮失效样式。
|
||||
|
||||
## 0.12.2
|
||||
|
||||
`2016-02-19`
|
||||
|
||||
- DatePicker 如果有 `确定` 按钮，现在只有点击 `确定` 按钮才会触发 onChange 事件。
|
||||
- 修复带时间选择的 DatePicker 日期格式缺少时间部分的问题。[#1005](https://github.com/ant-design/ant-design/issues/1005)
|
||||
- 修复 DatePicker 内输入框多余的时间展示的问题。[#953](https://github.com/ant-design/ant-design/issues/953)
|
||||
- 升级依赖 react-slick 到 `0.10`。
|
||||
- 支持表单校验错误时自动滚动到第一个错误项。[#993](https://github.com/ant-design/ant-design/issues/993)
|
||||
- 优化了 Select 和 TreeSelect 多选禁用的样式。
|
||||
- Upload 列表项支持链接展现形式。[#1013](https://github.com/ant-design/ant-design/issues/1013)
|
||||
- 修复 Safari 下的样式警告信息。[#999](https://github.com/ant-design/ant-design/issues/999)
|
||||
- Cascader 支持 popupPlacement 位置配置。
|
||||
|
||||
## 0.12.1
|
||||
|
||||
`2016-02-03`
|
||||
|
||||
- 依赖升级到 `rc-pagination@1.4`、`rc-menu@4.10`、`rc-form@0.12`。
|
||||
- 修复 TreeSelect 的不可用样式。
|
||||
- DatePicker 补充 `getCalendarContainer` 属性，用于解决问题 [#991](https://github.com/ant-design/ant-design/issues/991)。
|
||||
- 修正 Modal `onCancel` 的参数为点击事件。[#980](https://github.com/ant-design/ant-design/issues/980)
|
||||
- 修复一个 Tooltip 内嵌套 Popconfirm 的问题。[#977](https://github.com/ant-design/ant-design/issues/977)
|
||||
- 修复 DatePicker 和 RangePicker 的 `onOk` 一直不可用的问题。
|
||||
- 修复一个 Badge 的 count 无法切换的问题。[#983](https://github.com/ant-design/ant-design/issues/983)
|
||||
|
||||
## 0.12.0
|
||||
|
||||
`2016-02-01`
|
||||
|
||||
- 新增 [级联选择(Cascader)](http://ant.design/components/cascader/) 组件。
|
||||
- 新增 [树选择控件(TreeSelect)](http://ant.design/components/tree-select/) 组件。
|
||||
- Form 自身支持校验功能，废弃 Validation。[演示](http://ant.design/components/form/#demo-validate-basic)
|
||||
- Tabs
|
||||
- `activeKey` 修正为受控属性。
|
||||
- 当前项现在会始终显示。[#815](https://github.com/ant-design/ant-design/issues/815)
|
||||
- Modal 可以配置右上关闭按钮是否显示。
|
||||
- Select
|
||||
- 打开选项菜单时，自动滚动到选中项。
|
||||
- `combobox` 模式时，可配置是否默认选中第一项。[rc-select#38](https://github.com/react-component/select/issues/38)
|
||||
- Table
|
||||
- filter 支持层级选择。
|
||||
- 支持行点击事件 `onRowClick`。
|
||||
- 支持多列的横向切换。[演示](http://ant.design/components/table/#demo-paging-columns)
|
||||
- 更换 `dataSource` 和变换页面时不再默认清除选择数据，你可以用 `selectedRowKeys` 手动控制。`原来默认清除的行为会触发一个数据更新的死循环，而且难以实现跨页选择。`
|
||||
- 支持固定表头。[演示](http://ant.design/components/table/#demo-fixed-header)
|
||||
- Tag 去除 `href` 属性，默认标签名从 `a` 改为 `span`。
|
||||
- Timeline 支持指定 pending 节点的内容。
|
||||
- Tree
|
||||
- 节点支持拖拽。
|
||||
- 支持动态控制节点展开与否。[演示](http://ant.design/components/tree/#demo-basic-controlled)
|
||||
- 可以监听节点展开/关闭事件 `onExpand`。
|
||||
- `onCheck` `onSelect` 参数调整。
|
||||
- `onDataLoaded` 改为 `loadData`。
|
||||
- 新增 drag&drop 相关属性：
|
||||
- `onDragStart`
|
||||
- `onDragEnter`
|
||||
- `onDragOver`
|
||||
- `onDragLeave`
|
||||
- `onDrop`
|
||||
- 新增 TreeNode 节点属性：
|
||||
- `disableCheckbox`
|
||||
- `isLeaf`
|
||||
- Transfer 给 `onChange` 增加参数。[#972](https://github.com/ant-design/ant-design/issues/972)
|
||||
- DatePicker
|
||||
- 修复 RangePicker 开始结束日期相同的 bug。[#822](https://github.com/ant-design/ant-design/issues/822)
|
||||
- 修复 `format` 对浮层不生效问题。[#917](https://github.com/ant-design/ant-design/issues/917)
|
||||
- TimePicker 修复一个 `value` 为 `null` 时没有进入受控模式的问题。
|
||||
- Upload
|
||||
- 可以用 `headers` 设置上传头部。
|
||||
- 新增上传图片卡片样式。[演示](http://ant.design/components/upload/#demo-picture-card)
|
||||
- Radio
|
||||
- 更换 Radio.Button 的展现样式。
|
||||
- 可以设置 Radio.Button 的大小。
|
||||
- Progress
|
||||
- `format` 属性现在支持自定义 function 的方式进行定义。[#893](https://github.com/ant-design/ant-design/issues/893)
|
||||
- `format` 指定 string 和 React.Node 的方式被废弃。
|
||||
- 支持 `style` 属性。[#895](https://github.com/ant-design/ant-design/issues/895)
|
||||
- message && notification 现在可以销毁。
|
||||
- Button
|
||||
- 小号 Button 的圆角调整为 `4px`。
|
||||
- 修复 Button.Group disabled 后的样式问题。[#926](https://github.com/ant-design/ant-design/issues/926)
|
||||
- BreadCrumb
|
||||
- 移除 `router` 属性，无需设置。
|
||||
- 修复一个链接参数不对的问题。
|
||||
|
||||
## 0.11.3
|
||||
|
||||
`2016-01-19`
|
||||
|
||||
- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
|
||||
- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
|
||||
- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
|
||||
- 修复 Transfer 搜索功能失效的问题。
|
||||
- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
|
||||
- 修复 RangePicker 时区无法设置的问题。[#837](https://github.com/ant-design/ant-design/issues/837)
|
||||
- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
|
||||
|
||||
## 0.11.2
|
||||
|
||||
`2015-01-03`
|
||||
|
||||
- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
|
||||
- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
|
||||
- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
|
||||
- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
|
||||
- Table
|
||||
- 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。
|
||||
- 更新 dataSource 时，选中项现在会被清空。
|
||||
- 修复一个全选框和禁用的选择项配合的问题。
|
||||
- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。
|
||||
- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。
|
||||
- 组件和文档的样式小调整。
|
||||
|
||||
## 0.11.1
|
||||
|
||||
`2015-12-29`
|
||||
|
||||
- 修复一个 Table 无法修改 pageSize 的问题。
|
||||
- 修复一个 Table 子表格展开的对齐问题。
|
||||
- 修复一个 Chrome 下部分图标左侧切边的问题。
|
||||
- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
|
||||
|
||||
## 0.11.0
|
||||
|
||||
`2015-12-28`
|
||||
|
||||
- **移除默认加载的样式文件，样式现在需要独立加载。**
|
||||
- 按钮圆角调整为 `6px`。
|
||||
- Modal、Popconfirm、Table、TimePicker 支持国际化配置。
|
||||
- 新增虚线型按钮。
|
||||
- 新增 [通用搜索框](http://ant.design/components/form/#demo-search-input) 样式。
|
||||
- 新增图片上传列表样式[演示](http://ant.design/components/upload/#demo-picture-style)。
|
||||
- **部分设计资源开放 [下载](http://ant.design/spec/tools)，包括 Axure 组件库和 Iconfont 字体打包文件。**
|
||||
- 新增 [吊顶规范](http://ant.design/spec/layout/#demo-ceiling)。
|
||||
- 组件演示页面增加锚点。
|
||||
- 新增穿梭框 [Transfer](http://ant.design/components/transfer/) 组件。
|
||||
- 新增小尺寸的 Switch 开关组件。
|
||||
- 增加更多的图标。[#](https://github.com/ant-design/ant-design/commit/087c64649d73206a4d62e52f9b3f6042c1d28608#diff-dc1a1f4794c1c4ee3b083381d4c50c47R180)
|
||||
- 全局微调了警告和错误状态色。
|
||||
- Select
|
||||
- 选中样式进行了调整。
|
||||
- 在标签/多选模式下，选中或删除选项增加了动画效果。
|
||||
- Alert
|
||||
- 默认样式不展示图标。
|
||||
- 带描述的警告框图标改为描线图标。
|
||||
- `type="warn"` 图标修改。
|
||||
- Dropdown 新增带菜单触发的按钮 `Dropdown.Button`。[演示](http://ant.design/components/dropdown/#demo-dropdown-button)
|
||||
- Menu
|
||||
- 新增 `Menu.ItemGroup` 用于把菜单项分组。
|
||||
- onOpen 和 onClose 函数的参数新增了 `keyPath` 数据，可用于制作手风琴类型的菜单。
|
||||
- Badge
|
||||
- 徽章可以独立使用。[演示](http://ant.design/components/badge/#demo-no-wrapper)
|
||||
- 支持设置封顶的 `99+` 的数字。[演示](http://ant.design/components/badge/#demo-overflow)
|
||||
- Slider
|
||||
- 增加 `onAfterChange` 事件。[演示](http://ant.design/components/slider/#demo-event)
|
||||
- 现在设置 `tipFormatter={null}` 可以隐藏 `Tooltip`。
|
||||
- 双滑块拖动体验优化，一个滑块在拖动时可以直接跨过另一滑块。
|
||||
- Breadcrumb 可以自定义分隔符。[演示](http://ant.design/components/breadcrumb/#demo-separator)
|
||||
- Popconfirm 添加 `visible` 属性，使其可以控制是否显示。[演示](http://ant.design/components/popconfirm/#demo-dynamic-trigger)
|
||||
- 修复 Icon `ref` 引起的报错。
|
||||
- 修复 Calendar 组件无法切换年/月的问题。[#757](https://github.com/ant-design/ant-design/issues/757)
|
||||
- Checkbox 新增 `Checkbox.Group`，现可以方便的 [生成一组选择框](http://ant.design/components/checkbox/#demo-group)
|
||||
- Tabs
|
||||
- 新增 [卡片式页签](http://ant.design/components/tabs/#demo-card)。
|
||||
- 调整 [新增和关闭页签](http://ant.design/components/tabs/#demo-editable-card) 的样式。
|
||||
- 现在支持页签的四个位置 `tabPosition="top|right|bottom|left"`。
|
||||
- 移除 `animation` 属性，并在 `tabPosition="top|bottom"` 时默认启用切换动画。
|
||||
- Timepicker
|
||||
- **重命名为 TimePicker。**
|
||||
- 国际化属性 `locale` 结构发生了 [变化](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384)。
|
||||
- 新增 `value` 属性。
|
||||
- 新增属性 `disabledHours` `disabledMinutes` `disabledSeconds`。[演示](http://ant.design/components/time-picker/#picker-demo-disable-options)
|
||||
- 移除 `hourOptions` `minuteOptions` `secondOptions`，新增 `hideDisabled` 属性用于替代。
|
||||
- Datepicker
|
||||
- **重命名为 DatePicker。**
|
||||
- 新增 [日期范围选择控件](http://ant.design/components/date-picker/#picker-demo-range)。
|
||||
- 修改 `showTime` 的交互。[演示](http://ant.design/components/date-picker/#picker-demo-time)
|
||||
- 修正为受控组件。
|
||||
- Table
|
||||
- **移除 `dataSource` 的远程模式。**
|
||||
- 新增 [紧凑型表格](http://ant.design/components/table/#demo-size)。
|
||||
- 允许监听分页的 `onShowSizeChange`。[演示](http://ant.design/components/table/#demo-paging)
|
||||
- 优化表格对树形数据的显示。[演示](http://ant.design/components/table/#demo-indent-size)
|
||||
- 优化了筛选菜单的样式，并添加了最大高度。[演示](http://ant.design/components/table/#demo-head)。
|
||||
- 修复 column.key 设置失效的问题。[#642](https://github.com/ant-design/ant-design/issues/642)
|
||||
- 修复设置时 rowKey 时单选会导致全部选中的问题。[#697](https://github.com/ant-design/ant-design/issues/697)
|
||||
- 修复一个列重新渲染导致选项错乱的问题。[#418](https://github.com/ant-design/ant-design/issues/418#issuecomment-163093580)
|
||||
- 修复选择列无法设置宽度的问题。[#649](https://github.com/ant-design/ant-design/issues/649)
|
||||
- Form
|
||||
- 修复了 Textarea 无法输入的问题。[#646](https://github.com/ant-design/ant-design/issues/646)
|
||||
- 修复了 Textarea 设置 `cols` 和 `rows` 属性失效的问题。[#694](https://github.com/ant-design/ant-design/issues/694)
|
||||
- 修复无法设置 `className` 的问题。[#711](https://github.com/ant-design/ant-design/issues/711)
|
||||
- 修复 Upload 组件在 `beforeUpload` 返回 `false` 后依然更新上传列表问题。[#757](https://github.com/ant-design/ant-design/issues/757)
|
||||
- 工具
|
||||
- 替换 `antd build` 为 [atool-build](https://github.com/ant-tool/atool-build)，重构并改善了 webpack 配置的自定义方式。
|
||||
- 替换 `antd server` 为 [dora](https://github.com/dora-js/dora)，一个完全插件化的开发服务器，支持[代理转发和数据 Mock](https://github.com/dora-js/dora-plugin-proxy)、[atool-build](https://github.com/dora-js/dora-plugin-atool-build)、[热替换](https://github.com/dora-js/dora-plugin-hmr)。
|
||||
- 新增 babel 插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)，转换 `import {Button} from 'antd'` 为 `import Button from 'antd/lib/button'`。
|
||||
- 发布了 `antd-init@0.6.x`，支持以上改动。
|
||||
|
||||
> [0.11 升级指南](http://ant.design/docs/react/upgrade-notes#0-10-gt-0-11)
|
||||
|
||||
## 0.10.5
|
||||
|
||||
`2016-01-04`
|
||||
|
||||
- 修复 Table 更新 dataSource 后，选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793)
|
||||
|
||||
## 0.10.4
|
||||
|
||||
`2015-11-30`
|
||||
|
||||
- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
|
||||
- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。
|
||||
- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
|
||||
- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
|
||||
|
||||
|
||||
## 0.10.3
|
||||
|
||||
`2015-11-26`
|
||||
|
||||
- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
|
||||
- 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
|
||||
- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
|
||||
- 对演示和样式代码增加了 lint 检查。
|
||||
|
||||
|
||||
## 0.10.2
|
||||
|
||||
`2015-11-25`
|
||||
|
||||
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
|
||||
- 优化 Badge 动画效果。
|
||||
- 修复以下问题：
|
||||
- 文本域的表单校验无法重置。
|
||||
- 设置 Upload 的 `multiple` 为 `true` 时，未显示每个文件的上传进度。
|
||||
- Breadcrumb 配合 Router 的时候如果没有 `breadcrumbName` 会抛错。
|
||||
- InputNumber 同时设置 `size` `className` 时会有冲突。
|
||||
|
||||
|
||||
## 0.10.1
|
||||
|
||||
`2015-11-20`
|
||||
|
||||
- 修改内部组件的引用结构，方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
|
||||
- 移除了演示中没有使用过的 `antd.ButtonGroup`，依然用 `const ButtonGroup = Button.Group` 来使用。
|
||||
- Form 和 Input 目录分离，`import { Form, Input } from 'ant/lib/form'` 的引用方式被废弃。
|
||||
|
||||
现在可以 `import Form from 'ant/lib/form'` 和 `import Input from 'ant/lib/input'`。
|
||||
|
||||
原有的 `import { Form, Input } from 'antd'` 则不受影响。
|
||||
|
||||
- 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题，并将 `calendarStyle` 更名为 `popupStyle`。
|
||||
|
||||
|
||||
## 0.10.0
|
||||
|
||||
`2015-11-20`
|
||||
|
||||
- 全面兼容 `react@0.14.x`。
|
||||
- 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。
|
||||
- [Button](http://ant.design/components/button/)、[Iconfont](http://ant.design/components/icon/)、[Layout](http://ant.design/components/layout/)、[Form](http://ant.design/components/form/)、[Input](http://ant.design/components/form/#demo-input) 等样式模块改造为 React 组件。
|
||||
- 新增 [Queue-anim](http://ant.design/components/queue-anim/) 组件，更换了原来的 enter-animation。
|
||||
- 全新的[字体图标](/components/icon)。
|
||||
- 全面更新视觉风格，补充更多图标。[#313](https://github.com/ant-design/ant-design/issues/313)
|
||||
- 调整字体基线，告别对图标位置的特殊调节。(感谢 [iconfont.cn](http://iconfont.cn) 的鼎力支持)
|
||||
- Datepicker、Dropdown、Select、Popover、Popconfirm 等浮层组件添加在空间不足的情况下自动调整位置功能。
|
||||
- Popover、Tooltip、Popconfirm 组件支持 12 个方向。[#312](https://github.com/ant-design/ant-design/issues/312)
|
||||
- 优先使用苹方字体。
|
||||
- 统一 size 属性的可选值为 `small` `default` `large`。
|
||||
- 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
|
||||
- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
|
||||
- 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
|
||||
- 添加布局和导航规范，以及[常用布局](http://ant.design/spec/layout/)。
|
||||
- 文档支持标题和演示的锚点，方便分享文档和演示代码。
|
||||
- 提供多版本的文档，在[主站](http://ant.design)的右下角提供切换按钮。
|
||||
- [antd-bin](https://github.com/ant-tool/xtool) 升级到 `0.10`。
|
||||
- 拆分出 [antd-init](https://github.com/ant-design/antd-init) 和 [antd-build](https://github.com/ant-design/antd-build)。
|
||||
- 提供代理功能。
|
||||
- 提供 UI 测试功能。
|
||||
|
||||
#### 组件变更
|
||||
|
||||
- Table
|
||||
- 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
|
||||
- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
|
||||
- 列支持了 `colSpan` 和 `rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
|
||||
- 新增 `loading` 属性。
|
||||
- 筛选增加 `filterMultiple` 属性，支持单选的配置。
|
||||
- Datepicker
|
||||
- 添加国际化支持。
|
||||
- 添加手动输入和清除功能。
|
||||
- 优化了视觉样式。
|
||||
- 修复不标准的日期格式导致显示错误的问题。
|
||||
- 用 `onChange` 属性代替 `onSelect` 属性。
|
||||
- Validation 修复了 对 Datepicker、Input-number、Select 的支持，并添加了相关演示。
|
||||
- Carousel 的依赖 react-slick 升级到 0.9.x，相关 API 也相应更新。
|
||||
- Tree 组件支持完全受控模式。[#397](https://github.com/ant-design/ant-design/issues/397)
|
||||
- Input Number
|
||||
- 组件输入体验优化，现在可以键入任意字符，失焦时格式化为合法值。
|
||||
- 修复不支持小数 step 的问题。[#530](https://github.com/ant-design/ant-design/issues/530)
|
||||
- Tabs 新增[垂直页签功能](http://ant.design/components/tabs/#demo-vertical-left)。
|
||||
- Upload 组件视觉优化，新增高级浏览器下的上传进度展示。[#311](https://github.com/ant-design/ant-design/issues/311)
|
||||
- Menu
|
||||
- 视觉效果大幅优化。
|
||||
- 新增 [dark 主题](http://ant.design/components/menu/#demo-theme) 的样式。
|
||||
- 修复一个链接点击区域的问题。[#535](https://github.com/ant-design/ant-design/issues/535)
|
||||
- Dropdown 用 onClick 代替 onSelect 作为推荐的使用方式，因为原有的 onSelect 只在变化时触发。
|
||||
- Slider
|
||||
- 新增[双滑块功能](http://ant.design/components/slider/#demo-range)。
|
||||
- 优化 marks 属性的使用逻辑，使其可以和具体数值进行绑定。[slider#26](https://github.com//react-component/slider/issues/26)
|
||||
- 属性命名优化，用 `dots` 代替了 `withDots` 属性，用 `included` 代替了 `isIncluded`。
|
||||
- Badge 当 `count` 为 0 时不展示。
|
||||
- Progress 新增 `format` 属性，能够自定义展示的进度文案。
|
||||
- Modal 新增 `confirmLoading` 属性。
|
||||
- 新增 Radio.Button 的失效样式。
|
||||
- 提供 IE8 下的圆角按钮[兼容方案](http://ant.design/components/button/#ie8-border-radius-support)。
|
||||
- `antd.Notification()` 修正为 `antd.notification()`。
|
||||
- 另有巨量样式的修复和优化。
|
||||
|
||||
> 备注：
|
||||
>
|
||||
> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
|
||||
> - [0.10 升级指南](http://010x.ant.design/docs/upgrade-to-0.10)
|
||||
|
||||
---
|
||||
|
||||
## 0.9.3 ~ 0.9.5
|
||||
|
||||
`2015-11-04`
|
||||
|
||||
* 增加对 React 版本的检测提示机制，0.9.x 序列只能使用 `react@~0.13.3`。
|
||||
|
||||
|
||||
## 0.9.2
|
||||
|
||||
`2015-10-26`
|
||||
|
||||
* Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76)
|
||||
* 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d)
|
||||
* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](https://github.com/ant-design/ant-design/commit/9ef14500f3abfcc7081f8dceab8187ec835e3918)
|
||||
* 修复一些小的样式问题。
|
||||
|
||||
|
||||
## 0.9.1
|
||||
|
||||
`2015-09-26`
|
||||
|
||||
* 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)
|
||||
* 升级依赖 rc-upload 到 1.6.x，修复 IE8/9 下的兼容性问题。
|
||||
* 升级依赖 rc-steps 到 1.3.x。
|
||||
* 新增 current 属性，方便配置当前的步骤。[#290](https://github.com/ant-design/ant-design/issues/290)
|
||||
* 修复因滚动条影响页面宽度导致的错位问题。
|
||||
* 升级依赖 rc-menu 到 1.5.x。
|
||||
* 新增 onSelect 回调中返回参数 keyPath，从而支持只展开当前父级菜单的交互方式。[demo](http://ant.design/components/menu/#demo-sider-current)
|
||||
* 修复 hover 类型的弹出菜单能响应点击事件的问题。[react-component/menu#14](https://github.com/react-component/menu/issues/14)
|
||||
* 修复一个 Table 的分页无法正确展示的问题。[#253](https://github.com/ant-design/ant-design/issues/253)
|
||||
* 修复一个 combobox 选择框无法选中的问题。[0435ca6](https://github.com/ant-design/ant-design/commit/0435ca60e3b574bac3808a10ba3db62f482335fd)
|
||||
* 修复 Radio.Button 在 IE 8 下不可用的问题。[#321](https://github.com/ant-design/ant-design/issues/321)
|
||||
* 适配 breadcrumb 面包屑组件和 `react-router@1.0.0-rc1`。
|
||||
* 修复只能同时弹出一个 Modal 通知框的问题。[d6a4094](https://github.com/ant-design/ant-design/commit/d6a4094bc4c72acd05be001c7e46dbd17092001a)
|
||||
* 升级依赖 rc-tooltip 到 2.8.0，增加 overlayClassName 属性。
|
||||
* 部分组件交互和视觉效果修正。
|
||||
|
||||
|
||||
## 0.9.0
|
||||
|
||||
`2015-09-14`
|
||||
|
||||
* 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
|
||||
* 优化弹出层类组件的动画效果，使其更加流畅。
|
||||
* 部分文案更新。
|
||||
* 优化主站在小分辨率屏幕下的样式。
|
||||
* 使用 instantclick 改造主站，加载速度有明显提升。
|
||||
* antd-bin 升级到 [0.6.x](https://github.com/ant-design/antd-bin/blob/master/HISTORY.md) 。
|
||||
* Upload **重构了 API 接口，不向下兼容**，支持自定义的功能扩展。
|
||||
* 新增 `onChange(file) {}` 接口，移出原来的 `onSuccess`、`onProgess`、`onError` 等接口。
|
||||
* 新增 `fileList` 和 `defaultFileList` 属性，以满足更多的自定义功能，具体见演示。
|
||||
* 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。
|
||||
* 移除内建的上传成功或失败的信息提示，业务可自行实现。
|
||||
* 修正多文件选择上传时文件列表只展示一个文件的问题。
|
||||
* Table
|
||||
* 新增可展开的 table。[#258](https://github.com/ant-design/ant-design/pull/258)
|
||||
* 新增无数据的展示样式。[4c54644](https://github.com/ant-design/ant-design/commit/4c54644116d46cb2510d2d475234529bad60e5d5)
|
||||
* 修复本地模式 `dataSource` 无法更新的问题。[6d2dcc4](https://github.com/ant-design/ant-design/commit/6d2dcc45393b6ec0ad1ba73caf8b1ec42353743f)
|
||||
* 修复远程模式 loading 失效的问题。[9b8abb2](https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf)
|
||||
* 用 [reqwest-without-xhr2](http://npmjs.com/reqwest-without-xhr2) 代替了 reqwest，解决某些开发环境下 xhr2 依赖的问题。
|
||||
* Select
|
||||
* 增加 label 属性，允许多选模式下展示标签（原来只能显示 value 值）。[演示](http://react-component.github.io/select/examples/mul-suggest.html)
|
||||
* 修复 combobox 模式下 value 失效的问题。
|
||||
* Notification 修复不会自动消失的问题。[23fce55](https://github.com/ant-design/ant-design/commit/23fce559b0b2faf4e0b686a92dbcdd045727a464)
|
||||
* Steps 新增竖版的步骤条。
|
||||
* Carousel 修复 fade 模式下可以拖拽的问题。#212
|
||||
* Collapse 修复动画不生效的问题。
|
||||
* Datepicker 修复无法设置为空值的问题。
|
||||
* Modal
|
||||
* 添加 [通知类型](http://ant.design/components/modal/#demo-info) 的对话框函数。
|
||||
* 用 `Modal.confirm()` 代替 `confirm()` 方法。
|
||||
* 修改为需要在 onCancel 手动设置 visible 属性来关闭。
|
||||
* Message 添加 [加载中类型](http://ant.design/components/message/#demo-loading)。
|
||||
* Radio 修改 Radio.Group 容器的盒模型属性为 inline-block 。
|
||||
* Enter Animation
|
||||
* 大幅度的重构，全新 API 的设计。
|
||||
* 支持和 react-router 结合使用。
|
||||
|
||||
|
||||
## 0.8.0
|
||||
|
||||
`2015-08-25`
|
||||
|
||||
这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。
|
||||
|
||||
* 新增九个组件 `menu`、`upload`、`carousel`、`tree`、`notification`、`validation`、`affix`、`alert`、`enterAnimation`。目前共有组件 34 个，基本能满足后台类项目的组件需求。
|
||||
* 新增设计文档部分，包括文字、色彩、动画。
|
||||
* 重新梳理了设计和 React 实现部分的关系，强调了 Ant Design 的设计属性，并更新了网站的信息结构。
|
||||
* 构建工具 `antd-bin` 升级到 `0.4.0` 版本，支持合并 webpack 配置，热替换（HMR）等特性，[详见](https://github.com/ant-design/antd-bin)。
|
||||
* 组件动画优化和补充，体验更加流畅动感。
|
||||
* 排查并修复 IE 和 safari 等浏览器的兼容问题。
|
||||
* 大量代码重构，演示代码补充，文档更新、以及样式上的优化。
|
||||
|
||||
## 0.7.3
|
||||
|
||||
`2015-07-30`
|
||||
|
||||
* 小幅重构了 Table 分页，修复了分页导致的数据不展示的问题。
|
||||
* 更新了部分文档。
|
||||
|
||||
## 0.7.2
|
||||
|
||||
`2015-07-27`
|
||||
|
||||
* 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
|
||||
* 重构了 message 组件。
|
||||
* 添加英文版说明文档 [README-en_US.md](https://github.com/ant-design/ant-design/blob/master/README-en_US.md)。
|
||||
* 部分代码切换至 ES6 模式。
|
||||
* 修正了部分组件的样式和演示，优化部分动画。
|
||||
|
||||
## 0.7.1
|
||||
|
||||
`2015-07-22`
|
||||
|
||||
* 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。
|
||||
* select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)（原来是显示 value）。
|
||||
* 修正了部分组件的样式和演示。
|
||||
* 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。
|
||||
|
||||
## 0.7.0
|
||||
|
||||
`2015-07-21`
|
||||
|
||||
* 第一个公开版本，发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。
|
||||
* 发布 [Ant Design 首页](http://ant.design/) 和入门文档。
|
||||
@@ -1,416 +0,0 @@
|
||||
---
|
||||
order: 6
|
||||
title: 更新日志
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
如果需要查看 `2.0.0` 之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0)。
|
||||
|
||||
---
|
||||
|
||||
## 2.5.2
|
||||
|
||||
`2016-12-10`
|
||||
|
||||
* 优化 Menu 已选择项的样式。
|
||||
* 修复 Mention 不能响应 `onFocus` 和 `onBlur` 的问题。[#4163](https://github.com/ant-design/ant-design/issues/4163)
|
||||
* 修复 `disabled` 和 `checked` 的 Radio 之间会多一条阴影的问题。[#4114](https://github.com/ant-design/ant-design/pull/4114) @jdz321
|
||||
* 修复 RangePicker、TimePicker、Calendar 设置 Moment 的 `defaultValue` 和 `value` 时也会报错的问题。[#4147](https://github.com/ant-design/ant-design/issues/4147)
|
||||
* 修复 Affix 在开启动画的 Tabs 里使用时会消失的问题。[#3943](https://github.com/ant-design/ant-design/issues/3943)
|
||||
* 修复 Cascader 手动选择和搜索选择时 `onChange` 接收到的 `selectedOptions` 不同的问题。[#4096](https://github.com/ant-design/ant-design/issues/4096)
|
||||
* 修复 Tabs 页增加到一定数量时会产生偏移的问题。[#3637](https://github.com/ant-design/ant-design/issues/3637)
|
||||
* Table
|
||||
* 居中对齐表头分组的父表头。
|
||||
* 修正设置 filterDropdownVisible 时不生效的问题。[#4162](https://github.com/ant-design/ant-design/issues/4162)
|
||||
|
||||
## 2.5.1
|
||||
|
||||
`2016-12-03`
|
||||
|
||||
* 提升网站首页在移动端访问的体验。
|
||||
* 补充从 `1.x` 升级到 `2.x` 时的组件改动警告提示。[#4028](https://github.com/ant-design/ant-design/pull/4028)
|
||||
* 现在 ToolTip、Popover、Popconfirm 支持直接包裹文本节点和多个节点。[#3924](https://github.com/ant-design/ant-design/issues/3924)
|
||||
* Anchor
|
||||
* 修复快速滚动时的定位问题。[#4053](https://github.com/ant-design/ant-design/issues/4053)
|
||||
* 修复 target 指定父元素 ref 时无效的问题。[#4037](https://github.com/ant-design/ant-design/issues/4037)
|
||||
* Table
|
||||
* 修复设置 defaultChecked 时的一个选中问题。[#4020](https://github.com/ant-design/ant-design/issues/4020)
|
||||
* 修复分组表头中筛选功能无法使用的问题。[#4099](https://github.com/ant-design/ant-design/issues/4099)
|
||||
* 修复在 `Input[type="textarea"]` 上使用 Popover 定位错误问题。[#4092](https://github.com/ant-design/ant-design/issues/4092)
|
||||
* 修复 Popconfirm 的 `visible` 属性失效的问题。[#4068](https://github.com/ant-design/ant-design/issues/4068)
|
||||
* 修复 TimePicker 无法设置 `style.width` 的问题。
|
||||
* 修复 Steps 自定义图标和默认图标大小不一致的问题。[#3817](https://github.com/ant-design/ant-design/issues/3817)
|
||||
* 修复 Form、Button、Slider、Table 等组件的一些样式细节。
|
||||
|
||||
## 2.5.0
|
||||
|
||||
`2016-11-25`
|
||||
|
||||
* 默认主题风格修改为支付宝钱包风格，及大量样式优化。
|
||||
* 支持服务端渲染。（Mention 会因为 [draft-js](https://github.com/facebook/draft-js/issues/385) 的问题有 warning）
|
||||
* 引入 [Jest Snapshot](https://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing) 测试组件结构及服务端渲染问题。
|
||||
* 官网及文档优化。
|
||||
* 新增自定义主题的 [文档](https://ant.design/docs/react/customize-theme)。
|
||||
* 新增 [Sketch 资源文件](https://ant.design/docs/resource/download)。
|
||||
* LocaleProvider 新增巴西语支持。[#4004](https://github.com/ant-design/ant-design/pull/4004) [@nathantn](https://github.com/nathantn)
|
||||
* DatePicker
|
||||
* DatePicker 现在可以决定是否展示 “今天” 按钮。[commit](https://github.com/ant-design/ant-design/commit/bbef274aae169d142e3e7e3ea0af922d48e6dd64)
|
||||
* RangePicker 现在可以自定义快捷选择。[demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges)
|
||||
* 修复 DatePicker 设置 `showTime` 后 “此刻” 按钮失效的问题。[#3748](https://github.com/ant-design/ant-design/issues/3748)
|
||||
* 修复 `RangePicker[format]` 失效的问题。[#3808](https://github.com/ant-design/ant-design/issues/3808)
|
||||
* 新增并优化部分 Icon。[#3977](https://github.com/ant-design/ant-design/pull/3977)
|
||||
* 新增 Input.Search 控件。[demo](https://ant.design/components/input/#components-input-demo-search-input)
|
||||
* Mention onSelect 事件现在可以获取完整的数据。[#3867](https://github.com/ant-design/ant-design/issues/3867)
|
||||
* Pagination 现在支持展示当前页的索引范围。[demo](https://ant.design/components/pagination/#components-pagination-demo-total)
|
||||
* Table
|
||||
* 自定义筛选的显示隐藏现在可以通过代码控制。[demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel)
|
||||
* 支持 JSX 风格的方式设置 columns。[demo](https://ant.design/components/table/#components-table-demo-jsx)
|
||||
* 现在可以监听单元格的点击事件。[#3774](https://github.com/ant-design/ant-design/issues/3774)
|
||||
* 修复无边框 Table 头部的圆角样式问题。
|
||||
* 修复 title 和 footer 高度不随 `Table[size]` 变化的问题。[commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23)
|
||||
* 修复选中状态出错的问题。[#3900](https://github.com/ant-design/ant-design/issues/3900)
|
||||
* Upload
|
||||
* 修复 children 不能为 `null` 的问题。
|
||||
* 修复预览逻辑的问题。[commit](https://github.com/ant-design/ant-design/commit/e552880c32aaa3f5b0fb09a5e1fb7454c24d5378)
|
||||
* 修复 Badge 会覆盖其他组件的问题。[#3898](https://github.com/ant-design/ant-design/issues/3898)
|
||||
* 修复多行 Checkbox 样式不对齐的问题。[#3971](https://github.com/ant-design/ant-design/issues/3971) [@flashback313](https://github.com/flashback313)
|
||||
* 修复 InputNumber 与其它表单控件不对齐的问题。[#3866(comment)](https://github.com/ant-design/ant-design/issues/3866#issuecomment-261148256)
|
||||
* 修复 `Menu.Divider` 样式问题。[#3813](https://github.com/ant-design/ant-design/issues/3813)
|
||||
* 修复 Popover 直接内嵌 Checkbox 和 Radio 无效的问题。[#3455](https://github.com/ant-design/ant-design/issues/3455)
|
||||
* 修复 Select combobox 高度异常问题。[#3855](https://github.com/ant-design/ant-design/issues/3855)
|
||||
* 修复 Switch actived 后的样式问题。[#3838](https://github.com/ant-design/ant-design/issues/3838)
|
||||
* 修复 Transfer 搜索无结果时不展示 “Not Found” 提示的问题。[#3996](https://github.com/ant-design/ant-design/issues/3996)
|
||||
* 修复 TreeSelect 占位符的样式问题。[#3841](https://github.com/ant-design/ant-design/issues/3841)
|
||||
* 修复 TypeScript 编译报错的问题。[#3969](https://github.com/ant-design/ant-design/pull/3969) [@AlbertZheng](https://github.com/AlbertZheng)
|
||||
* 修复表单反馈图标影响用户操作的问题。[#3891](https://github.com/ant-design/ant-design/issues/3891)
|
||||
|
||||
## 2.4.3
|
||||
|
||||
`2016-11-17`
|
||||
|
||||
* 修复 `Anchor` 内部 querySelector 报错，并做了一些体验优化 。[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844)
|
||||
|
||||
## 2.4.2
|
||||
|
||||
`2016-11-13`
|
||||
|
||||
* 修复 `Dropdown.Button` 不弹出的问题。[#3815](https://github.com/ant-design/ant-design/issues/3815)
|
||||
|
||||
## 2.4.1
|
||||
|
||||
`2016-11-11`
|
||||
|
||||
* 修复 `2.4.0` 组件 index 文件丢失的问题。
|
||||
|
||||
## 2.4.0
|
||||
|
||||
`2016-11-11`
|
||||
|
||||
* 调整了组件的导航结构。
|
||||
* 新增 [Anchor](https://ant.design/components/anchor) 锚点组件。
|
||||
* 整理了样式变量，修复 `@font-size-base` 和 `@text-color` 在部分组件无效的问题，新增 `@font-size-lg` `@text-color-secondary`，并移除了部分无用的变量。
|
||||
* `Transfer` 组件新增了受控属性 `selectedKeys`。[#3729](https://github.com/ant-design/ant-design/issues/3729)
|
||||
* `Tag` 新增选中状态。
|
||||
* 修复 `Dropdown.Button` 不支持 `visible` 和 `onVisibleChange` 的问题。[#3779](https://github.com/ant-design/ant-design/issues/3779)
|
||||
* 修复 `DatePicker[showTime]`` 的 `此刻` 按钮。[#3748](https://github.com/ant-design/ant-design/issues/3748)
|
||||
* 修复 `Steps` 竖直方向的样式。[#3760](https://github.com/ant-design/ant-design/issues/3760)
|
||||
* 修复 `Spin` 组件在 IE10+ 的样式问题。[#3755](https://github.com/ant-design/ant-design/issues/3755)
|
||||
* 修复 `Mention` 组件的 focus 逻辑. [#3801](https://github.com/ant-design/ant-design/issues/3801)
|
||||
* 修复 `Progress` 组件的动画问题。[#3784](https://github.com/ant-design/ant-design/issues/3784)
|
||||
* 修复 `Select` 搜索时的丢失焦点问题。[#3778](https://github.com/ant-design/ant-design/issues/3778)
|
||||
* 修复 `TimePicker` 不支持 `format="HH"` 等格式的问题。[#3793](https://github.com/ant-design/ant-design/issues/3793)
|
||||
* 修复 `Input` 的 `suffix` 部分区域中鼠标事件无法响应的问题。[#3714](https://github.com/ant-design/ant-design/issues/3714)
|
||||
* 优化了 `Table` 选择的性能。[#3757](https://github.com/ant-design/ant-design/pull/3757)
|
||||
* 优化 `Carousel` 的默认样式。
|
||||
* 优化 `Checkbox` 和 `Radio` 的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* 修复 `DatePicker`、`Form`、`Table` 等组件的样式细节。
|
||||
|
||||
## 2.3.2
|
||||
|
||||
`2016-11-09`
|
||||
|
||||
* 修复使用 `getFieldProps` 会导致死循环的问题。
|
||||
|
||||
## 2.3.1
|
||||
|
||||
`2016-11-07`
|
||||
|
||||
* 修正上个版本缺少 `dist/antd.css` 的问题。
|
||||
|
||||
## 2.3.0
|
||||
|
||||
`2016-11-04`
|
||||
|
||||
* 升级 normalize.css 到 5.0。
|
||||
* package.json 的 main 换成了 `lib/index.js`。[#3397](https://github.com/ant-design/ant-design/pull/3397)
|
||||
* 全新的 `Spin` 设计。
|
||||
* `TimePicker` 新增了 `addon` 以支持自定义的附加内容。
|
||||
* `Tree` 新增了 `onDragEnd`。
|
||||
* `Collapse` 新增了 `bordered`。
|
||||
* 优化 `Tabs` 切换时的动画效果。
|
||||
* 优化 `Radio` 和 `Checkbox` 在禁用和鼠标停留时的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590)
|
||||
* 优化 `Transfer` 的性能。[#2860](https://github.com/ant-design/ant-design/issues/2860)
|
||||
* 修复 `Popover` 嵌套时的样式问题。[#3448](https://github.com/ant-design/ant-design/issues/3448)
|
||||
* 修复 `Transfer` 服务端渲染报错的问题。[#3686](https://github.com/ant-design/ant-design/issues/3686)
|
||||
* 修复 `Upload` `picture-card` 模式下新上传的图片不显示预览的问题。[#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
|
||||
* DatePicker
|
||||
* 在 `showTime` 模式下现在失去焦点也会触发 `onChange`。
|
||||
* `MonthPicker` 增加了 `monthCellContentRender` 和 `cellContentRender`。
|
||||
* `RangePicker` 现在可以手动输入时间了。[#3718](https://github.com/ant-design/ant-design/issues/3718)
|
||||
* 新增了捷克语的翻译。
|
||||
* Badge
|
||||
* 优化鼠标停留时超过 99 的数字显示。[#3645](https://github.com/ant-design/ant-design/issues/3645)
|
||||
* 修复单独使用时会有移动动画的问题。[#3709](https://github.com/ant-design/ant-design/issues/3709)
|
||||
* Mention
|
||||
* 修复会被 `Table` 遮住的问题。[#3588](https://github.com/ant-design/ant-design/issues/3588)
|
||||
* 新增 `getSuggestionContainer` 来指定容器。[#3658](https://github.com/ant-design/ant-design/pull/3658)
|
||||
* Tag
|
||||
* 废弃 `color` 属性。[#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* 新增 `type`。[#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* 新增 `checkable`。[#3560](https://github.com/ant-design/ant-design/issues/3560)
|
||||
* Radio.Group
|
||||
* 新增 `className`。
|
||||
* `children` 为 `null` 或 `undefined` 时现在会被忽略。
|
||||
* Select
|
||||
* 新增 `tokenSeparators` 支持粘贴时自动分词。[#2071](https://github.com/ant-design/ant-design/issues/2071)
|
||||
* 新增 `onFocus` 回调。[#3587](https://github.com/ant-design/ant-design/issues/3587)
|
||||
* 修复 `combobox` 模式下选中项不能正确显示的问题。[#3401](https://github.com/ant-design/ant-design/issues/3401)
|
||||
|
||||
## 2.2.1
|
||||
|
||||
`2016-11-02`
|
||||
|
||||
* 修复 Form 中 DatePicker[showTime]（受控）无法使用的问题。[#3665](https://github.com/ant-design/ant-design/issues/3665)
|
||||
|
||||
## 2.2.0
|
||||
|
||||
`2016-10-28`
|
||||
|
||||
* 支持 TypeScript@2.0。[@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
|
||||
* 不再强依赖于 React 特定版本。[#3627](https://github.com/ant-design/ant-design/pull/3627)
|
||||
* Alert 支持 `className` `style` 属性。
|
||||
* DatePicker MonthPicker RangePicker 现在允许设置是否显示清除按钮。[#3618](https://github.com/ant-design/ant-design/issues/3618)
|
||||
* Form.Item 现在可以感知深层嵌套的表单域，以自动为其生成错误信息和状态。[#3212](https://github.com/ant-design/ant-design/issues/3212)
|
||||
* RangePicker 现在可以设置不可选的时间。[#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
|
||||
* Switch
|
||||
* 宽度现在会随着 `checkedChildren/unCheckedChildren` 自动调整。[#3380](https://github.com/ant-design/ant-design/issues/3380)
|
||||
* 优化切换动画。
|
||||
* Upload 现在可以 [自定义上传方式](https://github.com/react-component/upload#customrequest)。[@edgji](https://github.com/edgji)
|
||||
* Icon
|
||||
* 新增 `bulb` `select` `like-o` `dislike-o`。
|
||||
* 调整 `loading` `like` `dislike`。
|
||||
* 优化 Card DatePicker Icon Table 的 TypeScript 定义。[@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
|
||||
* 修复 Cascader `defaultValue` 失效的问题。[#3470](https://github.com/ant-design/ant-design/issues/3470)
|
||||
* 修复在一行内同时使用 Button Input DatePicker Select 时对齐的问题。[#3481](https://github.com/ant-design/ant-design/issues/3481)
|
||||
* DatePicker
|
||||
* 修复设置 `DatePicker[showTime]` 后 `onChange` 事件触发时机问题。[#3523](https://github.com/ant-design/ant-design/issues/3523)
|
||||
* 修复 Dropdown.Button disabled 后仍然响应操作的问题。[#3535](https://github.com/ant-design/ant-design/issues/3535)
|
||||
* Menu
|
||||
* 修复服务端渲染问题，感谢 [@xpcode](https://github.com/xpcode) 定位问题。[#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
|
||||
* 修复 children 不能为 `null` 的问题。[#3599](https://github.com/ant-design/ant-design/issues/3599)
|
||||
* 修复 message 加载状态无动画的问题。[#3536](https://github.com/ant-design/ant-design/issues/3536)
|
||||
* Form
|
||||
* 修复 `Form[inline]` 与 `Input[addonBefore|addonAfter]` 一起使用时的样式问题。[#3524](https://github.com/ant-design/ant-design/issues/3524)
|
||||
* 修复 Form.Item 内 Radio.Button 样式问题。
|
||||
* 修复 Form.Item 内搜索按钮的样式问题。[#3630](https://github.com/ant-design/ant-design/issues/3630)
|
||||
* 修复用户无输入时 Form.Item 识别为校验成功的问题。[#3613](https://github.com/ant-design/ant-design/issues/3613)
|
||||
* 当 `Popover[title]` 没有设置时，不再限制 Popover 的最小宽度。
|
||||
* Table
|
||||
* 修复固定表头在没有数据情况下的样式问题。[#3567](https://github.com/ant-design/ant-design/issues/3567)
|
||||
* 修复无数据时会覆盖 SubMenu 的问题。[#3521](https://github.com/ant-design/ant-design/issues/3521)
|
||||
* Tabs
|
||||
* 修复卡片叶签头部高度与设计稿不一致的问题。
|
||||
* 修复 TabPane 的高度会被同级 TabPane 撑高的问题。[#3304](https://github.com/ant-design/ant-design/issues/3304)
|
||||
* 修复 `TreeSelect[showSearch]` 样式问题。[#3520](https://github.com/ant-design/ant-design/issues/3520)
|
||||
|
||||
## 2.1.0
|
||||
|
||||
`2016-10-16`
|
||||
|
||||
- Icon 现在支持旋转动画。
|
||||
- Tabs 现在可以禁用切换动画。[#3324](https://github.com/ant-design/ant-design/issues/3324)
|
||||
- 新增西班牙语的 localization 支持。@Danjavia
|
||||
- 更新俄语的 localization 文案。@plandem
|
||||
- 新增 AutoComplete[onSelect] 回调。
|
||||
- 优化 Modal 样式细节。
|
||||
- 优化 Tooltip 动画。
|
||||
- 优化 Transfer 按钮的样式。
|
||||
- 优化 Tree 的样式细节。
|
||||
- 整理和修复了部分 less 变量。
|
||||
- 修复服务端渲染时全量引入 antd 报错的问题。
|
||||
- 修复 Affix 与 BackTop 的服务端渲染问题。[#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
|
||||
- 修复 Card[title] 内无法使用 `h3` 之类的标签的问题。[#3388](https://github.com/ant-design/ant-design/issues/3388)
|
||||
- 修复 Cascader 搜索模式与浏览器自动完成有冲突的问题。[#3350](https://github.com/ant-design/ant-design/issues/3350)
|
||||
- DatePicker
|
||||
- 修复设置 `showTime` 后，`onChange` 重复触发的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
|
||||
- 修复浮层与 Trigger 日期格式不一致的问题。[#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
|
||||
- 修复与 TimePicker 样式冲突问题。[#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
|
||||
- 修复 Form.Item 标签文案过长溢出的问题。
|
||||
- 修复 Icon 在 Safari 下会出现边框的问题。
|
||||
- 修复 InputNubmer 键盘事件死循环问题。[#3239](https://github.com/ant-design/ant-design/issues/3239)
|
||||
- 修复 Popover 箭头样式问题。
|
||||
- 修复 Popover 和 Popconfirm 的 `arrowPointAtCenter` 无效的问题。
|
||||
- Select
|
||||
- 修复样式重复引入的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
|
||||
- 修复 `notFoundContent` 无法置空的问题。[#3345](https://github.com/ant-design/ant-design/issues/3345)
|
||||
- 修复 Table 内使用 Select[showSearch] 后宽度会跳动的问题。[#3413](https://github.com/ant-design/ant-design/issues/3413)
|
||||
- 修复 Table 边框线与页头页脚冲突的问题。[#3301](https://github.com/ant-design/ant-design/issues/3301)
|
||||
- 修复 TabPane 高度不随内容变化的问题。[#3377](https://github.com/ant-design/ant-design/issues/3377)
|
||||
- 修复 Transfer[titles] 不受 LocaleProvider 控制的问题。[#3264](https://github.com/ant-design/ant-design/pull/3264)
|
||||
- Upload
|
||||
- 修复用户自定义 `onRemove` 事件会覆盖默认行为的问题。[#3317](https://github.com/ant-design/ant-design/issues/3317)
|
||||
- 修复图片卡片样式问题。[#3316](https://github.com/ant-design/ant-design/issues/3316)
|
||||
- 修复项目构建时 moment locales 找不到的问题。[#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
|
||||
|
||||
## 2.0.1
|
||||
|
||||
`2016-10-01`
|
||||
|
||||
- 修复无法调用 react-slick 方法的问题。[#3164](https://github.com/ant-design/ant-design/issues/3164)
|
||||
- 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。[#3159](https://github.com/ant-design/ant-design/issues/3159)
|
||||
- 修复 Affix 不支持服务端渲染的问题。[#3216](https://github.com/ant-design/ant-design/issues/3216)
|
||||
- 修复 Mention 不支持 `onSelect` `placeholder` 的问题。[#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
|
||||
- 修复 Transfer 与 `getFieldDecorator` 一起使用时的报错问题。
|
||||
- 修复 LocaleProvider 对时间组件无效的问题。
|
||||
- 修复 Cascader 搜索模式搜索文字显示不了的问题。
|
||||
- 修复 Spin 动画与文案整体不垂直居中的问题。
|
||||
- 修复 RangePicker Modal Tag Progress 等组件样式问题。
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2016-09-28`
|
||||
|
||||
很高兴的通知各位，经过四个月时间的紧密开发，`antd@2.0.0` 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 [反馈给我们](https://github.com/ant-design/ant-design/issues)。
|
||||
|
||||
### 2.x 主要变化
|
||||
|
||||
* 开发语言改为 TypeScript，提供 **官方支持的 `.d.ts` 文件**，感谢 [#1846](https://github.com/ant-design/ant-design/issues/1846) 中所有参与到这次重构的人以及后期 @infeng 对其的完善。
|
||||
* **新增英文文档**， 以后将同时提供中英双语文档，感谢 [#1471](https://github.com/ant-design/ant-design/issues/1471) 里所有参与到翻译和审阅工作中的人。
|
||||
* 时间类组件 DatePicker、TimePicker、Calendar 等的底层 **使用 [moment](http://momentjs.com/) 替换 [gregorian-calendar](github.com/yiminghe/gregorian-calendar)**。
|
||||
* 全新设计的 [图标](http://ant.design/components/icon/)。
|
||||
* 新增提及组件 [Mention](http://ant.design/components/mention/)。
|
||||
* 新增自动完成组件 [AutoComplete](http://ant.design/components/auto-complete/)。
|
||||
* Form 新增 `getFieldDecorator` 作为 `getFieldProps` 的替代，对于不正确的使用方式 `getFieldDecorator` 会给出提示，可以降低踩坑的概率。相关讨论见 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
|
||||
* Table 支持 [表头分组](http://ant.design/components/table/#components-table-demo-grouping-columns)。@yesmeck
|
||||
* 完全移除 `antd@1.x` 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。
|
||||
|
||||
### 2.x 不兼容改动
|
||||
|
||||
> 建议从 `1.x` 升级时，直接升级到 `2.x` 的最新版本。
|
||||
|
||||
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
|
||||
|
||||
* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。
|
||||
```diff
|
||||
- <TimePicker defaultValue="12:08:23" />
|
||||
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
|
||||
|
||||
- <DatePicker defaultValue="2015/01/01" />
|
||||
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />
|
||||
|
||||
- <Calendar defaultValue={new Date('2010-10-10')} />
|
||||
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
|
||||
```
|
||||
* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。你也可以参考这个 [commit](https://github.com/ant-design/ant-design/commit/4026221d451b246956983bb42140142d4a48b7d7) 来进行修改。
|
||||
|
||||
由于 `JSON.stringy(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
|
||||
```js
|
||||
handleSubmit() {
|
||||
const values = this.props.form.getFieldsValue();
|
||||
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // 或其它格式
|
||||
const data = JSON.stringify(values);
|
||||
// 发送 data 到服务器
|
||||
}
|
||||
```
|
||||
|
||||
* 时间类组件与表单校验一起使用时，`type: 'date'` 改为 `type: 'object'`。
|
||||
* 时间类组件的 `format` 属性也发生了变化，从 [gregorian-calendar-format 的格式](https://github.com/yiminghe/gregorian-calendar-format#api) 变化为与 [moment 的格式](http://momentjs.com/docs/#/parsing/string-format/)，例如原来的 `yyyy-MM-dd` 将变为 `YYYY-MM-DD`。
|
||||
* Breadcrumb 移除 `linkRender` 和 `nameRender`，请使用 `itemRender`。
|
||||
* Menu 移除 `onClose` `onOpen`，请使用 `onOpenChange`。API 差异较大，请先研究 [demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current)。
|
||||
* Table 移除列分页功能，请使用 [固定列](http://ant.design/components/table/#components-table-demo-fixed-columns)。
|
||||
* Popover 移除 `overlay` ，请使用 `content`。
|
||||
|
||||
以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。
|
||||
|
||||
* Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`：
|
||||
|
||||
```diff
|
||||
- <Input placeholder="text" {...getFieldProps('userName', { ... })} />
|
||||
+ {getFieldDecorator('userName', { ... })(
|
||||
+ <Input placeholder="text" />
|
||||
+ )}
|
||||
```
|
||||
|
||||
相关讨论可以看 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
|
||||
|
||||
* DatePicker 废弃 `toggleOpen`，请使用 `onOpenChange`：
|
||||
|
||||
```diff
|
||||
- handleToggleOpen({ open }) {
|
||||
+ handleOpenChange(open) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 2.x Bug 修复
|
||||
|
||||
* 修复 Dropdown.Button `disabled` 属性无效的问题。[#3070](https://github.com/ant-design/ant-design/issues/3070)
|
||||
* 修复 Form.create `withRef` 选项失效的问题。[#2843](https://github.com/ant-design/ant-design/issues/2843)
|
||||
* 修复 Menu inline 模式下子菜单展开的问题。[#2701](https://github.com/ant-design/ant-design/issues/2701)
|
||||
* 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。[#2684](https://github.com/ant-design/ant-design/issues/2684)
|
||||
* 修复 DatePicker[showTime] 参数中的 `format` 失效的问题。[#3123](https://github.com/ant-design/ant-design/issues/3123)
|
||||
* 修复 Table[dataSource] 中的项的 key 为 `0` 时识别错误的问题。[#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
|
||||
* 修复 Tree.Node 无子节点时仍然显示箭头的问题。[#2616](https://github.com/ant-design/ant-design/issues/2616)
|
||||
* 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。[#2748](https://github.com/ant-design/ant-design/issues/2748)
|
||||
|
||||
### 2.x 其他改进
|
||||
|
||||
* Alert 新增 [`banner` 模式](http://ant.design/components/alert/#components-alert-demo-banner)。
|
||||
* BackTop 增加回到顶部的动画效果。
|
||||
* Badge 新增 [状态点模式](http://ant.design/components/badge/#components-badge-demo-status)。
|
||||
* Cascader 新增 [搜索功能](http://ant.design/components/cascader/#components-cascader-demo-search)。
|
||||
* Checkbox 新增 [indeterminate 状态](http://ant.design/components/checkbox/#components-checkbox-demo-check-all)。
|
||||
* Form 新增 [垂直布局](http://ant.design/components/form/#components-form-demo-validate-customized)。
|
||||
* InputNumber 现在支持长按。[#](http://ant.design/components/input-number/#components-input-number-demo-basic)
|
||||
* notification 支持 [自定义 icon](http://ant.design/components/notification/#components-notification-demo-custom-icon)。
|
||||
* Spin 现在允许 [自定义文案与动画共存](http://ant.design/components/spin/#components-spin-demo-tip)。@jerrybendy
|
||||
* Transfer 现在可以监听用户选择了哪些选项。[#](http://ant.design/components/transfer/#components-transfer-demo-basic)
|
||||
* Transfer 现在可以定义哪些选项是 [不可选择的](http://ant.design/components/transfer/#components-transfer-demo-basic)。
|
||||
* 优化 Alert 和 notification 的样式。
|
||||
* 优化 Modal.confirm 之类的弹窗的键盘交互。@Dafrok
|
||||
* 优化 [DatePicker 的时间选择](http://ant.design/components/date-picker/#components-date-picker-demo-time) 交互。
|
||||
* 优化 [Spin 状态切换](http://ant.design/components/spin/#components-spin-demo-nested ) 时的效果。
|
||||
* 更新 [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc)。
|
||||
|
||||
### 2.x 相关工具发布
|
||||
|
||||
* 新增配套网站 [AntD Library](http://library.ant.design/)，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。
|
||||
* `babel-plugin-antd` 更名为 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，标志着该插件将作为一个通用的按需加载方案存在，而不再是 `antd` 专有。
|
||||
|
||||
请更新 `package.json`：
|
||||
|
||||
```diff
|
||||
{
|
||||
"devDependencies": {
|
||||
- "babel-plugin-antd": "^0.x.x",
|
||||
+ "babel-plugin-import": "^1.0.0",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
同时更新 `.babelrc` 或你在其它地方对其的配置：
|
||||
|
||||
```diff
|
||||
{
|
||||
- "plugins": [["antd", { style: "css" }]]
|
||||
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
* [dva@1.0.0](https://github.com/dvajs/dva) 也已经发布，并推荐 [在实战项目中使用](http://ant.design/docs/react/practical-projects)。
|
||||
* 脚手架工具推荐使用 [dva-cli](https://github.com/dvajs/dva-cli)，原来的 `antd-init` 以后仅会用于学习以及 demo。
|
||||
|
||||
## 1.11.4
|
||||
|
||||
去 [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0) 查看 `0.x` 到 `1.x` 的 Change Log。
|
||||
@@ -4,25 +4,16 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# Ant Design
|
||||
|
||||
[](https://travis-ci.org/ant-design/ant-design)
|
||||
[](https://coveralls.io/github/ant-design/ant-design?branch=master)
|
||||
[](https://david-dm.org/ant-design/ant-design)
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
[](https://npmjs.org/package/antd)
|
||||
[](http://isitmaintained.com/project/ant-design/ant-design "Average time to resolve an issue")
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
# Ant Design [](https://travis-ci.org/ant-design/ant-design) [](https://www.npmjs.org/package/antd) [](https://npmjs.org/package/antd) [](https://david-dm.org/ant-design/ant-design) [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
一套企业级的 UI 设计语言和 React 实现。
|
||||
|
||||
## 特性
|
||||
|
||||
- 提炼和服务企业级中后台产品的交互语言和视觉风格。
|
||||
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
|
||||
- 使用 TypeScript 构建，提供完整的类型定义文件。
|
||||
- 基于 npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) 的企业级业务开发框架。
|
||||
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
|
||||
- 基于 npm + webpack + babel 的工作流，支持 ES2015。
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
@@ -43,50 +34,34 @@ ReactDOM.render(<DatePicker />, mountNode);
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
```
|
||||
|
||||
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
|
||||
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。
|
||||
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
现代浏览器和 IE9 及以上。
|
||||
现代浏览器和 IE8 及以上。
|
||||
|
||||
> [IE8 issues](https://github.com/xcatliu/react-ie8)
|
||||
|
||||
## TypeScript
|
||||
|
||||
tsconfig.json
|
||||
|
||||
```js
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"jsx": "preserve",
|
||||
"allowSyntheticDefaultImports": true
|
||||
}
|
||||
}
|
||||
///<reference path='./node_modules/antd/type-definitions/antd.d.ts'/>
|
||||
...
|
||||
```
|
||||
|
||||
> 注意：设置 `allowSyntheticDefaultImports` 避免 `error TS1192: Module 'react' has no default export` 的错误。
|
||||
|
||||
|
||||
## 链接
|
||||
|
||||
- [首页](http://ant.design/)
|
||||
- [组件文档](http://ant.design/docs/react/introduce)
|
||||
- [更新日志](CHANGELOG.en-US.md)
|
||||
- [开发脚手架](https://github.com/dvajs/dva-cli)
|
||||
- [React 实现](http://ant.design/#/docs/react/introduce)
|
||||
- [修改记录](CHANGELOG.md)
|
||||
- [开发脚手架](https://github.com/ant-design/antd-init/)
|
||||
- [开发工具文档](http://ant-tool.github.io/)
|
||||
- [React 基础组件](http://react-component.github.io/)
|
||||
- [移动端组件](http://mobile.ant.design)
|
||||
- [动效](https://motion.ant.design)
|
||||
- [设计规范速查手册](https://os.alipayobjects.com/rmsportal/HTXUgPGkyyxEivE.png)
|
||||
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [社区贡献脚手架和范例](https://github.com/ant-design/ant-design/issues/129)
|
||||
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
|
||||
- [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
|
||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||
- [定制主题](http://ant.design/docs/react/customize-theme)
|
||||
- [React 组件](http://react-component.github.io/)
|
||||
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
|
||||
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
|
||||
- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
|
||||
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
|
||||
## 如何贡献
|
||||
|
||||
|
||||
69
README.md
69
README.md
@@ -4,29 +4,19 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# Ant Design
|
||||
|
||||
[](https://travis-ci.org/ant-design/ant-design)
|
||||
[](https://coveralls.io/github/ant-design/ant-design?branch=master)
|
||||
[](https://david-dm.org/ant-design/ant-design)
|
||||
|
||||
[](https://www.npmjs.org/package/antd)
|
||||
[](https://npmjs.org/package/antd)
|
||||
[](http://isitmaintained.com/project/ant-design/ant-design "Average time to resolve an issue")
|
||||
[](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
# Ant Design [](https://travis-ci.org/ant-design/ant-design) [](https://www.npmjs.org/package/antd) [](https://npmjs.org/package/antd) [](https://david-dm.org/ant-design/ant-design) [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
An enterprise-class UI design language and React-based implementation.
|
||||
|
||||
## :loudspeaker: Document Translation Recruitment
|
||||
|
||||
We are now working on translate components document to English, and we need some translator and reviewer. https://github.com/ant-design/ant-design/issues/1471
|
||||
|
||||
## Features
|
||||
|
||||
- An enterprise-class design language and high quality UI.
|
||||
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
|
||||
- Written in TypeScript with complete define types.
|
||||
- A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework.
|
||||
|
||||
## Let's build a better antd together [](http://makeapullrequest.com)
|
||||
|
||||
`antd` is an open source project, any reasonable improvement is welcomed. If you are interested in contributing to `antd`, you can watch this repository and join in [discussion](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion), or try to implement some [features which had been accepted](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22).
|
||||
- An enterprise-class design language and high quality UI style.
|
||||
- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
|
||||
- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).
|
||||
|
||||
## Install
|
||||
|
||||
@@ -51,69 +41,62 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
|
||||
### Use modularized antd
|
||||
|
||||
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
||||
- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended)
|
||||
|
||||
```js
|
||||
// .babelrc
|
||||
{
|
||||
"plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
"plugins": [["antd", { style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from antd directly.
|
||||
|
||||
```jsx
|
||||
// import js and css modularly, parsed by babel-plugin-import
|
||||
import { DatePicker } from 'antd';
|
||||
// import js and css modularly, parsed by babel-plugin-antd
|
||||
import { DatePicker } from 'antd';
|
||||
```
|
||||
|
||||
|
||||
- Manually import
|
||||
|
||||
```jsx
|
||||
import DatePicker from 'antd/lib/date-picker'; // just for js
|
||||
import 'antd/lib/date-picker/style/css'; // with style
|
||||
```
|
||||
|
||||
## Environment Support
|
||||
|
||||
* Browser: Modern browsers and Internet Explorer 9+.
|
||||
## Browser Support
|
||||
|
||||
Normal browsers and Internet Explorer 8+.
|
||||
|
||||
> [IE8 issues](https://github.com/xcatliu/react-ie8)
|
||||
* Server-side Rendering
|
||||
* [Electron](http://electron.atom.io/)
|
||||
|
||||
## TypeScript
|
||||
|
||||
tsconfig.json
|
||||
|
||||
```js
|
||||
```
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"jsx": "preserve",
|
||||
"allowSyntheticDefaultImports": true
|
||||
"jsx": "preserve"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> Note: set `allowSyntheticDefaultImports` to prevent `error TS1192: Module 'react' has no default export`.
|
||||
|
||||
## Links
|
||||
|
||||
- [Home page](http://ant.design/)
|
||||
- [UI library](http://ant.design/docs/react/introduce)
|
||||
- [Change Log](CHANGELOG.en-US.md)
|
||||
- [Scaffold tool](https://github.com/dvajs/dva-cli/)
|
||||
- [React UI page](http://ant.design/#/docs/react/introduce)
|
||||
- [ChangeLog](CHANGELOG.md)
|
||||
- [Scaffold tool](https://github.com/ant-design/antd-init/)
|
||||
- [Development tool](http://ant-tool.github.io/)
|
||||
- [React components](http://react-component.github.io/)
|
||||
- [Mobile UI](http://mobile.ant.design)
|
||||
- [Motion](https://motion.ant.design)
|
||||
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
|
||||
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
|
||||
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [Boilerplates](https://github.com/ant-design/ant-design/issues/129)
|
||||
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
|
||||
- [CodePen boilerplate](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
|
||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||
- [Customize Theme](http://ant.design/docs/react/customize-theme)
|
||||
- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import assign from 'object-assign';
|
||||
|
||||
export default function getLocale(props, context, componentName, getDefaultLocale) {
|
||||
const locale = context && context.antLocale && context.antLocale[componentName] ?
|
||||
context.antLocale[componentName] : getDefaultLocale();
|
||||
|
||||
const result = assign({}, locale, props.locale);
|
||||
result.lang = assign({}, locale.lang, props.locale.lang);
|
||||
return result;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
export default function getRequestAnimationFrame() {
|
||||
if (typeof window === 'undefined') {
|
||||
return () => {};
|
||||
}
|
||||
if (window.requestAnimationFrame) {
|
||||
return window.requestAnimationFrame;
|
||||
}
|
||||
const prefix = ['moz', 'ms', 'webkit'].filter(key => `${key}RequestAnimationFrame` in window)[0];
|
||||
return prefix
|
||||
? window[`${prefix}RequestAnimationFrame`]
|
||||
: callback => setTimeout(callback, 1000 / 60);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
export default function getScroll(target, top): number {
|
||||
if (typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
||||
const isWindow = target === window;
|
||||
|
||||
let ret = isWindow ? target[prop] : target[method];
|
||||
// ie6,7,8 standard mode
|
||||
if (isWindow && typeof ret !== 'number') {
|
||||
ret = window.document.documentElement[method];
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
export default function splitObject(obj, parts): Array<any> {
|
||||
const left = {};
|
||||
const right = {};
|
||||
Object.keys(obj).forEach((k) => {
|
||||
if (parts.indexOf(k) !== -1) {
|
||||
left[k] = obj[k];
|
||||
} else {
|
||||
right[k] = obj[k];
|
||||
}
|
||||
});
|
||||
return [left, right];
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import warning from 'warning';
|
||||
|
||||
const warned: { [msg: string]: boolean} = {};
|
||||
export default (valid: boolean, message: string): void => {
|
||||
if (!valid && !warned[message]) {
|
||||
warning(false, message);
|
||||
warned[message] = true;
|
||||
}
|
||||
};
|
||||
@@ -1,31 +1,16 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Affix>
|
||||
<Button type="primary">Affix top</Button>
|
||||
</Affix>
|
||||
<br />
|
||||
<Affix offsetBottom={0}>
|
||||
<Button type="primary">Affix bottom</Button>
|
||||
</Affix>
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
<Affix>
|
||||
<Button type="primary">固定在顶部</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
16
components/affix/demo/bottom.md
Normal file
16
components/affix/demo/bottom.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
order: 2
|
||||
title: 下方固定
|
||||
---
|
||||
|
||||
固定在屏幕下方
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix offsetBottom={20}>
|
||||
<Button type="primary">固定在距离底部 20px 的位置</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
16
components/affix/demo/offset.md
Normal file
16
components/affix/demo/offset.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
order: 1
|
||||
title: 偏移
|
||||
---
|
||||
|
||||
达到一定的偏移量才触发。
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix offsetTop={75}>
|
||||
<Button type="primary">固定在距离顶部 75px 的位置</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,25 +1,21 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 固定状态改变的回调
|
||||
en-US: Callback
|
||||
order: 3
|
||||
title: 固定状态改变的回调
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以获得是否固定的状态。
|
||||
|
||||
## en-US
|
||||
|
||||
Callback with affixed state.
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
|
||||
const onChange = function (affixed) {
|
||||
console.log(affixed); // true or false
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
|
||||
<Button>120px to affix top</Button>
|
||||
</Affix>,
|
||||
mountNode
|
||||
);
|
||||
<Affix offsetTop={120} onChange={onChange}>
|
||||
<Button>固定在距离顶部 120px 的位置</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 滚动容器
|
||||
en-US: Container to scroll.
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
|
||||
|
||||
## en-US
|
||||
|
||||
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
class Demo extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<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>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
#components-affix-demo-target .scrollable-container {
|
||||
height: 100px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
#components-affix-demo-target .background {
|
||||
padding-top: 60px;
|
||||
height: 300px;
|
||||
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Affix
|
||||
---
|
||||
|
||||
Make an element sticky to viewport.
|
||||
|
||||
## When To Use
|
||||
|
||||
When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
|
||||
|
||||
Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
||||
| onChange | Callback when affix state is changed | Function(affixed) | - |
|
||||
|
||||
**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>
|
||||
```
|
||||
134
components/affix/index.jsx
Normal file
134
components/affix/index.jsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Dom } from 'rc-util';
|
||||
import classNames from 'classnames';
|
||||
import warning from 'warning';
|
||||
|
||||
function getScroll(w, top) {
|
||||
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
|
||||
const method = `scroll${top ? 'Top' : 'Left'}`;
|
||||
if (typeof ret !== 'number') {
|
||||
const d = w.document;
|
||||
// ie6,7,8 standard mode
|
||||
ret = d.documentElement[method];
|
||||
if (typeof ret !== 'number') {
|
||||
// quirks mode
|
||||
ret = d.body[method];
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getOffset(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const body = document.body;
|
||||
const clientTop = element.clientTop || body.clientTop || 0;
|
||||
const clientLeft = element.clientLeft || body.clientLeft || 0;
|
||||
const scrollTop = getScroll(window, true);
|
||||
const scrollLeft = getScroll(window);
|
||||
|
||||
return {
|
||||
top: rect.top + scrollTop - clientTop,
|
||||
left: rect.left + scrollLeft - clientLeft,
|
||||
};
|
||||
}
|
||||
|
||||
export default class Affix extends React.Component {
|
||||
static propTypes = {
|
||||
offsetTop: React.PropTypes.number,
|
||||
offsetBottom: React.PropTypes.number,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
onChange() {},
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
affixStyle: null,
|
||||
};
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
let { offsetTop, offsetBottom, offset } = this.props;
|
||||
|
||||
// Backwards support
|
||||
offsetTop = offsetTop || offset;
|
||||
const scrollTop = getScroll(window, true);
|
||||
const elemOffset = getOffset(ReactDOM.findDOMNode(this));
|
||||
const elemSize = {
|
||||
width: ReactDOM.findDOMNode(this.refs.fixedNode).offsetWidth,
|
||||
height: ReactDOM.findDOMNode(this.refs.fixedNode).offsetHeight,
|
||||
};
|
||||
|
||||
const offsetMode = {};
|
||||
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
|
||||
offsetMode.top = true;
|
||||
offsetTop = 0;
|
||||
} else {
|
||||
offsetMode.top = typeof offsetTop === 'number';
|
||||
offsetMode.bottom = typeof offsetBottom === 'number';
|
||||
}
|
||||
|
||||
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
|
||||
// Fixed Top
|
||||
if (!this.state.affixStyle) {
|
||||
this.setState({
|
||||
affixStyle: {
|
||||
position: 'fixed',
|
||||
top: offsetTop,
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
|
||||
offsetMode.bottom) {
|
||||
// Fixed Bottom
|
||||
if (!this.state.affixStyle) {
|
||||
this.setState({
|
||||
affixStyle: {
|
||||
position: 'fixed',
|
||||
bottom: offsetBottom,
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
} else if (this.state.affixStyle) {
|
||||
this.setState({
|
||||
affixStyle: null,
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.');
|
||||
this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
|
||||
this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames({
|
||||
'ant-affix': this.state.affixStyle,
|
||||
});
|
||||
|
||||
return (
|
||||
<div {...this.props}>
|
||||
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 固钉
|
||||
type: Navigation
|
||||
title: Affix
|
||||
chinese: 固钉
|
||||
type: Other
|
||||
english: Affix
|
||||
---
|
||||
|
||||
将页面元素钉在可视范围。
|
||||
@@ -15,17 +15,9 @@ title: Affix
|
||||
|
||||
## API
|
||||
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
|
||||
|
||||
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
|
||||
|
||||
```jsx
|
||||
<Affix style={{ position: 'absolute', top: y, left: x}}>
|
||||
...
|
||||
</Affix>
|
||||
```
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function | 无 |
|
||||
@@ -1,229 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import classNames from 'classnames';
|
||||
import shallowequal from 'shallowequal';
|
||||
import omit from 'omit.js';
|
||||
import getScroll from '../_util/getScroll';
|
||||
|
||||
function getTargetRect(target): ClientRect {
|
||||
return target !== window ?
|
||||
target.getBoundingClientRect() :
|
||||
{ top: 0, left: 0, bottom: 0 };
|
||||
}
|
||||
|
||||
function getOffset(element: HTMLElement, target) {
|
||||
const elemRect = element.getBoundingClientRect();
|
||||
const targetRect = getTargetRect(target);
|
||||
|
||||
const scrollTop = getScroll(target, true);
|
||||
const scrollLeft = getScroll(target, false);
|
||||
|
||||
const docElem = window.document.body;
|
||||
const clientTop = docElem.clientTop || 0;
|
||||
const clientLeft = docElem.clientLeft || 0;
|
||||
|
||||
return {
|
||||
top: elemRect.top - targetRect.top +
|
||||
scrollTop - clientTop,
|
||||
left: elemRect.left - targetRect.left +
|
||||
scrollLeft - clientLeft,
|
||||
};
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function getDefaultTarget() {
|
||||
return typeof window !== 'undefined' ?
|
||||
window : null;
|
||||
};
|
||||
|
||||
// Affix
|
||||
export interface AffixProps {
|
||||
/**
|
||||
* 距离窗口顶部达到指定偏移量后触发
|
||||
*/
|
||||
offsetTop?: number;
|
||||
offset?: number;
|
||||
/** 距离窗口底部达到指定偏移量后触发 */
|
||||
offsetBottom?: number;
|
||||
style?: React.CSSProperties;
|
||||
/** 固定状态改变时触发的回调函数 */
|
||||
onChange?: (affixed?: boolean) => void;
|
||||
/** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
|
||||
target?: () => Window | HTMLElement;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export default class Affix extends React.Component<AffixProps, any> {
|
||||
static propTypes = {
|
||||
offsetTop: React.PropTypes.number,
|
||||
offsetBottom: React.PropTypes.number,
|
||||
target: React.PropTypes.func,
|
||||
};
|
||||
|
||||
scrollEvent: any;
|
||||
resizeEvent: any;
|
||||
timeout: any;
|
||||
refs: {
|
||||
fixedNode: HTMLElement;
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
affixStyle: null,
|
||||
placeholderStyle: null,
|
||||
};
|
||||
}
|
||||
|
||||
setAffixStyle(e, affixStyle) {
|
||||
const { onChange = noop, target = getDefaultTarget } = this.props;
|
||||
const originalAffixStyle = this.state.affixStyle;
|
||||
const isWindow = target() === window;
|
||||
if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
|
||||
return;
|
||||
}
|
||||
if (shallowequal(affixStyle, originalAffixStyle)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ affixStyle }, () => {
|
||||
const affixed = !!this.state.affixStyle;
|
||||
if ((affixStyle && !originalAffixStyle) ||
|
||||
(!affixStyle && originalAffixStyle)) {
|
||||
onChange(affixed);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setPlaceholderStyle(e, placeholderStyle) {
|
||||
const originalPlaceholderStyle = this.state.placeholderStyle;
|
||||
if (e.type === 'resize') {
|
||||
return;
|
||||
}
|
||||
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ placeholderStyle });
|
||||
}
|
||||
|
||||
updatePosition = (e) => {
|
||||
let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
|
||||
const targetNode = target();
|
||||
|
||||
// Backwards support
|
||||
offsetTop = offsetTop || offset;
|
||||
const scrollTop = getScroll(targetNode, true);
|
||||
const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
const elemOffset = getOffset(affixNode, targetNode);
|
||||
const elemSize = {
|
||||
width: this.refs.fixedNode.offsetWidth,
|
||||
height: this.refs.fixedNode.offsetHeight,
|
||||
};
|
||||
|
||||
const offsetMode = {
|
||||
top: false,
|
||||
bottom: false,
|
||||
};
|
||||
// Default to `offsetTop=0`.
|
||||
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
|
||||
offsetMode.top = true;
|
||||
offsetTop = 0;
|
||||
} else {
|
||||
offsetMode.top = typeof offsetTop === 'number';
|
||||
offsetMode.bottom = typeof offsetBottom === 'number';
|
||||
}
|
||||
|
||||
const targetRect = getTargetRect(targetNode);
|
||||
const targetInnerHeight =
|
||||
(targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
|
||||
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
|
||||
// Fixed Top
|
||||
this.setAffixStyle(e, {
|
||||
position: 'fixed',
|
||||
top: targetRect.top + offsetTop,
|
||||
left: targetRect.left + elemOffset.left,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle(e, {
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
} else if (
|
||||
scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
|
||||
offsetMode.bottom
|
||||
) {
|
||||
// Fixed Bottom
|
||||
const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
|
||||
this.setAffixStyle(e, {
|
||||
position: 'fixed',
|
||||
bottom: targetBottomOffet + offsetBottom,
|
||||
left: targetRect.left + elemOffset.left,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle(e, {
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
} else {
|
||||
this.setAffixStyle(e, null);
|
||||
this.setPlaceholderStyle(e, null);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const target = this.props.target || getDefaultTarget;
|
||||
// Wait for parent component ref has its value
|
||||
this.timeout = setTimeout(() => {
|
||||
this.setTargetEventListeners(target);
|
||||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.target !== nextProps.target) {
|
||||
this.clearScrollEventListeners();
|
||||
this.setTargetEventListeners(nextProps.target);
|
||||
|
||||
// Mock Event object.
|
||||
this.updatePosition({});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.clearScrollEventListeners();
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
|
||||
setTargetEventListeners(getTarget) {
|
||||
const target = getTarget();
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
|
||||
this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
|
||||
}
|
||||
|
||||
clearScrollEventListeners() {
|
||||
['scrollEvent', 'resizeEvent'].forEach((name) => {
|
||||
if (this[name]) {
|
||||
this[name].remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames({
|
||||
[this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
|
||||
});
|
||||
|
||||
const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
|
||||
|
||||
return (
|
||||
<div {...props} style={this.state.placeholderStyle}>
|
||||
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
.@{ant-prefix}-affix {
|
||||
.ant-affix {
|
||||
position: fixed;
|
||||
z-index: @zindex-affix;
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 顶部公告
|
||||
en-US: Banner
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。
|
||||
|
||||
## en-US
|
||||
|
||||
When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.
|
||||
|
||||
````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 />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,22 +1,13 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法，适用于简短的警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage for short messages.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Alert message="Success Text" type="success" />
|
||||
ReactDOM.render(<Alert message="成功提示的文案" type="success" />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,36 +1,26 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 可关闭的警告提示
|
||||
en-US: Closable
|
||||
title: 可关闭的警告提示
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
显示关闭按钮，点击可关闭警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
To show close button.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const onClose = function (e) {
|
||||
console.log(e, 'I was closed.');
|
||||
console.log(e, '我要被关闭啦！');
|
||||
};
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
<Alert message="警告提示的文案"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
onClose={onClose} />
|
||||
<Alert message="错误提示的文案"
|
||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
onClose={onClose} />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,22 +1,14 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 自定义关闭
|
||||
en-US: Customized Close Text
|
||||
title: 自定义关闭
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
|
||||
|
||||
## en-US
|
||||
|
||||
Replace the default icon with customized text.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Alert message="Info Text" type="info" closeText="Close Now" />
|
||||
<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,41 +1,27 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 含有辅助性文字介绍
|
||||
en-US: Description
|
||||
title: 含有辅助性文字介绍
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
含有辅助性文字介绍的警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
Additional description for alert message.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="成功提示的文案"
|
||||
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
||||
type="success" />
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info" />
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
message="警告提示的文案"
|
||||
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
||||
type="warning" />
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
message="错误提示的文案"
|
||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||
type="error" />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,49 +1,35 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 图标
|
||||
en-US: Icon
|
||||
title: 图标
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可口的图标让信息类型更加醒目。
|
||||
|
||||
## en-US
|
||||
|
||||
Decent icon make information more clear and more friendly.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="success tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
<Alert message="成功提示的文案" type="success" showIcon />
|
||||
<Alert message="消息提示的文案" type="info" showIcon />
|
||||
<Alert message="警告提示的文案" type="warning" showIcon />
|
||||
<Alert message="错误提示的文案" type="error" showIcon />
|
||||
<Alert message="成功提示的文案"
|
||||
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
showIcon />
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
showIcon />
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
message="警告提示的文案"
|
||||
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
showIcon />
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
message="错误提示的文案"
|
||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
showIcon />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,25 +1,17 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 四种样式
|
||||
en-US: More types
|
||||
title: 四种样式
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
共有四种样式 `success`、`info`、`warning`、`error`。
|
||||
|
||||
## en-US
|
||||
|
||||
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
<Alert message="成功提示的文案" type="success" />
|
||||
<Alert message="消息提示的文案" type="info" />
|
||||
<Alert message="警告提示的文案" type="warning" />
|
||||
<Alert message="错误提示的文案" type="error" />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Alert
|
||||
---
|
||||
|
||||
Alert component for feedback.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to show alert messages for users.
|
||||
- When you need a persistent static container which is closable by user actions.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | String | `info` |
|
||||
| closable | Whether Alert can be closed | Boolean | - |
|
||||
| closeText | Close text to show | React.Node | - |
|
||||
| message | Content of Alert | React.Node | - |
|
||||
| description | Additional content of Alert | React.Node | - |
|
||||
| onClose | Callback when close Alert | Function | - |
|
||||
| showIcon | Whether to show icon | Boolean | false |
|
||||
| banner | Whether to show as banner | Boolean | false |
|
||||
72
components/alert/index.tsx → components/alert/index.jsx
Executable file → Normal file
72
components/alert/index.tsx → components/alert/index.jsx
Executable file → Normal file
@@ -4,35 +4,13 @@ import Animate from 'rc-animate';
|
||||
import Icon from '../icon';
|
||||
import classNames from 'classnames';
|
||||
|
||||
function noop() {}
|
||||
|
||||
export interface AlertProps {
|
||||
/**
|
||||
* Type of Alert styles, options:`success`, `info`, `warning`, `error`
|
||||
*/
|
||||
type?: 'success' | 'info' | 'warning' | 'error';
|
||||
/** Whether Alert can be closed */
|
||||
closable?: boolean;
|
||||
/** Close text to show */
|
||||
closeText?: React.ReactNode;
|
||||
/** Content of Alert */
|
||||
message: React.ReactNode;
|
||||
/** Additional content of Alert */
|
||||
description?: React.ReactNode;
|
||||
/** Callback when close Alert */
|
||||
onClose?: React.MouseEventHandler<any>;
|
||||
/** Whether to show icon */
|
||||
showIcon?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
banner?: boolean;
|
||||
}
|
||||
|
||||
export default class Alert extends React.Component<AlertProps, any> {
|
||||
export default class Alert extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-alert',
|
||||
showIcon: false,
|
||||
onClose() {},
|
||||
type: 'info',
|
||||
};
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@@ -42,7 +20,7 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
}
|
||||
handleClose = (e) => {
|
||||
e.preventDefault();
|
||||
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
let dom = ReactDOM.findDOMNode(this);
|
||||
dom.style.height = `${dom.offsetHeight}px`;
|
||||
// Magic code
|
||||
// 重复一次后才能正确设置 height
|
||||
@@ -51,7 +29,7 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
this.setState({
|
||||
closing: false,
|
||||
});
|
||||
(this.props.onClose || noop)(e);
|
||||
this.props.onClose.call(this, e);
|
||||
}
|
||||
animationEnd = () => {
|
||||
this.setState({
|
||||
@@ -61,15 +39,9 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
}
|
||||
render() {
|
||||
let {
|
||||
closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner,
|
||||
className = '', style,
|
||||
closable, description, type, prefixCls, message, closeText, showIcon,
|
||||
} = this.props;
|
||||
|
||||
// banner模式默认有 Icon
|
||||
showIcon = showIcon || banner;
|
||||
// banner模式默认为警告
|
||||
type = banner ? 'warning' : type;
|
||||
|
||||
let iconType = '';
|
||||
switch (type) {
|
||||
case 'success':
|
||||
@@ -93,37 +65,31 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
iconType += '-o';
|
||||
}
|
||||
|
||||
let alertCls = classNames(prefixCls, {
|
||||
let alertCls = classNames({
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${type}`]: true,
|
||||
[`${prefixCls}-close`]: !this.state.closing,
|
||||
[`${prefixCls}-with-description`]: !!description,
|
||||
[`${prefixCls}-no-icon`]: !showIcon,
|
||||
[`${prefixCls}-banner`]: !!banner,
|
||||
}, className);
|
||||
});
|
||||
|
||||
// closeable when closeText is assigned
|
||||
if (closeText) {
|
||||
closable = true;
|
||||
}
|
||||
|
||||
const closeIcon = closable ? (
|
||||
<a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
|
||||
{closeText || <Icon type="cross" />}
|
||||
</a>
|
||||
) : null;
|
||||
|
||||
return this.state.closed ? null : (
|
||||
<Animate
|
||||
component=""
|
||||
<Animate component=""
|
||||
showProp="data-show"
|
||||
transitionName={`${prefixCls}-slide-up`}
|
||||
onEnd={this.animationEnd}
|
||||
>
|
||||
<div data-show={this.state.closing} className={alertCls} style={style}>
|
||||
{showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
|
||||
transitionName="slide-up"
|
||||
onEnd={this.animationEnd}>
|
||||
<div data-show={this.state.closing} className={alertCls}>
|
||||
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
|
||||
<span className={`${prefixCls}-message`}>{message}</span>
|
||||
<span className={`${prefixCls}-description`}>{description}</span>
|
||||
{closeIcon}
|
||||
{closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
|
||||
{closeText || <Icon type="cross" />}
|
||||
</a> : null}
|
||||
</div>
|
||||
</Animate>
|
||||
);
|
||||
25
components/alert/index.md
Normal file
25
components/alert/index.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 警告提示
|
||||
type: Presentation
|
||||
english: Alert
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | 必选参数，指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` |
|
||||
| closable | 可选参数，默认不显示关闭按钮 | Boolean | 无 |
|
||||
| closeText | 可选参数，自定义关闭按钮 | React.Node | 无 |
|
||||
| message | 必选参数，警告提示内容 | React.Node | 无 |
|
||||
| description | 可选参数，警告提示的辅助性文字介绍 | React.Node | 无 |
|
||||
| onClose | 可选参数，关闭时触发的回调函数 | Function | 无 |
|
||||
| showIcon | 可选参数，是否显示辅助图标 | Boolean | false |
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 警告提示
|
||||
type: Feedback
|
||||
title: Alert
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` |
|
||||
| closable | 默认不显示关闭按钮 | Boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | React.Node | 无 |
|
||||
| message | 警告提示内容 | React.Node | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | React.Node | 无 |
|
||||
| onClose | 关闭时触发的回调函数 | Function | 无 |
|
||||
| showIcon | 是否显示辅助图标 | Boolean | false |
|
||||
| banner | 是否用作顶部公告 | Boolean | false |
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@alert-prefix-cls: ~"@{ant-prefix}-alert";
|
||||
@alert-prefix-cls: ant-alert;
|
||||
|
||||
.@{alert-prefix-cls} {
|
||||
position: relative;
|
||||
padding: 8px 48px 8px 38px;
|
||||
padding: 8px 8px 8px 16px;
|
||||
border-radius: @border-radius-base;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&&-no-icon {
|
||||
padding: 8px 48px 8px 16px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: @font-size-lg;
|
||||
top: 9.5px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
line-height: 21px;
|
||||
display: none;
|
||||
}
|
||||
@@ -61,20 +58,21 @@
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.@{iconfont-css-prefix}-cross {
|
||||
color: @text-color-secondary;
|
||||
.anticon-cross {
|
||||
color: @legend-color;
|
||||
transition: color .3s ease;
|
||||
&:hover {
|
||||
color: #404040;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -85,7 +83,7 @@
|
||||
}
|
||||
|
||||
&-with-description {
|
||||
padding: 16px 16px 16px 60px;
|
||||
padding: 16px 16px 16px 69px;
|
||||
position: relative;
|
||||
border-radius: @border-radius-base;
|
||||
margin-bottom: 10px;
|
||||
@@ -99,73 +97,38 @@
|
||||
|
||||
&-with-description &-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 20px;
|
||||
font-size: 24px;
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
margin-top: -15px;
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
&-with-description &-close-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
top: 17px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-with-description &-message {
|
||||
font-size: @font-size-lg;
|
||||
color: @heading-color;
|
||||
font-size: 14px;
|
||||
color: @text-color;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&-with-description &-description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&&-close {
|
||||
height: 0 !important;
|
||||
&-close {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: all .3s @ease-in-out-circ;
|
||||
transition: all .3s @ease-in-out;
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
animation: antAlertSlideUpOut .3s @ease-in-out-circ;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-banner {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antAlertSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antAlertSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
animation-timing-function: @ease-in-out !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import AnchorHelper, { scrollTo } from './anchorHelper';
|
||||
|
||||
export interface AnchorLinkProps {
|
||||
href: string;
|
||||
onClick: (href: string, component: Element) => void;
|
||||
active?: boolean;
|
||||
prefixCls?: string;
|
||||
children?: any;
|
||||
title?: Element;
|
||||
bounds: number;
|
||||
target?: () => HTMLElement | Window;
|
||||
affix?: boolean;
|
||||
}
|
||||
|
||||
export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
static contextTypes = {
|
||||
anchorHelper: React.PropTypes.any,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
href: '#',
|
||||
prefixCls: 'ant-anchor',
|
||||
};
|
||||
|
||||
context: {
|
||||
anchorHelper: AnchorHelper;
|
||||
};
|
||||
|
||||
private _component: Element;
|
||||
|
||||
setActiveAnchor() {
|
||||
const { bounds, href, affix } = this.props;
|
||||
const { anchorHelper } = this.context;
|
||||
const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
|
||||
if (active && anchorHelper) {
|
||||
anchorHelper.setActiveAnchor(this._component);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setActiveAnchor();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.setActiveAnchor();
|
||||
}
|
||||
|
||||
renderAnchorLink = (child) => {
|
||||
const { href } = child.props;
|
||||
if (href) {
|
||||
this.context.anchorHelper.addLink(href);
|
||||
return React.cloneElement(child, {
|
||||
onClick: this.props.onClick,
|
||||
prefixCls: this.props.prefixCls,
|
||||
affix: this.props.affix,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
}
|
||||
|
||||
refsTo = (component) => {
|
||||
this._component = component;
|
||||
}
|
||||
|
||||
scrollTo = (e) => {
|
||||
e.preventDefault();
|
||||
const { onClick, href } = this.props;
|
||||
const { anchorHelper } = this.context;
|
||||
if (onClick) {
|
||||
onClick(href, this._component);
|
||||
} else {
|
||||
e.stopPreventDefault();
|
||||
const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
|
||||
scrollToFn(href);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls, href, children, title, bounds, affix } = this.props;
|
||||
const { anchorHelper } = this.context;
|
||||
const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
|
||||
const cls = classNames({
|
||||
[`${prefixCls}-link`]: true,
|
||||
[`${prefixCls}-link-active`]: active,
|
||||
});
|
||||
return (
|
||||
<div className={cls}>
|
||||
<a
|
||||
ref={this.refsTo}
|
||||
className={`${prefixCls}-link-title`}
|
||||
onClick={this.scrollTo}
|
||||
href={href}
|
||||
title={typeof title === 'string' ? title : ''}
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
{React.Children.map(children, this.renderAnchorLink)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import getScroll from '../_util/getScroll';
|
||||
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
||||
|
||||
export const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
export const easeInOutCubic = (t, b, c, d) => {
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return cc / 2 * t * t * t + b;
|
||||
}
|
||||
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
||||
};
|
||||
|
||||
export function getDefaultTarget() {
|
||||
return typeof window !== 'undefined' ?
|
||||
window : null;
|
||||
}
|
||||
|
||||
export function getOffsetTop(element): number {
|
||||
if (!element) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (!element.getClientRects().length) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
if ( rect.width || rect.height ) {
|
||||
const doc = element.ownerDocument;
|
||||
const docElem = doc.documentElement;
|
||||
return rect.top - docElem.clientTop;
|
||||
}
|
||||
|
||||
return rect.top;
|
||||
}
|
||||
|
||||
export type Section = {
|
||||
top: number;
|
||||
bottom: number;
|
||||
section: any;
|
||||
};
|
||||
|
||||
export function scrollTo(href, target = getDefaultTarget, callback = () => {}) {
|
||||
const scrollTop = getScroll(target(), true);
|
||||
const targetElement = document.getElementById(href.substring(1));
|
||||
if (!targetElement) {
|
||||
return;
|
||||
}
|
||||
const offsetTop = getOffsetTop(targetElement);
|
||||
const targetScrollTop = scrollTop + offsetTop;
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
const time = timestamp - startTime;
|
||||
window.scrollTo(window.pageXOffset, easeInOutCubic(time, scrollTop, targetScrollTop, 450));
|
||||
if (time < 450) {
|
||||
reqAnimFrame(frameFunc);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
reqAnimFrame(frameFunc);
|
||||
history.pushState(null, '', href);
|
||||
}
|
||||
|
||||
class AnchorHelper {
|
||||
private links: Array<string>;
|
||||
private currentAnchor: HTMLElement | null;
|
||||
private _activeAnchor: string;
|
||||
|
||||
constructor() {
|
||||
this.links = [];
|
||||
this.currentAnchor = null;
|
||||
this._activeAnchor = '';
|
||||
}
|
||||
|
||||
addLink(link) {
|
||||
if (this.links.indexOf(link) === -1) {
|
||||
this.links.push(link);
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentActiveAnchor(): HTMLElement | null {
|
||||
return this.currentAnchor;
|
||||
}
|
||||
|
||||
setActiveAnchor(component) {
|
||||
this.currentAnchor = component;
|
||||
}
|
||||
|
||||
getCurrentAnchor(bounds = 5) {
|
||||
let activeAnchor = '';
|
||||
if (typeof document === 'undefined') {
|
||||
return activeAnchor;
|
||||
}
|
||||
|
||||
const linksPositions = (this.links
|
||||
.map(section => {
|
||||
const target = document.getElementById(section.substring(1));
|
||||
if (target && getOffsetTop(target) < bounds) {
|
||||
const top = getOffsetTop(target);
|
||||
if (top <= bounds) {
|
||||
return {
|
||||
section,
|
||||
top,
|
||||
bottom: top + target.clientHeight,
|
||||
};
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter(section => section !== null) as Array<Section>);
|
||||
|
||||
if (linksPositions.length) {
|
||||
const maxSection = linksPositions.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
|
||||
return maxSection.section;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
scrollTo(href, target = getDefaultTarget, callback = () => {}) {
|
||||
scrollTo(href, target, callback);
|
||||
}
|
||||
}
|
||||
|
||||
export default AnchorHelper;
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
|
||||
```jsx
|
||||
import { Anchor } from 'antd';
|
||||
const { Link } = Anchor;
|
||||
|
||||
ReactDOM.render(
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-fixed" title="Fixed demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-affix {
|
||||
z-index: 11;
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 固定
|
||||
en-US: Fixed Anchor
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不浮动，状态不随页面滚动变化。
|
||||
|
||||
## en-US
|
||||
|
||||
Do not change state when page is scrolling.
|
||||
|
||||
```jsx
|
||||
import { Anchor } from 'antd';
|
||||
const { Link } = Anchor;
|
||||
|
||||
ReactDOM.render(
|
||||
<Anchor affix={false}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-fixed" title="Fixed demo" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
, mountNode);
|
||||
```
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
cols: 2
|
||||
title: Anchor
|
||||
---
|
||||
|
||||
Hyperlinks to scroll on one page.
|
||||
|
||||
## When To Use
|
||||
|
||||
For displaying anchor hyperlinks on page and jumping between them.
|
||||
|
||||
## API
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
||||
| bounds | Bounding distance of anchor area | Number | 5(px) |
|
||||
|
||||
### Link Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | target of hyperlink | String | |
|
||||
| title | content of hyperlink | React.Node | |
|
||||
@@ -1,141 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import AnchorLink from './AnchorLink';
|
||||
import Affix from '../affix';
|
||||
import AnchorHelper, { getDefaultTarget } from './anchorHelper';
|
||||
|
||||
export interface AnchorProps {
|
||||
target: () => HTMLElement | Window;
|
||||
children: React.ReactNode;
|
||||
prefixCls?: string;
|
||||
offsetTop?: number;
|
||||
bounds?: number;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
affix?: boolean;
|
||||
}
|
||||
|
||||
export default class Anchor extends React.Component<AnchorProps, any> {
|
||||
static Link = AnchorLink;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-anchor',
|
||||
affix: true,
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
anchorHelper: React.PropTypes.any,
|
||||
};
|
||||
|
||||
refs: {
|
||||
ink?: any;
|
||||
};
|
||||
|
||||
private scrollEvent: any;
|
||||
private anchorHelper: AnchorHelper;
|
||||
private _avoidInk: boolean;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeAnchor: null,
|
||||
animated: true,
|
||||
};
|
||||
this.anchorHelper = new AnchorHelper();
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
this.setState({
|
||||
activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.bounds),
|
||||
});
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
anchorHelper: this.anchorHelper,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.handleScroll();
|
||||
this.updateInk();
|
||||
this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (!this._avoidInk) {
|
||||
this.updateInk();
|
||||
}
|
||||
}
|
||||
|
||||
updateInk = () => {
|
||||
const activeAnchor = this.anchorHelper.getCurrentActiveAnchor();
|
||||
if (activeAnchor) {
|
||||
this.refs.ink.style.top = `${activeAnchor.offsetTop + activeAnchor.clientHeight / 2 - 4.5}px`;
|
||||
}
|
||||
}
|
||||
|
||||
clickAnchorLink = (href, component) => {
|
||||
this._avoidInk = true;
|
||||
this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`;
|
||||
this.anchorHelper.scrollTo(href, getDefaultTarget, () => {
|
||||
this._avoidInk = false;
|
||||
});
|
||||
}
|
||||
|
||||
renderAnchorLink = (child) => {
|
||||
const { href } = child.props;
|
||||
if (href) {
|
||||
this.anchorHelper.addLink(href);
|
||||
return React.cloneElement(child, {
|
||||
onClick: this.clickAnchorLink,
|
||||
prefixCls: this.props.prefixCls,
|
||||
bounds: this.props.bounds,
|
||||
affix: this.props.affix,
|
||||
});
|
||||
}
|
||||
return child;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls, offsetTop, style, className = '', affix } = this.props;
|
||||
const { activeAnchor, animated } = this.state;
|
||||
const inkClass = classNames({
|
||||
[`${prefixCls}-ink-ball`]: true,
|
||||
animated,
|
||||
visible: !!activeAnchor,
|
||||
});
|
||||
|
||||
const wrapperClass = classNames({
|
||||
[`${prefixCls}-wrapper`]: true,
|
||||
}, className);
|
||||
|
||||
const anchorClass = classNames(prefixCls, {
|
||||
'fixed': !affix,
|
||||
});
|
||||
|
||||
const anchorContent = (
|
||||
<div className={wrapperClass} style={style}>
|
||||
<div className={anchorClass}>
|
||||
<div className={`${prefixCls}-ink`} >
|
||||
<span className={inkClass} ref="ink" />
|
||||
</div>
|
||||
{React.Children.map(this.props.children, this.renderAnchorLink)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return !affix ? anchorContent : (
|
||||
<Affix offsetTop={offsetTop}>
|
||||
{anchorContent}
|
||||
</Affix>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 锚点
|
||||
cols: 2
|
||||
type: Navigation
|
||||
title: Anchor
|
||||
---
|
||||
|
||||
用于跳转到页面指定位置。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
|
||||
|
||||
## API
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| bounds | 锚点区域边界 | Number | 5(px) |
|
||||
|
||||
### Link Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | 锚点链接 | String | |
|
||||
| title | 文字内容 | React.Node | |
|
||||
@@ -1,78 +0,0 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
.@{ant-prefix} {
|
||||
&-anchor {
|
||||
position: relative;
|
||||
&-wrapper {
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
&-ink {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: relative;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: @border-color-split;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&-ball {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 9px;
|
||||
border: 3px solid @primary-color;
|
||||
background-color: @component-background;
|
||||
left: 50%;
|
||||
transition: top .3s ease-in-out;
|
||||
transform: translateX(-50%);
|
||||
&.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed &-ink &-ink-ball {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-anchor-link {
|
||||
padding: 8px 0 8px 18px;
|
||||
line-height: 1;
|
||||
|
||||
& & {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
color: @text-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&-title:only-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-active > &-title {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
& > & {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用。通过 dataSource 设置自动完成的数据源
|
||||
|
||||
## en-US
|
||||
|
||||
Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
|
||||
````jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
}
|
||||
|
||||
const Complete = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
dataSource: [],
|
||||
};
|
||||
},
|
||||
handleChange(value) {
|
||||
this.setState({
|
||||
dataSource: !value ? [] : [
|
||||
value,
|
||||
value + value,
|
||||
value + value + value,
|
||||
],
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
return (
|
||||
<AutoComplete
|
||||
dataSource={dataSource}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onChange={this.handleChange}
|
||||
placeholder="input here"
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
@@ -1,54 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 自定义选项
|
||||
en-US: Customized
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `dataSource`。
|
||||
|
||||
## en-US
|
||||
|
||||
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
|
||||
|
||||
````jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
|
||||
const Complete = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
result: [],
|
||||
};
|
||||
},
|
||||
handleChange(value) {
|
||||
let result;
|
||||
if (!value || value.indexOf('@') >= 0) {
|
||||
result = [];
|
||||
} else {
|
||||
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
|
||||
}
|
||||
this.setState({ result });
|
||||
},
|
||||
render() {
|
||||
const { result } = this.state;
|
||||
const children = result.map((email) => {
|
||||
return <Option key={email}>{email}</Option>;
|
||||
});
|
||||
return (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
onChange={this.handleChange}
|
||||
placeholder="input here"
|
||||
>
|
||||
{children}
|
||||
</AutoComplete>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
cols: 1
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
Autocomplete function of input field.
|
||||
|
||||
## When To Use
|
||||
|
||||
When there is a need for autocomplete functionality.
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />
|
||||
```
|
||||
Since `AutoComplete` is based on `Select`, so besides the following API, `AutoComplete` has the same API as `Select`.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|----------------------------------|------------|--------|
|
||||
| dataSource | Data source for autocomplete | Array | |
|
||||
| value | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | - |
|
||||
| defaultValue | Initial selected option. | string/Array<String> | - |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
|
||||
| disabled | Whether disabled select | boolean | false |
|
||||
| placeholder | placeholder of input | string | - |
|
||||
@@ -1,86 +0,0 @@
|
||||
import React from 'react';
|
||||
import Select, { OptionProps, OptGroupProps } from '../select';
|
||||
import { Option, OptGroup } from 'rc-select';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export interface SelectedValue {
|
||||
key: string;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface DataSourceItemObject { value: string; text: string; };
|
||||
export type DataSourceItemType = string | DataSourceItemObject;
|
||||
|
||||
export interface AutoCompleteProps {
|
||||
size?: 'large' | 'small' | 'default';
|
||||
className?: string;
|
||||
notFoundContent?: Element;
|
||||
dataSource: DataSourceItemType[];
|
||||
prefixCls?: string;
|
||||
transitionName?: string;
|
||||
optionLabelProp?: string;
|
||||
choiceTransitionName?: string;
|
||||
showSearch?: boolean;
|
||||
defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
||||
value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
||||
allowClear?: boolean;
|
||||
onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
|
||||
static Option = Option as React.ClassicComponentClass<OptionProps>;
|
||||
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-select',
|
||||
transitionName: 'slide-up',
|
||||
optionLabelProp: 'children',
|
||||
choiceTransitionName: 'zoom',
|
||||
showSearch: false,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
antLocale: React.PropTypes.object,
|
||||
};
|
||||
|
||||
render() {
|
||||
let {
|
||||
size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
|
||||
} = this.props;
|
||||
|
||||
const cls = classNames({
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[className]: !!className,
|
||||
[`${prefixCls}-show-search`]: true,
|
||||
});
|
||||
|
||||
const options = children || (dataSource ? dataSource.map((item) => {
|
||||
switch (typeof item) {
|
||||
case 'string':
|
||||
return <Option key={item}>{item}</Option>;
|
||||
case 'object':
|
||||
return (
|
||||
<Option key={(item as DataSourceItemObject).value}>
|
||||
{(item as DataSourceItemObject).text}
|
||||
</Option>
|
||||
);
|
||||
default:
|
||||
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
|
||||
}
|
||||
}) : []);
|
||||
|
||||
return (
|
||||
<Select
|
||||
{...this.props}
|
||||
className={cls}
|
||||
optionLabelProp={optionLabelProp}
|
||||
combobox
|
||||
notFoundContent={notFoundContent}
|
||||
>
|
||||
{options}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 自动完成
|
||||
type: Data Entry
|
||||
cols: 1
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
输入框自动完成功能。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要自动完成时。
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />
|
||||
```
|
||||
因为 `AutoComplete` 是基于 `Select` 封装的，所以除了以下 API 外，`AutoComplete` 跟 `Select` 拥有一样的 API。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------------|----------------------------------|------------|---------|
|
||||
| dataSource | 自动完成的数据源 | Array | |
|
||||
| value | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false |
|
||||
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
|
||||
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| placeholder | 输入框提示 | string | - |
|
||||
@@ -1,4 +0,0 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
import '../../select/style';
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The most basic usage.
|
||||
|
||||
````jsx
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<BackTop />
|
||||
Scroll down to see the bottom-right
|
||||
<strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
|
||||
button.
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 自定义样式
|
||||
en-US: Custom style
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
|
||||
|
||||
## en-US
|
||||
|
||||
You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
|
||||
|
||||
|
||||
````jsx
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<BackTop>
|
||||
<div className="ant-back-top-inner">UP</div>
|
||||
</BackTop>
|
||||
Scroll down to see the bottom-right
|
||||
<strong style={{ color: '#57c5f7' }}> blue </strong>
|
||||
button.
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-back-top-demo-custom .ant-back-top {
|
||||
bottom: 100px;
|
||||
}
|
||||
#components-back-top-demo-custom .ant-back-top-inner {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
background-color: #57c5f7;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
````
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: BackTop
|
||||
---
|
||||
|
||||
`BackTop` makes it easy to go back to the top of the page.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When the page content is very long.
|
||||
- When you need to go back to the top very frequently in order to view the contents.
|
||||
|
||||
## API
|
||||
|
||||
> The distance to the bottom is set to `50px` by default, which is overridable.
|
||||
|
||||
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
|
||||
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
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 | -
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
import React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import Icon from '../icon';
|
||||
import getScroll from '../_util/getScroll';
|
||||
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
||||
|
||||
const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
const currentScrollTop = () => {
|
||||
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
|
||||
};
|
||||
|
||||
const easeInOutCubic = (t, b, c, d) => {
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return cc / 2 * t * t * t + b;
|
||||
} else {
|
||||
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
||||
}
|
||||
};
|
||||
|
||||
function noop() {}
|
||||
|
||||
function getDefaultTarget() {
|
||||
return typeof window !== 'undefined' ?
|
||||
window : null;
|
||||
}
|
||||
|
||||
export interface BackTopProps {
|
||||
visibilityHeight?: number;
|
||||
onClick?: React.MouseEventHandler<any>;
|
||||
target?: () => HTMLElement | Window;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
static defaultProps = {
|
||||
visibilityHeight: 400,
|
||||
};
|
||||
|
||||
scrollEvent: any;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
|
||||
scrollToTop = (e) => {
|
||||
const scrollTop = currentScrollTop();
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
const time = timestamp - startTime;
|
||||
this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450));
|
||||
if (time < 450) {
|
||||
reqAnimFrame(frameFunc);
|
||||
}
|
||||
};
|
||||
reqAnimFrame(frameFunc);
|
||||
(this.props.onClick || noop)(e);
|
||||
}
|
||||
|
||||
setScrollTop(value) {
|
||||
const targetNode = (this.props.target || getDefaultTarget)();
|
||||
if (targetNode === window) {
|
||||
document.body.scrollTop = value;
|
||||
document.documentElement.scrollTop = value;
|
||||
} else {
|
||||
(targetNode as HTMLElement).scrollTop = value;
|
||||
}
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
const { visibilityHeight, target = getDefaultTarget } = this.props;
|
||||
const scrollTop = getScroll(target(), true);
|
||||
this.setState({
|
||||
visible: scrollTop > visibilityHeight,
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.handleScroll();
|
||||
this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls = 'ant-back-top', className = '', children } = this.props;
|
||||
const classString = classNames(prefixCls, className);
|
||||
|
||||
const defaultElement = (
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<Icon className={`${prefixCls}-icon`} type="to-top" />
|
||||
</div>
|
||||
);
|
||||
|
||||
// fix https://fb.me/react-unknown-prop
|
||||
const divProps = omit(this.props, [
|
||||
'prefixCls',
|
||||
'className',
|
||||
'children',
|
||||
'visibilityHeight',
|
||||
]);
|
||||
|
||||
const backTopBtn = this.state.visible ? (
|
||||
<div {...divProps} className={classString} onClick={this.scrollToTop}>
|
||||
{children || defaultElement}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Animate component="" transitionName="fade">
|
||||
{backTopBtn}
|
||||
</Animate>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
subtitle: 回到顶部
|
||||
title: BackTop
|
||||
---
|
||||
|
||||
返回页面顶部的操作按钮。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当页面内容区域比较长时；
|
||||
- 当用户需要频繁返回顶部查看相关内容时。
|
||||
|
||||
## API
|
||||
|
||||
> 有默认样式，距离底部 `50px`，可覆盖。
|
||||
|
||||
> 自定义样式宽高不大于 40px * 40px。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 |
|
||||
| onClick | 点击按钮的回调函数 | Function | - |
|
||||
@@ -1,33 +0,0 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@backtop-prefix-cls: ~"@{ant-prefix}-back-top";
|
||||
|
||||
.@{backtop-prefix-cls} {
|
||||
z-index: @zindex-back-top;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 50px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
&-content {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(64, 64, 64, 0.4);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
transition: all .3s @ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(64, 64, 64, 0.6);
|
||||
transition: all .3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,6 @@
|
||||
import React from 'react';
|
||||
import { createElement, Component } from 'react';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import React, { createElement } from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
|
||||
import assign from 'object-assign';
|
||||
import omit from 'omit.js';
|
||||
|
||||
function getNumberArray(num) {
|
||||
return num ?
|
||||
@@ -13,26 +10,24 @@ function getNumberArray(num) {
|
||||
.map(i => Number(i)) : [];
|
||||
}
|
||||
|
||||
export interface ScrollNumberProps {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
count?: string | number;
|
||||
component?: string;
|
||||
onAnimated?: Function;
|
||||
height?: number;
|
||||
style: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class ScrollNumber extends Component<ScrollNumberProps, any> {
|
||||
export default class ScrollNumber extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-scroll-number',
|
||||
count: null,
|
||||
onAnimated() {
|
||||
},
|
||||
component: 'sup',
|
||||
onAnimated() {},
|
||||
height: 18,
|
||||
};
|
||||
}
|
||||
|
||||
lastCount: any;
|
||||
static propTypes = {
|
||||
count: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
]),
|
||||
component: React.PropTypes.string,
|
||||
onAnimated: React.PropTypes.func,
|
||||
height: React.PropTypes.number,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -84,10 +79,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
|
||||
animateStarted: false,
|
||||
count: nextProps.count,
|
||||
}, () => {
|
||||
const onAnimated = this.props.onAnimated;
|
||||
if (onAnimated) {
|
||||
onAnimated();
|
||||
}
|
||||
this.props.onAnimated();
|
||||
});
|
||||
}, 5);
|
||||
});
|
||||
@@ -95,10 +87,10 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
|
||||
}
|
||||
|
||||
renderNumberList(position) {
|
||||
const childrenToReturn: React.ReactElement<any>[] = [];
|
||||
const childrenToReturn = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const currentClassName = (position === i) ? 'current' : '';
|
||||
childrenToReturn.push(<p key={i.toString()} className={currentClassName}>{i % 10}</p>);
|
||||
const currentClassName = (position === i) ? 'current' : null;
|
||||
childrenToReturn.push(<p key={i} className={currentClassName}>{i % 10}</p>);
|
||||
}
|
||||
return childrenToReturn;
|
||||
}
|
||||
@@ -112,8 +104,8 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
|
||||
className: `${this.props.prefixCls}-only`,
|
||||
style: {
|
||||
transition: removeTransition && 'none',
|
||||
WebkitTransform: `translateY(${-position * height}px)`,
|
||||
transform: `translateY(${-position * height}px)`,
|
||||
WebkitTransform: `translate3d(0, ${-position * height}px, 0)`,
|
||||
transform: `translate3d(0, ${-position * height}px, 0)`,
|
||||
height,
|
||||
},
|
||||
key: i,
|
||||
@@ -130,17 +122,12 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
// fix https://fb.me/react-unknown-prop
|
||||
const props = assign({}, omit(this.props, [
|
||||
'count',
|
||||
'onAnimated',
|
||||
'component',
|
||||
'prefixCls',
|
||||
]), {
|
||||
const props = {
|
||||
...this.props,
|
||||
className: `${this.props.prefixCls} ${this.props.className}`,
|
||||
});
|
||||
};
|
||||
return createElement(
|
||||
this.props.component || 'sup',
|
||||
this.props.component,
|
||||
props,
|
||||
this.renderNumberElement()
|
||||
);
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 大数字
|
||||
en-US: Overflowed count
|
||||
title: 大数字
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
超过 99 的会显示为 `99+`。
|
||||
|
||||
## en-US
|
||||
|
||||
`99+` is displayed when count is larger than `99`.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Badge count={99}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<Badge count={200}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
简单的徽章展示。
|
||||
|
||||
## en-US
|
||||
|
||||
Simplest Usage.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-badge:not(.ant-badge-status) {
|
||||
.ant-badge {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.head-example {
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 动态
|
||||
en-US: Dynamic
|
||||
title: 动态
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
展示动态变化的效果。
|
||||
|
||||
## en-US
|
||||
|
||||
The count will be animated as it changes.
|
||||
|
||||
````jsx
|
||||
import { Badge, Button, Icon } from 'antd';
|
||||
const ButtonGroup = Button.Group;
|
||||
@@ -44,10 +36,10 @@ const Test = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<Badge count={this.state.count}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<Badge dot={this.state.show}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<ButtonGroup>
|
||||
@@ -59,7 +51,7 @@ const Test = React.createClass({
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Button type="ghost" onClick={this.onClick} style={{ marginLeft: 8 }}>
|
||||
Switch state
|
||||
切换红点显隐
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,5 +59,7 @@ const Test = React.createClass({
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Test />, mountNode);
|
||||
ReactDOM.render(
|
||||
<Test />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 讨嫌的小红点
|
||||
en-US: Red badge
|
||||
title: 讨嫌的小红点
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
没有具体的数字。
|
||||
|
||||
## en-US
|
||||
|
||||
This will simply display a red badge, without a specific count.
|
||||
|
||||
````jsx
|
||||
import { Badge, Icon } from 'antd';
|
||||
|
||||
@@ -21,7 +13,7 @@ ReactDOM.render(<div>
|
||||
<Icon type="notification" />
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#">Link something</a>
|
||||
<a href="#">一个链接</a>
|
||||
</Badge>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,25 +1,17 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 可点击
|
||||
en-US: Clickable
|
||||
title: 可点击
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 a 标签进行包裹即可。
|
||||
|
||||
## en-US
|
||||
|
||||
The badge can be wrapped with `a` tag to make it linkable.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<a href="#">
|
||||
<Badge count={5}>
|
||||
<span className="head-example" />
|
||||
<span className="head-example"></span>
|
||||
</Badge>
|
||||
</a>
|
||||
, mountNode);
|
||||
|
||||
@@ -1,20 +1,12 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 独立使用
|
||||
en-US: Standalone
|
||||
title: 独立使用
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不包裹任何元素即是独立使用，可自定样式展现。
|
||||
|
||||
> 在右上角的 badge 则限定为红色。
|
||||
|
||||
## en-US
|
||||
|
||||
Used in standalone when children is empty.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 封顶数字
|
||||
en-US: Customized overflow count
|
||||
title: 封顶数字
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
超过 `overflowCount` 的会显示为 `${overflowCount}+`。
|
||||
|
||||
## en-US
|
||||
|
||||
`${overflowCount}+` is displayed when count is larger than `overflowCount`.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Badge count={99} overflowCount={10}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<Badge count={1000} overflowCount={999}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 状态点
|
||||
en-US: Status
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用于表示状态的小圆点。
|
||||
|
||||
## en-US
|
||||
|
||||
Standalone badge with status.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Badge status="success" />
|
||||
<Badge status="error" />
|
||||
<Badge status="default" />
|
||||
<Badge status="processing" />
|
||||
<Badge status="warning" />
|
||||
<br />
|
||||
<Badge status="success" text="Success" />
|
||||
<br />
|
||||
<Badge status="error" text="Error" />
|
||||
<br />
|
||||
<Badge status="default" text="Default" />
|
||||
<br />
|
||||
<Badge status="processing" text="Processing" />
|
||||
<br />
|
||||
<Badge status="warning" text="Warning" />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Badge
|
||||
---
|
||||
|
||||
Small numerical value or status descriptors for UI elements.
|
||||
|
||||
## When To Use
|
||||
|
||||
Badge normally appears in proximity to notification or head picture with eye-catching appeal, typically displaying unread messages count.
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
```
|
||||
|
||||
|
||||
```jsx
|
||||
<Badge count={5} />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|-------------------------|------------|---------|
|
||||
| count | Number to show in badge | Number | |
|
||||
| overflowCount | Max count to show | Number | 99 |
|
||||
| dot | Whether to show red dot without number | Boolean | false |
|
||||
| status | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
|
||||
| text | If `status` is set, `text` is to set the text of status dot | String | '' |
|
||||
59
components/badge/index.jsx
Normal file
59
components/badge/index.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import ScrollNumber from './ScrollNumber';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default class Badge extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-badge',
|
||||
count: null,
|
||||
dot: false,
|
||||
overflowCount: 99,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
count: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
]),
|
||||
dot: React.PropTypes.bool,
|
||||
overflowCount: React.PropTypes.number,
|
||||
}
|
||||
|
||||
render() {
|
||||
let { count, prefixCls, overflowCount, className, style, children } = this.props;
|
||||
const dot = this.props.dot;
|
||||
|
||||
count = count > overflowCount ? `${overflowCount}+` : count;
|
||||
|
||||
// dot mode don't need count
|
||||
if (dot) {
|
||||
count = '';
|
||||
}
|
||||
|
||||
// null undefined "" "0" 0
|
||||
const hidden = (!count || count === '0') && !dot;
|
||||
const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
|
||||
const badgeCls = classNames({
|
||||
[className]: !!className,
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children,
|
||||
});
|
||||
|
||||
return (
|
||||
<span className={badgeCls} title={count} {...this.props} style={null}>
|
||||
{children}
|
||||
<Animate component=""
|
||||
showProp="data-show"
|
||||
transitionName={`${prefixCls}-zoom`}
|
||||
transitionAppear>
|
||||
{
|
||||
hidden ? null :
|
||||
<ScrollNumber data-show={!hidden} className={scrollNumberCls}
|
||||
count={count} style={style} />
|
||||
}
|
||||
</Animate>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 徽标数
|
||||
type: Data Display
|
||||
title: Badge
|
||||
chinese: 徽标数
|
||||
type: Presentation
|
||||
english: Badge
|
||||
---
|
||||
|
||||
图标右上角的圆形徽标数字。
|
||||
@@ -15,7 +15,7 @@ title: Badge
|
||||
|
||||
```jsx
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
```
|
||||
|
||||
@@ -28,6 +28,4 @@ title: Badge
|
||||
|----------------|----------------------------------|------------|---------|--------|
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number | | |
|
||||
| overflowCount | 展示封顶的数字值 | Number | | 99 |
|
||||
| dot | 不展示数字，只有一个小红点 | Boolean | | false |
|
||||
| status | 设置 Badge 为状态点 | Enum | 'success'、'processing'、'default'、'error'、'warning' | '' |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | String | | '' |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | | false |
|
||||
@@ -1,112 +0,0 @@
|
||||
import React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import ScrollNumber from './ScrollNumber';
|
||||
import classNames from 'classnames';
|
||||
import warning from '../_util/warning';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
export interface BadgeProps {
|
||||
/** Number to show in badge */
|
||||
count: number | string;
|
||||
/** Max count to show */
|
||||
overflowCount?: number;
|
||||
/** whether to show red dot without number */
|
||||
dot?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export default class Badge extends React.Component<BadgeProps, any> {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-badge',
|
||||
count: null,
|
||||
dot: false,
|
||||
overflowCount: 99,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
count: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
]),
|
||||
dot: React.PropTypes.bool,
|
||||
overflowCount: React.PropTypes.number,
|
||||
};
|
||||
|
||||
render() {
|
||||
let [{
|
||||
count, prefixCls, overflowCount, className, style, children, dot, status, text,
|
||||
}, restProps] = splitObject(
|
||||
this.props,
|
||||
['count', 'prefixCls', 'overflowCount', 'className', 'style', 'children', 'dot', 'status', 'text']
|
||||
);
|
||||
const isDot = dot || status;
|
||||
const realCount = count;
|
||||
count = count > overflowCount ? `${overflowCount}+` : count;
|
||||
|
||||
// dot mode don't need count
|
||||
if (isDot) {
|
||||
count = '';
|
||||
}
|
||||
|
||||
// null undefined "" "0" 0
|
||||
const hidden = (!count || count === '0') && !isDot;
|
||||
const scrollNumberCls = classNames({
|
||||
[`${prefixCls}-dot`]: isDot,
|
||||
[`${prefixCls}-count`]: !isDot,
|
||||
});
|
||||
const badgeCls = classNames(className, prefixCls, {
|
||||
[`${prefixCls}-status`]: !!status,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children,
|
||||
});
|
||||
|
||||
warning(
|
||||
!(children && status),
|
||||
'`Badge[children]` and `Badge[status]` cannot be used at the same time.'
|
||||
);
|
||||
// <Badge status="success" />
|
||||
if (!children && status) {
|
||||
const statusCls = classNames({
|
||||
[`${prefixCls}-status-dot`]: !!status,
|
||||
[`${prefixCls}-status-${status}`]: true,
|
||||
});
|
||||
return (
|
||||
<span className={badgeCls}>
|
||||
<span className={statusCls} />
|
||||
<span className={`${prefixCls}-status-text`}>{text}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const scrollNumber = hidden ? null : (
|
||||
<ScrollNumber
|
||||
data-show={!hidden}
|
||||
className={scrollNumberCls}
|
||||
count={count}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
|
||||
const statusText = (hidden || !text) ? null : (
|
||||
<span className={`${prefixCls}-status-text`}>{text}</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<span {...restProps} className={badgeCls} title={realCount}>
|
||||
{children}
|
||||
<Animate
|
||||
component=""
|
||||
showProp="data-show"
|
||||
transitionName={children ? `${prefixCls}-zoom` : ''}
|
||||
transitionAppear
|
||||
>
|
||||
{scrollNumber}
|
||||
</Animate>
|
||||
{statusText}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@badge-prefix-cls: ~"@{ant-prefix}-badge";
|
||||
@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
|
||||
@badge-prefix-cls: ant-badge;
|
||||
@number-prefix-cls: ant-scroll-number;
|
||||
|
||||
.@{badge-prefix-cls} {
|
||||
position: relative;
|
||||
@@ -16,15 +16,16 @@
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
min-width: 20px;
|
||||
background: @highlight-color;
|
||||
background: @error-color;
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
padding: 0 6px;
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
transform-origin: -10% center;
|
||||
z-index: 10;
|
||||
font-family: tahoma;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
a,
|
||||
@@ -41,44 +42,11 @@
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 100%;
|
||||
background: @highlight-color;
|
||||
background: @error-color;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
}
|
||||
|
||||
&-status {
|
||||
line-height: inherit;
|
||||
vertical-align: baseline;
|
||||
|
||||
&-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&-success {
|
||||
background-color: @success-color;
|
||||
}
|
||||
&-processing {
|
||||
background-color: @primary-color;
|
||||
animation: antStatusProcessing 1.2s infinite ease-in-out;
|
||||
}
|
||||
&-default {
|
||||
background-color: @normal-color;
|
||||
}
|
||||
&-error {
|
||||
background-color: @error-color;
|
||||
}
|
||||
&-warning {
|
||||
background-color: @warning-color;
|
||||
}
|
||||
&-text {
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-appear,
|
||||
&-zoom-enter {
|
||||
animation: antZoomBadgeIn .3s @ease-out-back;
|
||||
@@ -94,17 +62,16 @@
|
||||
top: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
transform: none!important;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antStatusProcessing {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
a & {
|
||||
&-count:hover {
|
||||
background: tint(@error-color, 20%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
&-count:active {
|
||||
background: shade(@error-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
68
components/breadcrumb/Breadcrumb.jsx
Normal file
68
components/breadcrumb/Breadcrumb.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import React, { cloneElement } from 'react';
|
||||
import BreadcrumbItem from './BreadcrumbItem';
|
||||
|
||||
export default class Breadcrumb extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
linkRender: (href, name) => <a href={`#${href}`}>{name}</a>,
|
||||
nameRender: (name) => <span>{name}</span>,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
separator: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.element,
|
||||
]),
|
||||
routes: React.PropTypes.array,
|
||||
params: React.PropTypes.object,
|
||||
linkRender: React.PropTypes.func,
|
||||
nameRender: React.PropTypes.func,
|
||||
}
|
||||
|
||||
render() {
|
||||
let crumbs;
|
||||
const { separator, prefixCls, routes, params, children, linkRender, nameRender } = this.props;
|
||||
if (routes && routes.length > 0) {
|
||||
const paths = [];
|
||||
crumbs = routes.map((route, i) => {
|
||||
route.path = route.path || '';
|
||||
let path = route.path.replace(/^\//, '');
|
||||
Object.keys(params).forEach(key => {
|
||||
path = path.replace(`:${key}`, params[key]);
|
||||
});
|
||||
if (path) {
|
||||
paths.push(path);
|
||||
}
|
||||
|
||||
if (!route.breadcrumbName) {
|
||||
return null;
|
||||
}
|
||||
const name = route.breadcrumbName.replace(/:(.*)/g, (replacement, key) => {
|
||||
return params[key] || replacement;
|
||||
});
|
||||
|
||||
let link;
|
||||
if (i === routes.length - 1) {
|
||||
link = nameRender(name);
|
||||
} else {
|
||||
link = linkRender(`/${paths.join('/')}`, name);
|
||||
}
|
||||
return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
|
||||
});
|
||||
} else {
|
||||
crumbs = React.Children.map(children, (element, index) => {
|
||||
return cloneElement(element, {
|
||||
separator,
|
||||
key: index,
|
||||
});
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
{crumbs}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
import React from 'react';
|
||||
import { cloneElement } from 'react';
|
||||
import warning from '../_util/warning';
|
||||
import BreadcrumbItem from './BreadcrumbItem';
|
||||
|
||||
export interface BreadcrumbProps {
|
||||
prefixCls?: string;
|
||||
routes?: Array<any>;
|
||||
params?: Object;
|
||||
separator?: string | React.ReactNode;
|
||||
itemRender?: (route: any, params: any, routes: Array<any>, paths: Array<string>) => React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function getBreadcrumbName(route, params) {
|
||||
if (!route.breadcrumbName) {
|
||||
return null;
|
||||
}
|
||||
const paramsKeys = Object.keys(params).join('|');
|
||||
const name = route.breadcrumbName.replace(
|
||||
new RegExp(`:(${paramsKeys})`, 'g'),
|
||||
(replacement, key) => params[key] || replacement
|
||||
);
|
||||
return name;
|
||||
}
|
||||
|
||||
function defaultItemRender(route, params, routes, paths) {
|
||||
const isLastItem = routes.indexOf(route) === routes.length - 1;
|
||||
const name = getBreadcrumbName(route, params);
|
||||
return isLastItem
|
||||
? <span>{name}</span>
|
||||
: <a href={`#/${paths.join('/')}`}>{name}</a>;
|
||||
}
|
||||
|
||||
export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
|
||||
static Item: any;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
separator: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.element,
|
||||
]),
|
||||
routes: React.PropTypes.array,
|
||||
params: React.PropTypes.object,
|
||||
linkRender: React.PropTypes.func,
|
||||
nameRender: React.PropTypes.func,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const props = this.props;
|
||||
warning(
|
||||
!('linkRender' in props || 'nameRender' in props),
|
||||
'`linkRender` and `nameRender` are removed, please use `itemRender` instead, ' +
|
||||
'see: http://u.ant.design/item-render.'
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let crumbs;
|
||||
const { separator, prefixCls, routes, params = {}, children, itemRender = defaultItemRender } = this.props;
|
||||
if (routes && routes.length > 0) {
|
||||
const paths: string[] = [];
|
||||
crumbs = routes.map((route) => {
|
||||
route.path = route.path || '';
|
||||
let path: string = route.path.replace(/^\//, '');
|
||||
Object.keys(params).forEach(key => {
|
||||
path = path.replace(`:${key}`, params[key]);
|
||||
});
|
||||
if (path) {
|
||||
paths.push(path);
|
||||
}
|
||||
if (route.breadcrumbName) {
|
||||
return (
|
||||
<BreadcrumbItem separator={separator} key={route.breadcrumbName}>
|
||||
{itemRender(route, params, routes, paths)}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
} else if (children) {
|
||||
crumbs = React.Children.map(children, (element: any, index) => {
|
||||
return cloneElement(element, {
|
||||
separator,
|
||||
key: index,
|
||||
});
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
{crumbs}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,10 @@
|
||||
import React from 'react';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
export interface BreadcrumbItemProps {
|
||||
separator?: React.ReactNode;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
|
||||
export default class BreadcrumbItem extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
@@ -19,12 +13,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
|
||||
React.PropTypes.element,
|
||||
]),
|
||||
href: React.PropTypes.string,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const [{ prefixCls, separator, children }, restProps] = splitObject(
|
||||
this.props, ['prefixCls', 'separator', 'children']
|
||||
);
|
||||
const { prefixCls, separator, children, ...restProps } = this.props;
|
||||
let link;
|
||||
if ('href' in this.props) {
|
||||
link = <a className={`${prefixCls}-link`} {...restProps}>{children}</a>;
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic Usage
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest use
|
||||
|
||||
````jsx
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">应用中心</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">应用列表</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,52 +1,56 @@
|
||||
---
|
||||
order: 2
|
||||
iframe: true
|
||||
title:
|
||||
zh-CN: 路由
|
||||
en-US: React Router Integration
|
||||
title: 路由
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
和 `react-router@2+` 进行结合使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Used together with `react-router@2+`.
|
||||
和 `react-router@2.x` 进行结合使用。
|
||||
|
||||
````jsx
|
||||
import { Router, Route, Link, hashHistory } from 'react-router';
|
||||
import { Breadcrumb, Alert } from 'antd';
|
||||
const ReactRouter = require('react-router');
|
||||
let { Router, Route, Link, hashHistory } = ReactRouter;
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const Apps = () => (
|
||||
<ul className="app-list">
|
||||
<li>
|
||||
<Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
function Apps() {
|
||||
return (
|
||||
<ul className="app-list">
|
||||
<li>
|
||||
<Link to="/apps/1">应用1</Link>：<Link to="/apps/1/detail">详情</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/apps/2">应用2</Link>：<Link to="/apps/2/detail">详情</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
const Home = ({ routes, params, children }) => (
|
||||
<div>
|
||||
<div className="demo-nav">
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/apps">Application List</Link>
|
||||
function Home(props) {
|
||||
return (
|
||||
<div>
|
||||
<div className="demo-nav">
|
||||
<Link to="/">首页</Link>
|
||||
<Link to="/apps">应用列表</Link>
|
||||
</div>
|
||||
{props.children || 'Home'}
|
||||
<div style={{
|
||||
marginBottom: 15,
|
||||
marginTop: 15,
|
||||
paddingBottom: 15,
|
||||
borderBottom: '1px dashed #ccc',
|
||||
}}>
|
||||
点击上面的导航切换页面，面包屑在下面：
|
||||
</div>
|
||||
<Breadcrumb {...props} />
|
||||
</div>
|
||||
{children || 'Home Page'}
|
||||
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
|
||||
<Breadcrumb routes={routes} params={params} />
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Router history={hashHistory}>
|
||||
<Route name="home" breadcrumbName="Home" path="/" component={Home}>
|
||||
<Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
|
||||
<Route name="app" breadcrumbName="Application:id" path=":id">
|
||||
<Route name="detail" breadcrumbName="Detail" path="detail" />
|
||||
<Route name="home" breadcrumbName="首页" path="/" component={Home}>
|
||||
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
|
||||
<Route name="app" breadcrumbName="应用:id" path=":id">
|
||||
<Route name="detail" breadcrumbName="详情" path="detail" />
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 分隔符
|
||||
en-US: Configuring the Separator
|
||||
title: 分隔符
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `separator=">"` 可以自定义分隔符。
|
||||
|
||||
## en-US
|
||||
|
||||
The separator can be customized by setting the separator property: separator=">"
|
||||
|
||||
````jsx
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Breadcrumb separator=">">
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 带有图标的
|
||||
en-US: With an Icon
|
||||
title: 带有图标的
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
图标放在文字前面。
|
||||
|
||||
## en-US
|
||||
|
||||
The icon should be placed in front of the text.
|
||||
|
||||
````jsx
|
||||
import { Breadcrumb, Icon } from 'antd';
|
||||
|
||||
@@ -23,11 +15,12 @@ ReactDOM.render(
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">
|
||||
<Icon type="user" />
|
||||
<span>Application List</span>
|
||||
应用列表
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
Application
|
||||
应用
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Breadcrumb
|
||||
---
|
||||
|
||||
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When the system has more than two layers in a hierarchy.
|
||||
- When you need to inform the user of where they are.
|
||||
- When the user may need to navigate back to a higher level.
|
||||
- When the application has multi-layer architecture.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Optional | Default |
|
||||
|-----------|-----------------------------------|-----------------|---------|--------|
|
||||
| routes | The routing stack information of router | Array | | - |
|
||||
| params | Routing parameter | Object | | - |
|
||||
| separator | Custom separator | String or Element | | '/' |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => React.ReactNode | | - |
|
||||
|
||||
> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
|
||||
|
||||
### Use with browserHistory
|
||||
|
||||
The link of Breadcrumb item contain `#` defaultly, you can use `itemRender` to make `browserHistory` Link.
|
||||
|
||||
```jsx
|
||||
import { Link } from 'react-router';
|
||||
|
||||
function itemRender(route, params, routes, paths) {
|
||||
const last = routes.indexOf(route) === routes.length - 1;
|
||||
return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
|
||||
}
|
||||
|
||||
return <Breadcrumb itemRender={itemRender} />;
|
||||
```
|
||||
33
components/breadcrumb/index.md
Normal file
33
components/breadcrumb/index.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 面包屑
|
||||
type: Navigation
|
||||
english: Breadcrumb
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用中心</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|-----------------------------------|-----------------|---------|--------|
|
||||
| routes | router 的路由栈信息 | Array | | - |
|
||||
| params | 路由的参数 | Object | | - |
|
||||
| separator | 分隔符自定义 | String or Element | | '/' |
|
||||
| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name) | | - |
|
||||
| nameRender | 自定义链接函数，和 react-router 配置使用 | Function(name) | | - |
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 面包屑
|
||||
type: Navigation
|
||||
title: Breadcrumb
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|-----------------------------------|-----------------|---------|--------|
|
||||
| routes | router 的路由栈信息 | Array | | - |
|
||||
| params | 路由的参数 | Object | | - |
|
||||
| separator | 分隔符自定义 | String or Element | | '/' |
|
||||
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => React.ReactNode | | - |
|
||||
|
||||
> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
|
||||
|
||||
### 和 browserHistory 配合
|
||||
|
||||
和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
|
||||
|
||||
```jsx
|
||||
import { Link } from 'react-router';
|
||||
|
||||
function itemRender(route, params, routes, paths) {
|
||||
const last = routes.indexOf(route) === routes.length - 1;
|
||||
return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
|
||||
}
|
||||
|
||||
return <Breadcrumb itemRender={itemRender} />;
|
||||
```
|
||||
@@ -1,17 +1,13 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";
|
||||
@breadcrumb-prefix-cls: ant-breadcrumb;
|
||||
|
||||
.@{breadcrumb-prefix-cls} {
|
||||
color: @text-color-secondary;
|
||||
color: #999;
|
||||
font-size: @font-size-base;
|
||||
|
||||
a {
|
||||
color: @text-color;
|
||||
transition: color .3s;
|
||||
&:hover {
|
||||
color: tint(@primary-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
@@ -28,9 +24,7 @@
|
||||
color: @border-color-base;
|
||||
}
|
||||
|
||||
&-link {
|
||||
> .@{iconfont-css-prefix} + span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.anticon + span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
27
components/button/button-group.jsx
Normal file
27
components/button/button-group.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const prefix = 'ant-btn-group-';
|
||||
|
||||
export default function ButtonGroup(props) {
|
||||
const { size, className, ...others } = props;
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
const sizeCls = ({
|
||||
large: 'lg',
|
||||
small: 'sm',
|
||||
})[size] || '';
|
||||
|
||||
const classes = classNames({
|
||||
'ant-btn-group': true,
|
||||
[prefix + sizeCls]: sizeCls,
|
||||
[className]: className,
|
||||
});
|
||||
|
||||
return <div {...others} className={classes} />;
|
||||
}
|
||||
|
||||
ButtonGroup.propTypes = {
|
||||
size: React.PropTypes.oneOf(['large', 'small']),
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
export type ButtonSize = 'small' | 'large'
|
||||
|
||||
export interface ButtonGroupProps {
|
||||
size?: ButtonSize;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export default function ButtonGroup(props: ButtonGroupProps) {
|
||||
const [{ prefixCls = 'ant-btn-group', size, className }, others] =
|
||||
splitObject(props, ['prefixCls', 'size', 'className']);
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
const sizeCls = ({
|
||||
large: 'lg',
|
||||
small: 'sm',
|
||||
})[size] || '';
|
||||
|
||||
const classes = classNames(prefixCls, {
|
||||
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
||||
}, className);
|
||||
|
||||
return <div {...others} className={classes} />;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import Icon from '../icon';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
|
||||
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
|
||||
function isString(str) {
|
||||
@@ -24,32 +24,12 @@ function insertSpace(child) {
|
||||
return child;
|
||||
}
|
||||
|
||||
export type ButtonType = 'primary' | 'ghost' | 'dashed'
|
||||
export type ButtonShape = 'circle' | 'circle-outline'
|
||||
export type ButtonSize = 'small' | 'large'
|
||||
|
||||
export interface ButtonProps {
|
||||
type?: ButtonType;
|
||||
htmlType?: string;
|
||||
icon?: string;
|
||||
shape?: ButtonShape;
|
||||
size?: ButtonSize;
|
||||
onClick?: React.FormEventHandler<any>;
|
||||
onMouseUp?: React.FormEventHandler<any>;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default class Button extends React.Component<ButtonProps, any> {
|
||||
static Group: any;
|
||||
|
||||
export default class Button extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-btn',
|
||||
onClick() {},
|
||||
loading: false,
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string,
|
||||
@@ -60,10 +40,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
loading: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
};
|
||||
|
||||
timeout: any;
|
||||
clickedTimeout: any;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.clickedTimeout) {
|
||||
@@ -78,7 +55,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, '');
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
handleClick = (...args) => {
|
||||
// Add click effect
|
||||
const buttonNode = findDOMNode(this);
|
||||
this.clearButton(buttonNode);
|
||||
@@ -86,15 +63,12 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
|
||||
|
||||
const onClick = this.props.onClick;
|
||||
if (onClick) {
|
||||
onClick(e);
|
||||
}
|
||||
this.props.onClick(...args);
|
||||
}
|
||||
|
||||
// Handle auto focus when click button in Chrome
|
||||
handleMouseUp = (e) => {
|
||||
(findDOMNode(this) as HTMLElement).blur();
|
||||
findDOMNode(this).blur();
|
||||
if (this.props.onMouseUp) {
|
||||
this.props.onMouseUp(e);
|
||||
}
|
||||
@@ -102,8 +76,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const [{ type, shape, size, className, htmlType, children, icon, loading, prefixCls }, others] = splitObject(props,
|
||||
['type', 'shape', 'size', 'className', 'htmlType', 'children', 'icon', 'loading', 'prefixCls']);
|
||||
const { type, shape, size, className, htmlType, children, icon, loading, prefixCls, ...others } = props;
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
@@ -112,26 +85,26 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
small: 'sm',
|
||||
})[size] || '';
|
||||
|
||||
const classes = classNames(prefixCls, {
|
||||
const classes = classNames({
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-${shape}`]: shape,
|
||||
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
||||
[`${prefixCls}-icon-only`]: !children && icon,
|
||||
[`${prefixCls}-loading`]: loading,
|
||||
}, className);
|
||||
[className]: className,
|
||||
});
|
||||
|
||||
const iconType = loading ? 'loading' : icon;
|
||||
|
||||
const kids = React.Children.map(children, insertSpace);
|
||||
|
||||
return (
|
||||
<button
|
||||
{...others}
|
||||
<button {...others}
|
||||
type={htmlType || 'button'}
|
||||
className={classes}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
onClick={this.handleClick}>
|
||||
{iconType ? <Icon type={iconType} /> : null}{kids}
|
||||
</button>
|
||||
);
|
||||
@@ -30,6 +30,7 @@ ReactDOM.render(
|
||||
<Button>Default</Button>
|
||||
<Button type="ghost">Ghost</Button>
|
||||
<Button type="dashed">Dashed</Button>
|
||||
</div>
|
||||
, mountNode);
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
@@ -53,6 +53,20 @@ ReactDOM.render(
|
||||
<Button type="primary" icon="cloud" />
|
||||
<Button type="primary" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>Size</h4>
|
||||
<ButtonGroup size="large">
|
||||
<Button type="ghost">Large</Button>
|
||||
<Button type="ghost">Large</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="ghost">Default</Button>
|
||||
<Button type="ghost">Default</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup size="small">
|
||||
<Button type="ghost">Small</Button>
|
||||
<Button type="ghost">Small</Button>
|
||||
</ButtonGroup>
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
@@ -71,4 +85,8 @@ ReactDOM.render(
|
||||
#components-button-demo-button-group .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
}
|
||||
#components-button-demo-button-group .ant-btn {
|
||||
margin-bottom: 12px;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user