mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-26 09:58:33 +08:00
Code Issues Actions 42 Packages Projects Releases Wiki Activity

Merge pull request #1 from ant-design/master

Browse Source 
update from orgin
This commit is contained in:
Inclined.Z 2016-08-18 14:13:43 +08:00 committed by GitHub
commit 4ffa4bfa3b
876 changed files with 31169 additions and 18189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["es2015", "react", "stage-0"]
}

56
.eslintrc.js Normal file
View File

@ -0,0 +1,56 @@
'use strict';
const eslintrc = {
extends: ['eslint-config-airbnb'],
env: {
browser: true,
node: true,
mocha: true,
jest: true,
es6: true,
},
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
experimentalObjectRestSpread: true,
},
},
plugins: [
'markdown',
'react',
'babel',
],
rules: {
'func-names': 0,
'arrow-body-style': 0,
'react/sort-comp': 0,
'react/prop-types': 0,
'react/jsx-first-prop-new-line': 0,
'import/no-unresolved': 0,
'no-param-reassign': 0,
'no-return-assign': 0,
'max-len': 0,
'consistent-return': 0,
'no-redeclare': 0,
}
};
if (process.env.RUN_ENV === 'DEMO') {
eslintrc.globals = {
React: true,
ReactDOM: true,
mountNode: true,
};
Object.assign(eslintrc.rules, {
'no-console': 0,
'eol-last': 0,
'prefer-rest-params': 0,
'react/no-multi-comp': 0,
'react/prefer-es6-class': 0,
});
}
module.exports = eslintrc;

39
.eslintrc.json
View File

@ -1,39 +0,0 @@
{
"extends": ["eslint-config-airbnb"],
"env": {
"browser": true,
"node": true,
"mocha": true,
"jest": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"plugins": [
"markdown",
"react",
"babel"
],
"rules": {
"comma-dangle": 0,
"func-names": 0,
"prefer-const": 0,
"arrow-body-style": 0,
"react/sort-comp": 0,
"react/no-multi-comp": 0,
"react/prop-types": 0,
"react/prefer-es6-class": 0,
"react/prefer-stateless-function": 0,
"react/jsx-closing-bracket-location": 0,
"react/jsx-no-bind": 0,
"no-param-reassign": 0,
"no-return-assign": 0,
"max-len": 0,
"consistent-return": 0
}
}

4
.github/CONTRIBUTING.md vendored
View File

@ -13,7 +13,7 @@ The following guidelines are about *How to avoid Homework Questions*.
### 1. Read the documentation. ### 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/anon/pen/pgdXYp?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. Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
@ -36,7 +36,7 @@ It is a good habit which will save maintainers' time. Thank you!
## Providing a demo while reporting a bug ## 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/anon/pen/pgdXYp?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 ## Tips about Feature Request

30
.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,25 +1,27 @@
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 :-) <!-- Issue Template For Chinese Users -->
If you are going to report a bug, please answer the following questions, thank you! <!-- 请按照下列格式报告问题，务必提供复现步骤，否则恕难解决，感谢您的支持。-->
## What you did #### 本地环境
(e.g. I ate a hamburger) <!-- 务必提供 -->
## What you would like to happen - antd 版本:
- 操作系统及其版本：
- 浏览器及其版本:
(e.g. I should be full) #### 你做了什么？
## What actually happened <!-- 引入 antd 了 Button -->
(e.g. But I am still hungry now T_T) #### 你期待的结果是：
## Online demo <!-- 像官网一样正常显示 -->
(e.g. http://codepen.io/anon/pen/pgdXYp?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)): <!-- 请修改并 Fork http://codepen.io/anon/pen/wGOWGW?editors=001 -->

7
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -2,6 +2,7 @@ First of all, thanks for your contribution! :-)
Please makes sure these boxes are checked before submitting your PR, thank you! Please makes sure these boxes are checked before submitting your PR, thank you!
[ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style. * [ ] Make sure you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
[ ] Rebase before creating a PR to keep commit history clear. * [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
[ ] Add some descriptions and refer relative issues for you PR. * [ ] Rebase before creating a PR to keep commit history clear.
* [ ] Add some descriptions and refer relative issues for you PR.

8
.gitignore vendored
View File

@ -21,7 +21,11 @@ node_modules/
npm-debug.log npm-debug.log
nohup.out nohup.out
_site _site
_data
dist dist
lib /lib
elasticsearch-* elasticsearch-*
config/base.yaml config/base.yaml
typings
components/**/*.js
components/**/*.jsx

9
.lesshintrc
View File

@ -8,5 +8,12 @@
"qualifyingElement": false, "qualifyingElement": false,
"duplicateProperty": false, "duplicateProperty": false,
"importPath": false, "importPath": false,
"finalNewline": false "finalNewline": false,
"excludedFiles": [
"components/layout/style/mixin.less",
"components/style/core/base.less",
"components/style/core/iconfont.less",
"components/style/core/normalize.less",
"components/style/mixins/compatibility.less"
]
} }

1
.travis.yml
View File

@ -3,5 +3,4 @@ sudo: false
language: node_js language: node_js
node_js: node_js:
- "4"
- "5" - "5"

6
404.html
View File

@ -1,6 +0,0 @@
<p>找不到此页，三秒后返回首页...</p>
<script>
setTimeout(function() {
location.href = '/';
}, 3000);
</script>

28
AUTHORS.txt
View File

@ -1,5 +1,8 @@
Benjy Cui <benjytrys@gmail.com> Benjy Cui <benjytrys@gmail.com>
Bernie <bernie.wangbj@gmail.com>
Bozhao <yubz86@gmail.com> Bozhao <yubz86@gmail.com>
Bruce Mitchener <bruce.mitchener@gmail.com>
Bruno Maia <bruno.mm.maia@gmail.com>
Cam Song <neosoyn@gmail.com> Cam Song <neosoyn@gmail.com>
Cee Cirno <i@cee.moe> Cee Cirno <i@cee.moe>
Daqi Song <dqaria@gmail.com> Daqi Song <dqaria@gmail.com>
@ -12,18 +15,31 @@ James <james@schoolshape.com>
KgTong <kgtong1992@gmail.com> KgTong <kgtong1992@gmail.com>
Leon Shi <superRaytin@163.com> Leon Shi <superRaytin@163.com>
MG12 <wuzhao.mail@gmail.com> MG12 <wuzhao.mail@gmail.com>
Ma Tianxiao <matx2215@outlook.com>
Marshall Chen <Juniors.fei@gmail.com>
Mr.Tone <vector@malubei.com>
Neverland <chenjiahan@buaa.edu.cn> Neverland <chenjiahan@buaa.edu.cn>
Pyiner <lijiuyang1992@gmail.com> Pyiner <lijiuyang1992@gmail.com>
Qiaosen Huang <joesonw@gmail.com>
RaoHai <surgesoft@gmail.com> RaoHai <surgesoft@gmail.com>
Sebastian Blade <blade254353074@hotmail.com>
ShiTengFei <shitengfei@goyoo.com>
SimaQ <sima.zhang1990@gmail.com> SimaQ <sima.zhang1990@gmail.com>
The Gitter Badger <badger@gitter.im> Wei Zhu <yesmeck@gmail.com>
Yuwei Ba <i@xiaoba.me> Yuwei Ba <i@xiaoba.me>
Zap <a124116186@qq.com> Zap <a124116186@qq.com>
afc163 <afc163@gmail.com> afc163 <afc163@gmail.com>
bang <sqibang@gmail.com>
bang88 <sqibang@gmail.com>
chencheng (云谦) <sorrycc@gmail.com> chencheng (云谦) <sorrycc@gmail.com>
ddcat1115 <ddcat1115@gmail.com>
devqin <devqin@gmail.com>
ecofe <150641329@qq.com>
elrrrrrrr <elrrrrrrr@gmail.com> elrrrrrrr <elrrrrrrr@gmail.com>
fengmk2 <m@fengmk2.com>
genie <genie88@163.com> genie <genie88@163.com>
haoxin <coderhaoxin@outlook.com> haoxin <coderhaoxin@outlook.com>
hi-caicai <hi@cai-cai.me>
ioldfish <fish.wangl@gmail.com> ioldfish <fish.wangl@gmail.com>
jiang <155259966@qq.com> jiang <155259966@qq.com>
kasinooya <kasinooya@gmail.com> kasinooya <kasinooya@gmail.com>
@ -31,24 +47,30 @@ leon.shi <superRaytin@163.com>
lgmcolin <gengmin.lgm@gmail.com> lgmcolin <gengmin.lgm@gmail.com>
lgmcolin <lgmcolin@gmail.com> lgmcolin <lgmcolin@gmail.com>
pizn <pizner@gmail.com> pizn <pizner@gmail.com>
plandem <plandem@gmail.com>
popomore <sakura9515@gmail.com> popomore <sakura9515@gmail.com>
qubaoming <qubaoming@didichuxing.com>
shelwin <wxfans@gmail.com> shelwin <wxfans@gmail.com>
shouyong <enlangs@163.com> shouyong <enlangs@163.com>
simaQ <sima.zhang1990@gmail.com> simaQ <sima.zhang1990@gmail.com>
snadn <snadn@snadn.cn>
sorrycc <sorrycc@gmail.com> sorrycc <sorrycc@gmail.com>
swindme <swindme@163.com>
tom <caolvchong@gmail.com> tom <caolvchong@gmail.com>
ustccjw <317713370@qq.com> ustccjw <317713370@qq.com>
warmhug <hualei5280@gmail.com> warmhug <hualei5280@gmail.com>
xiaoshuai <tangshuaiji@tangshuaijideMacBook-Pro.local> wizawu <wizawu@gmail.com>
yiminghe <yiminghe@gmail.com> yiminghe <yiminghe@gmail.com>
yubozhao <yubz86@gmail.com> yubozhao <yubz86@gmail.com>
yuche <i@yuche.me> yuche <i@yuche.me>
z <haig8@msn.com>
zack <zxyah@126.com>
zhangpc <zhangpc@tenxcloud.com> zhangpc <zhangpc@tenxcloud.com>
zhujun24 <zhujun87654321@gmail.com> zhujun24 <zhujun87654321@gmail.com>
zilong <jzlxiaohei@163.com> zilong <jzlxiaohei@163.com>
zinkey <yaya@uloveit.com.cn> zinkey <yaya@uloveit.com.cn>
低位 <zhujun87654321@gmail.com> 低位 <zhujun87654321@gmail.com>
偏右 <afc163@gmail.com> 偏右 <afc163@gmail.com>
唐帅佶 <tangshuaiji@tangshuaijideMacBook-Pro.local>
白羊座小葛 <abeyuhang@gmail.com> 白羊座小葛 <abeyuhang@gmail.com>
逸达 <dqaria@gmail.com> 逸达 <dqaria@gmail.com>
闲耘™ <hotoo.cn@gmail.com>

881
CHANGELOG.md
View File

@ -1,529 +1,410 @@
# 更新日志 ---
order: 3
title: 更新日志
toc: false
timeline: true
---
- category: 4 如果需要查看 `0.12.x` 及之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0)。
--- ---
## 0.12.8 ## 1.9.1
`2016-03-06` `2016-08-16`
- 新增 `heart` `calculator` 图标。 - 修复 Tabs 的 `type="editable-card"` 模式，activeKey 错误的问题。[#2725](https://github.com/ant-design/ant-design/issues/2725)
- Table 补充了 `showHeader` 和 `footer` 属性。 - 修复一个 Table 的样式兼容性问题。[#2723](https://github.com/ant-design/ant-design/issues/2723)
- Modal 补充了 `maskClosable` 属性。 - 更新 axure 部件库。[#2714](https://github.com/ant-design/ant-design/issues/2714)
- 修正一个 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 ## 1.9.0
`2016-03-03` `2016-08-15`
- 修正 Table 的 `rowSelect.onSelectAll` 的第三个参数 `deselectedRows` 为 `changeRows`，记录每次变化的列。 - Transfer 修复在火狐下 item 文案过长时只显示省略号的问题。[#2674](https://github.com/ant-design/ant-design/issues/2674)
- Input 修复 `autosize` 模式下特定场景中不能输入中文及光标定位不准的问题。[#2666](https://github.com/ant-design/ant-design/issues/2666) [#2239](https://github.com/ant-design/ant-design/issues/2239)
## 0.12.6 - Tabs 修复 `type="editable-card"` 模式下的 `children` 解析问题。[#2658](https://github.com/ant-design/ant-design/issues/2658)
- Radio 修复若干 less 硬编码问题。[#2424](https://github.com/ant-design/ant-design/issues/2424)
`2016-03-02` - Upload 的 rc-upload 依赖升级至 2.x，引入的变化有：
- 增加 `disabled` 属性。[#2645](https://github.com/ant-design/ant-design/issues/2645)
- 优化 Table 本地排序在 Chrome 下的稳定性问题。 - 取消上传时会自动 abort 上传请求。[#2571](https://github.com/ant-design/ant-design/issues/2571) [#2518](https://github.com/ant-design/ant-design/issues/2518)
- 修正 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 - Table
- filter 支持层级选择。 - 修复 spin 在可滚动区域的定位问题。[#2652](https://github.com/ant-design/ant-design/issues/2652)
- 支持行点击事件 `onRowClick`。 - 修复无数据时 提示样式错位的问题。[#2663](https://github.com/ant-design/ant-design/issues/2663)
- 支持多列的横向切换。[演示](http://ant.design/components/table/#demo-paging-columns) - Popover 修复设定 `getTooltipContainer` 后会导致内嵌 DatePicker 样式失效的问题。[#2675](https://github.com/ant-design/ant-design/issues/2675)
- 更换 `dataSource` 和变换页面时不再默认清除选择数据，你可以用 `selectedRowKeys` 手动控制。`原来默认清除的行为会触发一个数据更新的死循环，而且难以实现跨页选择。` - Modal 修复重复卸载组件导致的报错。[#2688](https://github.com/ant-design/ant-design/issues/2688)
- 支持固定表头。[演示](http://ant.design/components/table/#demo-fixed-header) - 升级 rc-slider 组件依赖。
- Tag 去除 `href` 属性，默认标签名从 `a` 改为 `span`。
- Timeline 支持指定 pending 节点的内容。 ## 1.8.0
- Tree
- 节点支持拖拽。 `2016-08-08`
- 支持动态控制节点展开与否。[演示](http://ant.design/components/tree/#demo-basic-controlled)
- 可以监听节点展开/关闭事件 `onExpand`。 - 修复可关闭 Tabs 组件只有一个 Tab 的时候报错的问题。[#2559](https://github.com/ant-design/ant-design/issues/2559)
- `onCheck` `onSelect` 参数调整。 - 修复 Datepicker 在 IE8 下关闭图标。[#2584](https://github.com/ant-design/ant-design/issues/2584)
- `onDataLoaded` 改为 `loadData`。 - Tags 支持自定义标签颜色。[#2585](https://github.com/ant-design/ant-design/issues/2585)
- 新增 drag&drop 相关属性： - TreeSelect 修复未找到内容时的样式。[9cee9f](https://github.com/ant-design/ant-design/commit/9cee9f103a4729572358206c81cba84e2fdc20f5)
- `onDragStart` - Modal 适配小屏幕。[#2597](https://github.com/ant-design/ant-design/issues/2597)
- `onDragEnter` - 修复了 Row 组件在同一行闭合会报错的问题。[#2603](https://github.com/ant-design/ant-design/issues/2603)
- `onDragOver` - Table 的 `rowSelection.onChange` 的参数 `selectedRows` 现在和 `selectedRowKeys` 保持一致。[#2566](https://github.com/ant-design/ant-design/issues/2603)
- `onDragLeave` - Checkbox 和 Radio 现在支持 `onClick` 属性。
- `onDrop`
- 新增 TreeNode 节点属性： ## 1.7.0
- `disableCheckbox`
- `isLeaf` `2016-07-30`
- Transfer 给 `onChange` 增加参数。[#972](https://github.com/ant-design/ant-design/issues/972)
友情提示 [Ant Design Mobile](http://mobile.ant.design) 已经发布。
- Table
- 现可以定义页头。[demo](http://ant.design/components/table#components-table-demo-bordered)
- 修复当 `rowKey` 为 `String` 时的报错问题。[#2500](https://github.com/ant-design/ant-design/issues/2500)
- 修复 `Table` 会修改 `dataSource` 里面的值的问题。[#2501](https://github.com/ant-design/ant-design/issues/2501)
- Form 现在不再需要显式传递 `form={this.props.form}`。
- 优化 Breadcrumb.Item 的 hover 效果。
- 优化 Progress 的动画效果。
- DatePicker - DatePicker
- 修复 RangePicker 开始结束日期相同的 bug。[#822](https://github.com/ant-design/ant-design/issues/822) - 优化清除按钮样式。
- 修复 `format` 对浮层不生效问题。[#917](https://github.com/ant-design/ant-design/issues/917) - 修复点击 `此刻` 时不触发 `onChange` 的问题。[#1902](https://github.com/ant-design/ant-design/issues/1902)
- TimePicker 修复一个 `value` 为 `null` 时没有进入受控模式的问题。 - Menu
- Upload - 修复子菜单中的 Item 被选中后，父级元素无样式变化的问题。[#2414](https://github.com/ant-design/ant-design/issues/2414)
- 可以用 `headers` 设置上传头部。 - 修复 Menu.Item disabled 后的样式问题。
- 新增上传图片卡片样式。[演示](http://ant.design/components/upload/#demo-picture-card) - TreeSelect
- Radio - treeNodes 可以设置是否可选。[#2401](https://github.com/ant-design/ant-design/issues/2401)
- 更换 Radio.Button 的展现样式。 - 修复多选模式下进行搜索会把已选项清掉的问题。[#2393](https://github.com/ant-design/ant-design/issues/2393)
- 可以设置 Radio.Button 的大小。 - 修复 TreeSelect 会修改原数据的问题。[#2459](https://github.com/ant-design/ant-design/issues/2459)
- Progress - 修复了 Select 组件 placeholder 溢出的问题。[#2480](https://github.com/ant-design/ant-design/pull/2480)
- `format` 属性现在支持自定义 function 的方式进行定义。[#893](https://github.com/ant-design/ant-design/issues/893) - 修复 Timeline.Item 无法自定义边框颜色的问题。[#2479](https://github.com/ant-design/ant-design/issues/2479)
- `format` 指定 string 和 React.Node 的方式被废弃。 - 修复 Spin 显示突兀的问题。[#2398](https://github.com/ant-design/ant-design/issues/2398)
- 支持 `style` 属性。[#895](https://github.com/ant-design/ant-design/issues/895) - 修复 Cascader 选项文字过长导致的样式问题。[#2515](https://github.com/ant-design/ant-design/issues/2515)
- message && notification 现在可以销毁。
- Button
- 小号 Button 的圆角调整为 `4px`。
- 修复 Button.Group disabled 后的样式问题。[#926](https://github.com/ant-design/ant-design/issues/926)
- BreadCrumb
- 移除 `router` 属性，无需设置。
- 修复一个链接参数不对的问题。
## 0.11.3 ## 1.6.5
`2016-01-19` `2016-07-16`
- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818) - 修复 Input 的 `value prop on input should not be null` 警告并且导致在表单中无法重置的问题。[#2335](https://github.com/ant-design/ant-design/issues/2335)
- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826) - 优化 FormItem 的布局实现，修复表单布局不支持响应式布局的问题。[#2305](https://github.com/ant-design/ant-design/issues/2305)
- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824) - 修复带时间的 DatePicker 的 onChange 触发逻辑。[#2399](https://github.com/ant-design/ant-design/issues/2399#issuecomment-232893146)
- 修复 Transfer 搜索功能失效的问题。 - 修复 Transfer 搜索后全选的问题。[#2396](https://github.com/ant-design/ant-design/issues/2396)
- 修复 DatePicker 的 MonthPicker 样式错乱的问题。 - 修复 Cascader 样式会被 ant-input 样式覆盖的问题。[#2400](https://github.com/ant-design/ant-design/issues/2400)
- 修复 RangePicker 时区无法设置的问题。[#837](https://github.com/ant-design/ant-design/issues/837) - 修复 Table 删除数据时导致当前页数溢出的问题。[#2301](https://github.com/ant-design/ant-design/pull/2301)
- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772) - 修复 resize 浏览器时 Affix 元素没有和原来的位置同步的问题。[#1987](https://github.com/ant-design/ant-design/issues/1987)
- 给 Affix 元素添加占位，修复固定时页面跳动的问题。
- 修复 Select combobox 模式会导致页面出现横向滚动条的问题。[#2353](https://github.com/ant-design/ant-design/issues/2353)
- 修复 Upload 组件已上传文件链接点击无效的问题。[#2331](https://github.com/ant-design/ant-design/issues/2331)
- 修复 Upload 上传过程中删除图片后的报错问题。[#2342](https://github.com/ant-design/ant-design/issues/2342)
## 0.11.2 ## 1.6.4
`2015-01-03` `2016-07-08`
- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。 - 修复组件在 react@15.2.0 下报 Unknown props 警告的问题。[#2258](https://github.com/ant-design/ant-design/issues/2258)
- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771) - `Table`
- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。 - 修复 filterDropDown 中内容未改变也会调用 onChange 的问题。[#2228](https://github.com/ant-design/ant-design/issues/2228)
- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu) - 修复设置 scroll.y 高度后导致内容无法对齐的问题。[#2227](https://github.com/ant-design/ant-design/issues/2227)
- `Form`
- 修复 `FormItem` 中带空格后缀的冒号替换问题，关联issue：[#1877](https://github.com/ant-design/ant-design/issues/1877)
- demo 优化。
- `Transfer`
- 修复重复 render 的问题，性能优化。[#2112](https://github.com/ant-design/ant-design/issues/2112)
- 优化搜索逻辑，修复搜索时未对特殊字符进行处理的问题。[#2260](https://github.com/ant-design/ant-design/issues/2260)
- 清除按钮样式优化。
- 修复 `Steps` 最后一步多余横线隐藏的问题。
- 修复 `Cascader` small size 样式下沉 1px，以及 hover/click 样式残缺的问题。[#2234](https://github.com/ant-design/ant-design/issues/2234)
- 修复 `RangePicker` 无清除按钮的问题。[#2252](https://github.com/ant-design/ant-design/issues/2252)
## 1.6.3
`2016-07-04`
- 修复 Transfer 的一个 unmount 的错误。[#2206](https://github.com/ant-design/ant-design/pull/2206)
- 修复了 Badge、Alert、Menu、Tag、Checkbox、Radio 组件的一些样式细节问题。
## 1.6.2
`2016-06-27`
- 修复 Table、Transfer 的样式错位问题。
- 修复 DatePicker 的一个样式问题。[#2182](https://github.com/ant-design/ant-design/issues/2182)
- 优化 Menu 的 hover 样式响应性能。
## 1.6.1
`2016-06-24`
- 回滚一个未完成的 DatePicker 时间选项改造效果。
## 1.6.0
`2016-06-24`
- 新增置顶组件 [BackTop](/components/back-top)。
- 全新的 [Spin](/components/spin) 样式。
- 给 `Modal.xxx` 系列方法添加了 `{ destory }` 的访问值，方便事后销毁。[#2110](https://github.com/ant-design/ant-design/issues/2110)
- Table 的 `rowKey` 属性支持直接使用字符串。[#2058](https://github.com/ant-design/ant-design/issues/2058)
- Table 增加 `column.filterDropdown` 属性用于自定义渲染筛选菜单的浮层。[#1736](https://github.com/ant-design/ant-design/issues/1736)
- 修复 Tooltip、Popover、Popconfirm 设置 `onVisibleChange` 后失效的问题。[#2134](https://github.com/ant-design/ant-design/issues/2134)
- 修复在 IE8 下 Checkbox 的勾样式变形的问题。[#2148](https://github.com/ant-design/ant-design/issues/2148)
- 优化 Checkbox、Radio 失效状态的文字颜色。[#2114](https://github.com/ant-design/ant-design/issues/2114)
- 优化 Checkbox、Radio 的默认边距过于拥挤的问题。[#2137](https://github.com/ant-design/ant-design/issues/2137)
- 优化 Pagination 在暗色背景下的样式。[#2126](https://github.com/ant-design/ant-design/issues/2126)
- 修复 Table 固定列时内容无法换行和高度对齐的问题，同时修复了一个 Chrome 下的表格内容错位问题。[#2130](https://github.com/ant-design/ant-design/issues/2130)
- 修复一个 Table 的 `rowSelection` 设为 null 时可能导致报错的问题。[#2127](https://github.com/ant-design/ant-design/issues/2127)
- 修复在 IE8 下点击 Table 选择框报错的问题。[#2154](https://github.com/ant-design/ant-design/issues/2154)
- 小幅优化了 Transfer 的渲染性能。[#2112](https://github.com/ant-design/ant-design/issues/2112)
- 将 DatePicker 的清除按钮从面板上移到外部输入框，解决用户容易误解为关闭的问题。[#1708](https://github.com/ant-design/ant-design/issues/1708)
- Upload 的 `onPreview` 现在没有 `file.url` 时也能生效。[#2163](https://github.com/ant-design/ant-design/issues/2163)
## 1.5.1
`2016-06-21`
- 修复一个 TypeScript 定义文件的语法错误。
- 修复 Table 固定表头高度和滚动条样式问题。
## 1.5.0
`2016-06-17`
- 升级 `rc-form` 到 0.17，支持 `getFieldProps('xx.yy')` 的写法，并支持单多选控件进行关联。[#](https://github.com/react-component/form/pull/21)
- Input 的 `addonBefore` 和 `addonAfter` 支持内嵌选择框。[#1927](https://github.com/ant-design/ant-design/issues/1927)
- 优化了两个 DatePicker 组成的时间范围选择演示的体验。
- 优化一个多个对话框的遮罩层高度的问题。[#2009](https://github.com/ant-design/ant-design/issues/2009)
- 优化 Table 的 `getCheckboxProps` 的调用次数。[#2086](https://github.com/ant-design/ant-design/issues/2086)
- 修复 Table 固定列时，表头无法左右滚动的问题。[#2068](https://github.com/ant-design/ant-design/issues/2068)
- 修复小型表格固定表头的样式。[#2023](https://github.com/ant-design/ant-design/issues/2023)
- 修复 Tabs 的 `tabPosition` 为左右时样式错位的问题。[#2046](https://github.com/ant-design/ant-design/issues/2046)
- 修复 RangePicker 的日期范围背景丢失的问题。
- 修复 Switch 失效状态下文字颜色太浅的问题。[#2051](https://github.com/ant-design/ant-design/issues/2051)
- 修复一个 Select 的 `disabled` 选项依然可以被移除的问题。[#2034](https://github.com/ant-design/ant-design/issues/2034)
- 修复官方站点在 IE 下的报错问题。
## 1.4.1
`2016-06-12`
- 修复一个展开 Tabs 会导致表格宽度溢出的问题。[#2013](https://github.com/ant-design/ant-design/issues/2013)
- 修复一个某些情况下表格布局被破坏的问题。
## 1.4.0
`2016-06-12`
此版本之后你可能会遇到 [#2030](https://github.com/ant-design/ant-design/issues/2030)，请使用 `react@15+` 或 `npm@3+`。
- `Input[type="textarea"]` 支持自动调整高度。 [#](http://ant.design/components/input#components-input-demo-autosize-textarea)
- `Breadcrumb`
- `nameRender` 新增 `route` 和 `params` 参数。 [#1999](https://github.com/ant-design/ant-design/issues/1999)
- `linkRender` 新增 `paths` 参数。
- 再次修复 `Table` 组件 `rowSelection.onChange` 与 `onRowClick` 冲突问题。 [#1470](https://github.com/ant-design/ant-design/issues/1470)
- 修复 `Form.Item` 中 `Input` 高度抖动问题。 [#1955](https://github.com/ant-design/ant-design/issues/1955)
- 修复高级搜索的 `ant-advanced-search-form` 样式丢失的问题。
## 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 - Table
- 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。 - 修复筛选为单选时仍旧展示多选框的问题。 [#1880](https://github.com/ant-design/ant-design/issues/1880)
- 更新 dataSource 时，选中项现在会被清空。 - 修复 fixed left 的固定列会覆盖 rowSelection 的 Checkbox 的问题。 [#1829](https://github.com/ant-design/ant-design/issues/1829)
- 修复一个全选框和禁用的选择项配合的问题。 - 升级 rc-table 依赖
- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。 - 修复了 fixed 列中数据重复展示以及一些错位问题。 [#1898](https://github.com/ant-design/ant-design/issues/1898)
- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。 - `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) 重构。
## 0.11.1 ## 1.2.1
`2015-12-29` `2016-05-27`
- 修复一个 Table 无法修改 pageSize 的问题。 - 修复一个 Select 组件的文字重复问题。
- 修复一个 Table 子表格展开的对齐问题。
- 修复一个 Chrome 下部分图标左侧切边的问题。
- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
## 0.11.0 ## 1.2.0
`2015-12-28` `2016-05-26`
- **移除默认加载的样式文件，样式现在需要独立加载。** - Input 组件的文档现在和 Form 分离。 [3c98d3](https://github.com/ant-design/ant-design/commit/3c98d3f80f4ec80066756adc3b4108141d4383ca)
- 按钮圆角调整为 `6px`。 - Affix
- Modal、Popconfirm、Table、TimePicker 支持国际化配置。 - 新增了 `onChange` 属性。当固定状态改变时回调 [#1777](https://github.com/ant-design/ant-design/issues/1777)
- 新增虚线型按钮。 - 找回了从 affixStyle 中走失的 `width` 属性，修复固定后错位的问题。[#1820](https://github.com/ant-design/ant-design/issues/1820)
- 新增 [通用搜索框](http://ant.design/components/form/#demo-search-input) 样式。 - Table
- 新增图片上传列表样式[演示](http://ant.design/components/upload/#demo-picture-style)。 - 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
- **部分设计资源开放 [下载](http://ant.design/spec/tools)，包括 Axure 组件库和 Iconfont 字体打包文件。** - 修复了当有列固定在左边时，选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
- 新增 [吊顶规范](http://ant.design/spec/layout/#demo-ceiling)。 - 修复了当 Checkbox 的 label 为数字 0 时， label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
- 组件演示页面增加锚点。 - 修复 Select combobox 模式下无法重置 `optionLabelProp` 的问题。[#1773](https://github.com/ant-design/ant-design/issues/1773)
- 新增穿梭框 [Transfer](http://ant.design/components/transfer/) 组件。 - 修复了 Tag 组件为 closeable 时，内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
- 新增小尺寸的 Switch 开关组件。 - Tab 组件新增 `hideAdd` 属性，用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
- 增加更多的图标。[#](https://github.com/ant-design/ant-design/commit/087c64649d73206a4d62e52f9b3f6042c1d28608#diff-dc1a1f4794c1c4ee3b083381d4c50c47R180) - 修复了一个在某些情况下找不到 `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#浏览器引入)
- 新增卡片组件 [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 - Select
- 选中样式进行了调整。 - 搜索框和单选选择框合并，以优化视觉和交互效果。
- 在标签/多选模式下，选中或删除选项增加了动画效果。 - 优化多选框的选中效果。
- Alert - Spin
- 默认样式不展示图标。 - 增加延时展示以优化体验。[#1273](https://github.com/ant-design/ant-design/issues/1273)
- 带描述的警告框图标改为描线图标。 - 增加 `tip` 属性用于定义加载文案。[#1046](https://github.com/ant-design/ant-design/issues/1046)
- `type="warn"` 图标修改。 - Steps
- Dropdown 新增带菜单触发的按钮 `Dropdown.Button`。[演示](http://ant.design/components/dropdown/#demo-dropdown-button) - 重构布局方式，以支持更灵活的自适应布局和优化了性能，并移除了 `maxDescriptionWidth` 属性。[#1099](https://github.com/ant-design/ant-design/issues/1099)
- Menu - 新增 `status` 属性以指定当前步骤状态，同时支持错误步骤的展示。[#1098](https://github.com/ant-design/ant-design/issues/1098)
- 新增 `Menu.ItemGroup` 用于把菜单项分组。 - Timeline
- onOpen 和 onClose 函数的参数新增了 `keyPath` 数据，可用于制作手风琴类型的菜单。 - 新增 `dot` 属性，可自定义时间轴点。
- Badge - 现在可以设置 `className` 和 `style` 的问题。
- 徽章可以独立使用。[演示](http://ant.design/components/badge/#demo-no-wrapper) - `color` 属性现在支持自定义色值。
- 支持设置封顶的 `99+` 的数字。[演示](http://ant.design/components/badge/#demo-overflow) - Tree
- Slider - 当子节点被选中时，自动展开父节点。
- 增加 `onAfterChange` 事件。[演示](http://ant.design/components/slider/#demo-event) - 新增 `checkStrictly` 属性，支持父子节点选中关系脱离。
- 现在设置 `tipFormatter={null}` 可以隐藏 `Tooltip`。 - Upload
- 双滑块拖动体验优化，一个滑块在拖动时可以直接跨过另一滑块。 - 在上传文件列表中的文件被删除时，将触发 `onRemove` 事件。[#1240](https://github.com/ant-design/ant-design/issues/1240)
- Breadcrumb 可以自定义分隔符。[演示](http://ant.design/components/breadcrumb/#demo-separator) - 增加 `onPreview` 支持文件的自定义预览方式。[#1240](https://github.com/ant-design/ant-design/issues/1240)
- Popconfirm 添加 `visible` 属性，使其可以控制是否显示。[演示](http://ant.design/components/popconfirm/#demo-dynamic-trigger) - `data` 属性支持设为一个函数，用于动态修改上传参数。[react-component/upload#32](https://github.com/react-component/upload/pull/32)
- 修复 Icon `ref` 引起的报错。 - Slider `marks` 现在支持 JSX 并可以单独设置某个标记的样式。
- 修复 Calendar 组件无法切换年/月的问题。[#757](https://github.com/ant-design/ant-design/issues/757) - Tag 的 `onClose` 可以使用 `e.preventDefault()` 阻止默认事件。[#1267](https://github.com/ant-design/ant-design/issues/1267)
- Checkbox 新增 `Checkbox.Group`，现可以方便的 [生成一组选择框](http://ant.design/components/checkbox/#demo-group) - Form.Item 在有多个 child 时也可以自动生成错误信息与校验状态，但一个 Form.Item 内仍然只能有一个表单控件。[#1287](https://github.com/ant-design/ant-design/issues/1287)
- Tabs - Input 新增 `onPressEnter` 属性监听回车事件。
- 新增 [卡片式页签](http://ant.design/components/tabs/#demo-card)。 - Table 现在可以通过 `filteredValue` `sortOrder` 控制筛选和排序的状态。[#971](https://github.com/ant-design/ant-design/issues/971)
- 调整 [新增和关闭页签](http://ant.design/components/tabs/#demo-editable-card) 的样式。 - Button 增加了 `icon` 属性。[#1199](https://github.com/ant-design/ant-design/issues/1199)
- 现在支持页签的四个位置 `tabPosition="top|right|bottom|left"`。 - SubMenu 增加 `onTitleClick` 属性。
- 移除 `animation` 属性，并在 `tabPosition="top|bottom"` 时默认启用切换动画。 - Affix 增加 `offsetBottm` 属性，支持固定在底部。[#1000](https://github.com/ant-design/ant-design/issues/1000)
- Timepicker
- **重命名为 TimePicker。**
- 新增 `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) ### 相关工具发布
--- - [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.10.5 ## 0.12.17
`2016-01-04` 去 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0) 查看 `0.12.x` 及之前的更新日志。
- 修复 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/) 和入门文档。

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT LICENSE MIT LICENSE
Copyright (c) 2015 Alipay.com, https://www.alipay.com/ Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
Permission is hereby granted, free of charge, to any person obtaining Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the a copy of this software and associated documentation files (the

26
README-zh_CN.md
View File

@ -11,9 +11,8 @@
## 特性 ## 特性
- 提炼和服务企业级中后台产品的交互语言和视觉风格。 - 提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。 - [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
- 基于 npm + webpack + babel 的工作流，支持 ES2015。 - 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。
## 安装 ## 安装
@ -31,7 +30,7 @@ ReactDOM.render(<DatePicker />, mountNode);
引入样式： 引入样式：
```jsx ```jsx
import 'antd/lib/index.css'; // or 'antd/style/index.less' import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
``` ```
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。 按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。
@ -43,18 +42,31 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less'
> [IE8 issues](https://github.com/xcatliu/react-ie8) > [IE8 issues](https://github.com/xcatliu/react-ie8)
## TypeScript
```js
///<reference path='./node_modules/antd/type-definitions/antd.d.ts'/>
...
```
## 链接 ## 链接
- [首页](http://ant.design/) - [首页](http://ant.design/)
- [React UI 库](http://ant.design/docs/react/introduce) - [React 实现](http://ant.design/#/docs/react/introduce)
- [修改记录](CHANGELOG.md) - [修改记录](CHANGELOG.md)
- [开发脚手架](https://github.com/ant-design/antd-init/) - [开发脚手架](https://github.com/ant-design/antd-init/)
- [开发工具文档](http://ant-tool.github.io/) - [开发工具文档](http://ant-tool.github.io/)
- [React 组件](http://react-component.github.io/) - [React 基础组件](http://react-component.github.io/)
- [移动端组件](http://mobile.ant.design)
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md) - [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/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%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) - [版本发布手册](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/anon/pen/wGOWGW?editors=001)
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
## 如何贡献 ## 如何贡献

66
README.md
View File

@ -8,10 +8,14 @@
An enterprise-class UI design language and React-based implementation. 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 ## Features
- An enterprise-class design language and high quality UI style. - An enterprise-class design language and high quality UI.
- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/). - Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html). - A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).
## Install ## Install
@ -20,20 +24,44 @@ An enterprise-class UI design language and React-based implementation.
npm install antd npm install antd
``` ```
## Usage example ## Usage
### Use prebuilt bundle
```jsx ```jsx
import { DatePicker } from 'antd'; import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode); ReactDOM.render(<DatePicker />, mountNode);
``` ```
Import style: And import style manually:
```jsx ```jsx
import 'antd/lib/index.css'; // or 'antd/style/index.less' import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
``` ```
Use components on demand by writing as `import DatePicker from 'antd/lib/date-picker'` or use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd). ### Use modularized antd
- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended)
```js
// .babelrc
{
"plugins": [["antd", { style: "css" }]]
}
```
Then you can import components from antd directly.
```jsx
// 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
```
## Browser Support ## Browser Support
@ -42,21 +70,37 @@ Normal browsers and Internet Explorer 8+.
> [IE8 issues](https://github.com/xcatliu/react-ie8) > [IE8 issues](https://github.com/xcatliu/react-ie8)
## TypeScript
tsconfig.json
```
{
"compilerOptions": {
"moduleResolution": "node",
"jsx": "preserve"
}
}
```
## Links ## Links
- [Home page](http://ant.design/) - [Home page](http://ant.design/)
- [React UI library](http://ant.design/docs/react/introduce) - [React UI page](http://ant.design/#/docs/react/introduce)
- [ChangeLog](CHANGELOG.md) - [ChangeLog](CHANGELOG.md)
- [Scaffold tool](https://github.com/ant-design/antd-init/) - [Scaffold tool](https://github.com/ant-design/antd-init/)
- [Development tool](http://ant-tool.github.io/) - [Development tool](http://ant-tool.github.io/)
- [React components](http://react-component.github.io/) - [React components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md) - [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) - [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/%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) - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [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) - [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)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ) - [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
## Contributing ## Contributing
We welcome all contributions, please submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues). We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)

24
components/_util/isCssAnimationSupported.tsx Normal file
View File

@ -0,0 +1,24 @@
let animation;
function isCssAnimationSupported() {
if (animation !== undefined) {
return animation;
}
const domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
const elm = document.createElement('div');
if (elm.style.animationName !== undefined) {
animation = true;
}
if (animation !== undefined) {
for (let i = 0; i < domPrefixes.length; i++) {
if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
animation = true;
break;
}
}
}
animation = animation || false;
return animation;
}
export default isCssAnimationSupported;

36
components/_util/openAnimation.tsx Normal file
View File

@ -0,0 +1,36 @@
import cssAnimation from 'css-animation';
function animate(node, show, done) {
let height;
return cssAnimation(node, 'ant-motion-collapse', {
start() {
if (!show) {
node.style.height = `${node.offsetHeight}px`;
} else {
height = node.offsetHeight;
node.style.height = 0;
}
},
active() {
node.style.height = `${show ? height : 0}px`;
},
end() {
node.style.height = '';
done();
},
});
}
const animation = {
enter(node, done) {
return animate(node, true, done);
},
leave(node, done) {
return animate(node, false, done);
},
appear(node, done) {
return animate(node, true, done);
},
};
export default animation;

12
components/_util/splitObject.tsx Normal file
View File

@ -0,0 +1,12 @@
export default function splitObject(obj, parts): Array<any> {
let left = {};
let right = {};
Object.keys(obj).forEach((k) => {
if (parts.indexOf(k) !== -1) {
left[k] = obj[k];
} else {
right[k] = obj[k];
}
});
return [left, right];
}

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

@ -1,17 +1,24 @@
# 基本 ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
- order: 0 ## zh-CN
最简单的用法。 最简单的用法。
--- ## en-US
The simplest usage.
````jsx ````jsx
import { Affix, Button } from 'antd'; import { Affix, Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<Affix> <Affix>
<Button type="primary">固定在顶部</Button> <Button type="primary">Affix top</Button>
</Affix> </Affix>
, mountNode); , mountNode);
```` ````

24
components/affix/demo/bottom.md Normal file
View File

@ -0,0 +1,24 @@
---
order: 2
title:
zh-CN: 下方固定
en-US: Bottom
---
## zh-CN
固定在屏幕下方。
## en-US
Affix to bottom.
````jsx
import { Affix, Button } from 'antd';
ReactDOM.render(
<Affix offsetBottom={20}>
<Button type="primary">20px to affix bottom</Button>
</Affix>
, mountNode);
````

17
components/affix/demo/offset.md
View File

@ -1,17 +1,24 @@
# 偏移 ---
order: 1
title:
zh-CN: 偏移
en-US: Offset
---
- order: 1 ## zh-CN
达到一定的偏移量才触发。 达到一定的偏移量才触发。
--- ## en-US
Affix element according to offset value.
````jsx ````jsx
import { Affix, Button } from 'antd'; import { Affix, Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<Affix offset={75}> <Affix offsetTop={75}>
<Button type="primary">固定在距离顶部 75px 的位置</Button> <Button type="primary">75px to affix top</Button>
</Affix> </Affix>
, mountNode); , mountNode);
```` ````

24
components/affix/demo/on-change.md Normal file
View File

@ -0,0 +1,24 @@
---
order: 3
title:
zh-CN: 固定状态改变的回调
en-US: Callback
---
## zh-CN
可以获得是否固定的状态。
## en-US
Callback with affixed state.
````jsx
import { Affix, Button } from 'antd';
ReactDOM.render(
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
<Button>120px to affix top</Button>
</Affix>
, mountNode);
````

21
components/affix/index.en-US.md Normal file
View File

@ -0,0 +1,21 @@
---
category: Components
type: Other
english: Affix
---
Make an element sticky to viewport.
## When to use
When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions.
Please note that Affix should not cover other content in page, especially when the size of 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) | - |

109
components/affix/index.jsx
View File

@ -1,109 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import rcUtil from 'rc-util';
import classNames from 'classnames';
function getScroll(w, top) {
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
let method = `scroll${top ? 'Top' : 'Left'}`;
if (typeof ret !== 'number') {
let 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) {
let rect = element.getBoundingClientRect();
let body = document.body;
let clientTop = element.clientTop || body.clientTop || 0;
let clientLeft = element.clientLeft || body.clientLeft || 0;
let scrollTop = getScroll(window, true);
let scrollLeft = getScroll(window);
return {
top: rect.top + scrollTop - clientTop,
left: rect.left + scrollLeft - clientLeft
};
}
let Affix = React.createClass({
getDefaultProps() {
return {
offset: 0
};
},
propTypes: {
offset: React.PropTypes.number
},
getInitialState() {
return {
affix: false,
affixStyle: null
};
},
handleScroll() {
let affix = this.state.affix;
let scrollTop = getScroll(window, true);
let elemOffset = getOffset(ReactDOM.findDOMNode(this));
if (!affix && (elemOffset.top - this.props.offset) < scrollTop) {
this.setState({
affix: true,
affixStyle: {
top: this.props.offset,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth
}
});
}
if (affix && (elemOffset.top - this.props.offset) > scrollTop) {
this.setState({
affix: false,
affixStyle: null
});
}
},
componentDidMount() {
this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll);
this.resizeEvent = rcUtil.Dom.addEventListener(window, 'resize', this.handleScroll);
},
componentWillUnmount() {
if (this.scrollEvent) {
this.scrollEvent.remove();
}
if (this.resizeEvent) {
this.resizeEvent.remove();
}
},
render() {
const className = classNames({
[this.props.className]: this.props.className,
'ant-affix': this.state.affix
});
return (
<div {...this.props}>
<div className={className} style={this.state.affixStyle}>
{this.props.children}
</div>
</div>
);
}
});
module.exports = Affix;

192
components/affix/index.tsx Normal file
View File

@ -0,0 +1,192 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import classNames from 'classnames';
import warning from 'warning';
import assign from 'object-assign';
import shallowequal from 'shallowequal';
function getScroll(w, top?: boolean) {
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,
};
}
// Affix
export interface AffixProps {
/**
* 距离窗口顶部达到指定偏移量后触发
*/
offsetTop?: number;
offset?: number;
offsetBottom?: number;
style?: React.CSSProperties;
onChange?: (affixed?: boolean) => any;
}
export default class Affix extends React.Component<AffixProps, any> {
static propTypes = {
offsetTop: React.PropTypes.number,
offsetBottom: React.PropTypes.number,
};
static defaultProps = {
onChange() {},
};
scrollEvent: any;
resizeEvent: any;
refs: {
[key: string]: any;
fixedNode: HTMLElement;
};
constructor(props) {
super(props);
this.state = {
affixStyle: null,
placeholderStyle: null,
};
}
setAffixStyle(e, affixStyle) {
const originalAffixStyle = this.state.affixStyle;
if (e.type === 'scroll' && originalAffixStyle && affixStyle) {
return;
}
if (shallowequal(affixStyle, originalAffixStyle)) {
return;
}
this.setState({ affixStyle }, () => {
const affixed = !!this.state.affixStyle;
if ((affixStyle && !originalAffixStyle) ||
(!affixStyle && originalAffixStyle)) {
this.props.onChange(affixed);
}
});
}
setPlaceholderStyle(e, placeholderStyle) {
const originalPlaceholderStyle = this.state.placeholderStyle;
if (e.type === 'resize') {
return;
}
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
return;
}
this.setState({ placeholderStyle });
}
handleScroll = (e) => {
let { offsetTop, offsetBottom, offset } = this.props;
// Backwards support
offsetTop = offsetTop || offset;
const scrollTop = getScroll(window, true);
const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
const fixedNode = ReactDOM.findDOMNode(this.refs.fixedNode) as HTMLElement;
const elemOffset = getOffset(affixNode);
const elemSize = {
width: fixedNode.offsetWidth,
height: fixedNode.offsetHeight,
};
const offsetMode = {
top: null as boolean,
bottom: null as boolean,
};
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
this.setAffixStyle(e, {
position: 'fixed',
top: offsetTop,
left: elemOffset.left,
width: affixNode.offsetWidth,
});
this.setPlaceholderStyle(e, {
width: affixNode.offsetWidth,
height: affixNode.offsetHeight,
});
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
offsetMode.bottom) {
// Fixed Bottom
this.setAffixStyle(e, {
position: 'fixed',
bottom: offsetBottom,
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() {
warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.');
this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
this.resizeEvent = 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,
});
const props = assign({}, this.props);
delete props.offsetTop;
delete props.offsetBottom;
return (
<div {...props} style={this.state.placeholderStyle}>
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
{this.props.children}
</div>
</div>
);
}
}

14
components/affix/index.md → components/affix/index.zh-CN.md
View File

@ -1,8 +1,8 @@
# Affix ---
category: Components
- category: Components chinese: 固钉
- chinese: 固钉 type: Other
english: Affix
--- ---
将页面元素钉在可视范围。 将页面元素钉在可视范围。
@ -18,4 +18,6 @@
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------| |-------------|----------------|--------------------|--------------|
| offset | 达到指定偏移量后触发 | Number | 0 | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |

6
components/affix/style/index.less Normal file
View File

@ -0,0 +1,6 @@
@import "../../style/themes/default";
.ant-affix {
position: fixed;
z-index: @zindex-affix;
}

2
components/affix/style/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

26
components/alert/demo/banner.md Normal file
View File

@ -0,0 +1,26 @@
---
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);
````

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

@ -1,14 +1,22 @@
# 基本 ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
- order: 0 ## zh-CN
最简单的用法，适用于简短的警告提示。 最简单的用法，适用于简短的警告提示。
--- ## en-US
The simplest usage for short messages.
````jsx ````jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render(<Alert message="成功提示的文案" type="success" /> ReactDOM.render(
<Alert message="Success Text" type="success" />
, mountNode); , mountNode);
```` ````

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

@ -1,27 +1,36 @@
# 可关闭的警告提示 ---
order: 2
title:
zh-CN: 可关闭的警告提示
en-US: Closable
---
- order: 2 ## zh-CN
显示关闭按钮，点击可关闭警告提示。 显示关闭按钮，点击可关闭警告提示。
--- ## en-US
To show close button.
````jsx ````jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
const onClose = function (e) { const onClose = function (e) {
console.log(e, '我要被关闭啦！'); console.log(e, 'I was closed.');
}; };
ReactDOM.render(<div> ReactDOM.render(<div>
<Alert message="警告提示的文案" <Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warn" type="warning"
closable closable
onClose={onClose} /> onClose={onClose}
<Alert message="错误提示的文案" />
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍" <Alert message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
type="error" type="error"
closable closable
onClose={onClose} /> onClose={onClose}
/>
</div>, mountNode); </div>, mountNode);
```` ````

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

@ -1,15 +1,22 @@
# 自定义关闭 ---
order: 5
title:
zh-CN: 自定义关闭
en-US: Customized Close Text
---
- order: 5 ## zh-CN
可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。 可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
--- ## en-US
Replace the default icon with customized text.
````jsx ````jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render( ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText="不再提醒" /> <Alert message="Info Text" type="info" closeText="Close Now" />
, mountNode); , mountNode);
```` ````

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

@ -1,28 +1,41 @@
# 含有辅助性文字介绍 ---
order: 3
title:
zh-CN: 含有辅助性文字介绍
en-US: Description
---
- order: 3 ## zh-CN
含有辅助性文字介绍的警告提示。 含有辅助性文字介绍的警告提示。
--- ## en-US
Additional description for alert message.
````jsx ````jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render(<div> ReactDOM.render(<div>
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success" />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" />
<Alert <Alert
message="警告提示的文案" message="Success Text"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍" description="Success Description Success Description Success Description"
type="warn" /> type="success"
/>
<Alert <Alert
message="错误提示的文案" message="Info Text"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍" description="Info Description Info Description Info Description Info Description"
type="error" /> 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"
/>
</div>, mountNode); </div>, mountNode);
```` ````

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

@ -1,10 +1,17 @@
# 图标 ---
order: 4
title:
zh-CN: 图标
en-US: Icon
---
- order: 4 ## zh-CN
可口的图标让信息类型更加醒目。 可口的图标让信息类型更加醒目。
--- ## en-US
Decent icon make information more clear and more friendly.
````jsx ````jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
@ -12,25 +19,31 @@ import { Alert } from 'antd';
ReactDOM.render(<div> ReactDOM.render(<div>
<Alert message="成功提示的文案" type="success" showIcon /> <Alert message="成功提示的文案" type="success" showIcon />
<Alert message="消息提示的文案" type="info" showIcon /> <Alert message="消息提示的文案" type="info" showIcon />
<Alert message="警告提示的文案" type="warn" showIcon /> <Alert message="警告提示的文案" type="warning" showIcon />
<Alert message="错误提示的文案" type="error" showIcon /> <Alert message="错误提示的文案" type="error" showIcon />
<Alert message="成功提示的文案" <Alert
message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍" description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success" type="success"
showIcon /> showIcon
<Alert message="消息提示的文案" />
<Alert
message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍" description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" type="info"
showIcon /> showIcon
/>
<Alert <Alert
message="警告提示的文案" message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍" description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warn" type="warning"
showIcon /> showIcon
/>
<Alert <Alert
message="错误提示的文案" message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍" description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error" type="error"
showIcon /> showIcon
/>
</div>, mountNode); </div>, mountNode);
```` ````

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

@ -1,19 +1,25 @@
# 四种样式
- order: 1
共有四种样式`success`、`info`、`warn`、`error`。
--- ---
order: 1
title:
zh-CN: 四种样式
en-US: More types
---
## zh-CN
共有四种样式 `success`、`info`、`warning`、`error`。
## en-US
There are 4 kinds of Alert: `success`, `info`, `warning`, `error`.
````jsx ````jsx
import { Alert } from 'antd'; import { Alert } from 'antd';
ReactDOM.render(<div> ReactDOM.render(<div>
<Alert message="成功提示的文案" type="success" /> <Alert message="Success Text" type="success" />
<Alert message="消息提示的文案" type="info" /> <Alert message="Info Text" type="info" />
<Alert message="警告提示的文案" type="warn" /> <Alert message="Warning Text" type="warning" />
<Alert message="错误提示的文案" type="error" /> <Alert message="Error Text" type="error" />
</div>, </div>, mountNode);
mountNode);
```` ````

25
components/alert/index.en-US.md Normal file
View File

@ -0,0 +1,25 @@
---
category: Components
type: Views
english: Alert
---
Alert component for feedback.
## When to use
- When you need to show alert messages for users.
- When you need a persist static container, and 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 |

26
components/alert/index.md
View File

@ -1,26 +0,0 @@
# Alert
- category: Components
- chinese: 警告提示
- type: 展示
---
警告提示，展现需要关注的信息。
## 何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- |-------|
| type | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` | String | 无 |
| closable | 可选参数，默认不显示关闭按钮 | Boolean | 无 |
| closeText | 可选参数，自定义关闭按钮 | React.Node | 无 |
| message | 必选参数，警告提示内容 | React.Node | 无 |
| description | 可选参数，警告提示的辅助性文字介绍 | React.Node | 无 |
| onClose | 可选参数，关闭时触发的回调函数 | Function | 无 |
| showIcon | 可选参数，是否显示辅助图标 | Boolean | false |

85
components/alert/index.jsx → components/alert/index.tsx
View File

@ -1,47 +1,74 @@
import React from 'react'; import * as React from 'react';
import ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import Animate from 'rc-animate'; import Animate from 'rc-animate';
import Icon from '../icon'; import Icon from '../icon';
import classNames from 'classnames'; import classNames from 'classnames';
export default React.createClass({ interface AlertProps {
getDefaultProps() { /**
return { * Type of Alert styles, options:`success`, `info`, `warning`, `error`
prefixCls: 'ant-alert', */
showIcon: false, type?: 'success' | 'info' | 'warning' | 'error';
onClose() {} /** Whether Alert can be closed */
}; closable?: boolean;
}, /** Close text to show */
getInitialState() { closeText?: React.ReactNode;
return { /** Content of Alert */
message: React.ReactNode;
/** Additional content of Alert */
description?: React.ReactNode;
/** Callback when close Alert */
onClose?: (event) => void;
/** Whether to show icon */
showIcon?: boolean;
style?: React.CSSProperties;
prefixCls?: string;
banner?: boolean;
}
export default class Alert extends React.Component<AlertProps, any> {
static defaultProps = {
prefixCls: 'ant-alert',
showIcon: false,
onClose() {},
type: 'info',
};
constructor(props) {
super(props);
this.state = {
closing: true, closing: true,
closed: false closed: false,
}; };
}, }
handleClose(e) { handleClose = (e) => {
e.preventDefault(); e.preventDefault();
let dom = ReactDOM.findDOMNode(this); let dom = ReactDOM.findDOMNode(this) as HTMLElement;
dom.style.height = `${dom.offsetHeight}px`; dom.style.height = `${dom.offsetHeight}px`;
// Magic code // Magic code
// 重复一次后才能正确设置 height // 重复一次后才能正确设置 height
dom.style.height = `${dom.offsetHeight}px`; dom.style.height = `${dom.offsetHeight}px`;
this.setState({ this.setState({
closing: false closing: false,
}); });
this.props.onClose.call(this, e); this.props.onClose(e);
}, }
animationEnd() { animationEnd = () => {
this.setState({ this.setState({
closed: true, closed: true,
closing: true closing: true,
}); });
}, }
render() { render() {
let { let {
closable, description, type, prefixCls, message, closeText, showIcon closable, description, type, prefixCls, message, closeText, showIcon, banner,
} = this.props; } = this.props;
// banner模式默认有 Icon
showIcon = showIcon || banner;
// banner模式默认为警告
type = banner ? 'warning' : type;
let iconType = ''; let iconType = '';
switch (type) { switch (type) {
case 'success': case 'success':
@ -51,9 +78,9 @@ export default React.createClass({
iconType = 'info-circle'; iconType = 'info-circle';
break; break;
case 'error': case 'error':
iconType = 'exclamation-circle'; iconType = 'cross-circle';
break; break;
case 'warn': case 'warning':
iconType = 'exclamation-circle'; iconType = 'exclamation-circle';
break; break;
default: default:
@ -71,6 +98,7 @@ export default React.createClass({
[`${prefixCls}-close`]: !this.state.closing, [`${prefixCls}-close`]: !this.state.closing,
[`${prefixCls}-with-description`]: !!description, [`${prefixCls}-with-description`]: !!description,
[`${prefixCls}-no-icon`]: !showIcon, [`${prefixCls}-no-icon`]: !showIcon,
[`${prefixCls}-banner`]: !!banner,
}); });
// closeable when closeText is assigned // closeable when closeText is assigned
@ -81,8 +109,9 @@ export default React.createClass({
return this.state.closed ? null : ( return this.state.closed ? null : (
<Animate component="" <Animate component=""
showProp="data-show" showProp="data-show"
transitionName="slide-up" transitionName={`${prefixCls}-slide-up`}
onEnd={this.animationEnd}> onEnd={this.animationEnd}
>
<div data-show={this.state.closing} className={alertCls}> <div data-show={this.state.closing} className={alertCls}>
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null} {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
<span className={`${prefixCls}-message`}>{message}</span> <span className={`${prefixCls}-message`}>{message}</span>
@ -94,4 +123,4 @@ export default React.createClass({
</Animate> </Animate>
); );
} }
}); }

27
components/alert/index.zh-CN.md Normal file
View File

@ -0,0 +1,27 @@
---
category: Components
chinese: 警告提示
type: Views
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 |
| banner | 是否用作顶部公告 | Boolean | false |

67
style/components/alert.less → components/alert/style/index.less
View File

@ -1,22 +1,25 @@
@import "../mixins/index"; @import "../../style/themes/default";
@alert-prefix-cls: ~"@{css-prefix}alert"; @alert-prefix-cls: ant-alert;
@alert-title-prefix-cls: ~"@{css-prefix}alert-with-description";
.@{alert-prefix-cls} { .@{alert-prefix-cls} {
position: relative; position: relative;
padding: 8px 8px 8px 16px; padding: 8px 48px 8px 38px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
color: @text-color; color: @text-color;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin-bottom: 10px; margin-bottom: 10px;
&&-no-icon {
padding: 8px 48px 8px 16px;
}
&-icon { &-icon {
margin-right: 8px;
font-size: 14px; font-size: 14px;
top: 1px; top: 9px;
position: relative; left: 16px;
position: absolute;
} }
&-description { &-description {
@ -42,7 +45,7 @@
} }
} }
&-warn { &-warning {
border: 1px solid tint(@warning-color, 80%); border: 1px solid tint(@warning-color, 80%);
background-color: tint(@warning-color, 90%); background-color: tint(@warning-color, 90%);
.@{alert-prefix-cls}-icon { .@{alert-prefix-cls}-icon {
@ -62,8 +65,7 @@
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 50%; top: 10px;
margin-top: -6px;
height: 12px; height: 12px;
line-height: 12px; line-height: 12px;
overflow: hidden; overflow: hidden;
@ -122,14 +124,49 @@
display: block; display: block;
} }
&-close { &&-close {
height: 0; height: 0 !important;
opacity: 0;
margin: 0; margin: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
transition: all .3s @ease-in-out; transition: all .3s @ease-in-out-circ;
transform-origin: 50% 0; transform-origin: 50% 0;
animation-timing-function: @ease-in-out !important; }
&-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);
} }
} }

2
components/alert/style/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

45
components/auto-complete/demo/basic.md Normal file
View File

@ -0,0 +1,45 @@
---
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';
const Complete = React.createClass({
getInitialState() {
return {
dataSource: [],
};
},
handleChange(value) {
this.setState({
dataSource: [
value,
value + value,
value + value + value,
],
});
},
render() {
const { dataSource } = this.state;
return (<AutoComplete
dataSource={dataSource}
style={{ width: 200 }}
onChange={this.handleChange}
/>);
},
});
ReactDOM.render(<Complete />, mountNode);
````

50
components/auto-complete/demo/options.md Normal file
View File

@ -0,0 +1,50 @@
---
order: 2
title:
zh-CN: 自定义选项
en-US: Customized
---
## zh-CN
Datasource 的每一项是一个 `AutoComplete.Option`。通过 `AutoComplete.Option` 自定义下拉菜单。
## en-US
Items in dataSource could be an `AutoComplete.Option`.
````jsx
import { AutoComplete } from 'antd';
const Option = AutoComplete.Option;
const Complete = React.createClass({
getInitialState() {
return {
dataSource: [],
};
},
handleChange(value) {
let dataSource;
if (!value || value.indexOf('@') >= 0) {
dataSource = [];
} else {
dataSource = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
const email = `${value}@${domain}`;
return <Option key={email}>{email}</Option>;
});
}
this.setState({ dataSource });
},
render() {
const { dataSource } = this.state;
return (<AutoComplete
style={{ width: 200 }}
dataSource={dataSource}
onChange={this.handleChange}
/>);
},
});
ReactDOM.render(<Complete />, mountNode);
````

30
components/auto-complete/index.en-US.md Normal file
View File

@ -0,0 +1,30 @@
---
category: Components
chinese: 自动完成
type: Form Controls
cols: 1
english: AutoComplete
---
Autocomplete function of input field.
## When to use
When need to use autocomplete function.
## API
```jsx
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
| Property | Description | Type | Default |
|----------------|----------------------------------|------------|--------|
| dataSource | Data source for autocomplete | Array | |
| value | selcted 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 in combobox mode | function(value, label) | - |
| disabled | Whether disabled select | boolean | false |

71
components/auto-complete/index.tsx Normal file
View File

@ -0,0 +1,71 @@
import * as React from 'react';
import Select, { Option, OptGroup } from '../select';
import classNames from 'classnames';
export interface AutoCompleteProps {
size?: string;
className?: string;
notFoundContent?: Element;
dataSource: Array<any>;
prefixCls?: string;
transitionName?: string;
optionLabelProp?: string;
choiceTransitionName?: string;
showSearch?: boolean;
}
export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
static Option = Option;
static OptGroup = OptGroup;
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,
} = this.props;
const cls = classNames({
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
[className]: !!className,
[`${prefixCls}-show-search`]: true,
});
const options = dataSource ? dataSource.map((item, index) => {
switch (typeof item) {
case 'string':
return <Option key={item}>{item}</Option>;
case 'object':
if (React.isValidElement(item)) {
return React.cloneElement(item, {
key: item.key || index,
});
}
return <Option key={item.value}>{item.text}</Option>;
default:
return [];
}
}) : [];
return (
<Select {...this.props}
className={cls}
optionLabelProp={optionLabelProp}
combobox
notFoundContent={notFoundContent} >
{options}
</Select>
);
}
}

30
components/auto-complete/index.zh-CN.md Normal file
View File

@ -0,0 +1,30 @@
---
category: Components
chinese: 自动完成
type: Form Controls
cols: 1
english: AutoComplete
---
输入框自动完成功能。
## 何时使用
需要自动完成时。
## API
```jsx
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------|
| 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 变化（combobox 模式下）时，调用此函数 | function(value) | 无 |
| disabled | 是否禁用 | boolean | false |

2
components/auto-complete/style/index.less Normal file
View File

@ -0,0 +1,2 @@
@import "../../style/themes/default";
@import "../../select/style/index";

2
components/auto-complete/style/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

25
components/back-top/demo/basic.md Normal file
View File

@ -0,0 +1,25 @@
---
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 />
向下滚动后，见右下角灰色按钮
</div>
, mountNode);
````

39
components/back-top/demo/custom.md Normal file
View File

@ -0,0 +1,39 @@
---
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';
const style = {
height: 40,
width: 40,
lineHeight: '40px',
borderRadius: 4,
backgroundColor: '#57c5f7',
color: '#fff',
textAlign: 'center',
fontSize: 20,
};
ReactDOM.render(
<div>
<BackTop style={{ bottom: 100 }}>
<div style={style}>UP</div>
</BackTop>
向下滚动后，见右下角蓝色按钮
</div>
, mountNode);
````

25
components/back-top/index.en-US.md Normal file
View File

@ -0,0 +1,25 @@
---
category: Components
type: Other
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 | -

110
components/back-top/index.tsx Normal file
View File

@ -0,0 +1,110 @@
import * as React from 'react';
import Animate from 'rc-animate';
import Icon from '../icon';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import classNames from 'classnames';
import omit from 'object.omit';
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;
}
interface BackTopProps {
visibilityHeight?: number;
onClick?: (event) => void;
prefixCls?: string;
className?: string;
}
export default class BackTop extends React.Component<BackTopProps, any> {
static defaultProps = {
onClick() {},
visibilityHeight: 400,
prefixCls: 'ant-back-top',
};
scrollEvent: any;
constructor(props) {
super(props);
const scrollTop = getScroll(window, true);
this.state = {
visible: scrollTop > this.props.visibilityHeight,
};
}
scrollToTop = (e) => {
if (e) {
e.preventDefault();
}
this.setScrollTop(0);
this.props.onClick(e);
}
setScrollTop(value) {
document.body.scrollTop = value;
document.documentElement.scrollTop = value;
}
handleScroll = () => {
const scrollTop = getScroll(window, true);
this.setState({
visible: scrollTop > this.props.visibilityHeight,
});
}
componentDidMount() {
this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
}
componentWillUnmount() {
if (this.scrollEvent) {
this.scrollEvent.remove();
}
}
render() {
const { prefixCls, className, children } = this.props;
const classString = classNames({
[prefixCls]: true,
[className]: !!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',
]);
return (
<Animate component="" transitionName="fade">
{
this.state.visible ?
<div {...divProps} className={classString} onClick={this.scrollToTop}>
{children || defaultElement}
</div>
: null
}
</Animate>
);
}
}

24
components/back-top/index.zh-CN.md Normal file
View File

@ -0,0 +1,24 @@
---
category: Components
type: Other
chinese: 回到顶部
english: BackTop
---
返回页面顶部的操作按钮。
## 何时使用
- 当页面内容区域比较长时；
- 当用户需要频繁返回顶部查看相关内容时。
## API
> 有默认样式，距离底部 `50px`，可覆盖。
> 自定义样式宽高不大于 40px * 40px。
| 参数 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 |
| onClick | 点击按钮的回调函数 | Function | - |

2
components/back-top/style/index.js Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

33
components/back-top/style/index.less Normal file
View File

@ -0,0 +1,33 @@
@import "../../style/themes/default";
@backtop-prefix-cls: ant-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;
}
}

93
components/badge/ScrollNumber.jsx → components/badge/ScrollNumber.tsx
View File

@ -1,21 +1,54 @@
import React, { createElement } from 'react'; import * as React from 'react';
import { createElement, Component } from 'react';
import {findDOMNode} from 'react-dom';
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
import assign from 'object-assign'; import assign from 'object-assign';
import { isCssAnimationSupported } from 'css-animation'; import omit from 'object.omit';
function getNumberArray(num) { function getNumberArray(num) {
return num ? return num ?
num.toString().split('').reverse().map(i => Number(i)) : []; num.toString()
.split('')
.reverse()
.map(i => Number(i)) : [];
} }
class AntScrollNumber extends React.Component { export default class ScrollNumber extends Component<any, any> {
static defaultProps = {
prefixCls: 'ant-scroll-number',
count: null,
component: 'sup',
onAnimated() {
},
height: 18,
};
static propTypes = {
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
component: React.PropTypes.string,
onAnimated: React.PropTypes.func,
height: React.PropTypes.number,
};
lastCount: any;
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
animateStarted: true, animateStarted: true,
count: props.count count: props.count,
}; };
} }
componentDidMount() {
if (!isCssAnimationSupported()) {
findDOMNode(this).className += ' not-support-css-animation';
}
}
getPositionByNum(num, i) { getPositionByNum(num, i) {
if (this.state.animateStarted) { if (this.state.animateStarted) {
return 10 + num; return 10 + num;
@ -59,10 +92,11 @@ class AntScrollNumber extends React.Component {
} }
} }
renderNumberList() { renderNumberList(position) {
const childrenToReturn = []; const childrenToReturn = [];
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
childrenToReturn.push(<p key={i}>{i % 10}</p>); const currentClassName = (position === i) ? 'current' : null;
childrenToReturn.push(<p key={i} className={currentClassName}>{i % 10}</p>);
} }
return childrenToReturn; return childrenToReturn;
} }
@ -76,11 +110,12 @@ class AntScrollNumber extends React.Component {
className: `${this.props.prefixCls}-only`, className: `${this.props.prefixCls}-only`,
style: { style: {
transition: removeTransition && 'none', transition: removeTransition && 'none',
transform: `translate3d(0, ${-position * height}px, 0)`, WebkitTransform: `translateY(${-position * height}px)`,
transform: `translateY(${-position * height}px)`,
height, height,
}, },
key: i, key: i,
}, this.renderNumberList()); }, this.renderNumberList(position));
} }
renderNumberElement() { renderNumberElement() {
@ -93,41 +128,19 @@ class AntScrollNumber extends React.Component {
} }
render() { render() {
const props = assign({}, this.props, { // fix https://fb.me/react-unknown-prop
className: `${this.props.prefixCls} ${this.props.className}` const props = assign({}, omit(this.props, [
'count',
'onAnimated',
'component',
'prefixCls',
]), {
className: `${this.props.prefixCls} ${this.props.className}`,
}); });
const isBrowser = (typeof document !== 'undefined' && typeof window !== 'undefined');
if (isBrowser && isCssAnimationSupported) {
return createElement(
this.props.component,
props,
this.renderNumberElement()
);
}
return createElement( return createElement(
this.props.component, this.props.component,
props, props,
props.count this.renderNumberElement()
); );
} }
} }
AntScrollNumber.defaultProps = {
prefixCls: 'ant-scroll-number',
count: null,
component: 'sup',
onAnimated() {},
height: 18,
};
AntScrollNumber.propTypes = {
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
]),
component: React.PropTypes.string,
onAnimated: React.PropTypes.func,
height: React.PropTypes.number,
};
export default AntScrollNumber;

13
components/badge/demo/99plus.md
View File

@ -1,10 +1,17 @@
# 大数字 ---
order: 1
title:
zh-CN: 大数字
en-US: Overflowed count
---
- order: 1 ## zh-CN
超过 99 的会显示为 `99+`。 超过 99 的会显示为 `99+`。
--- ## en-US
`99+` is displayed when count is larger than `99`.
````jsx ````jsx
import { Badge } from 'antd'; import { Badge } from 'antd';

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

@ -1,10 +1,17 @@
# 基本 ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
- order: 0 ## zh-CN
简单的徽章展示。 简单的徽章展示。
--- ## en-US
Simplest Usage.
````jsx ````jsx
import { Badge } from 'antd'; import { Badge } from 'antd';

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

@ -1,10 +1,17 @@
# 动态 ---
order: 4
title:
zh-CN: 动态
en-US: Dynamic
---
- order: 4 ## zh-CN
展示动态变化的效果。 展示动态变化的效果。
--- ## en-US
The count will be animated as it changes.
````jsx ````jsx
import { Badge, Button, Icon } from 'antd'; import { Badge, Button, Icon } from 'antd';
@ -57,7 +64,7 @@ const Test = React.createClass({
</div> </div>
</div> </div>
); );
} },
}); });
ReactDOM.render( ReactDOM.render(

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

@ -1,10 +1,17 @@
# 讨嫌的小红点 ---
order: 3
title:
zh-CN: 讨嫌的小红点
en-US: Red badge
---
- order: 3 ## zh-CN
没有具体的数字。 没有具体的数字。
--- ## en-US
This will simply display a red badge, without a specific count.
````jsx ````jsx
import { Badge, Icon } from 'antd'; import { Badge, Icon } from 'antd';

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

@ -1,10 +1,17 @@
# 可点击 ---
order: 2
title:
zh-CN: 可点击
en-US: Clickable
---
- order: 2 ## zh-CN
用 a 标签进行包裹即可。 用 a 标签进行包裹即可。
--- ## en-US
The badge can be wrapped with `a` tag to make it linkable.
````jsx ````jsx
import { Badge } from 'antd'; import { Badge } from 'antd';

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

@ -1,12 +1,19 @@
# 独立使用 ---
order: 0
title:
zh-CN: 独立使用
en-US: Standalone
---
- order: 0 ## zh-CN
不包裹任何元素即是独立使用，可自定样式展现。 不包裹任何元素即是独立使用，可自定样式展现。
> 在右上角的 badge 则限定为红色。 > 在右上角的 badge 则限定为红色。
--- ## en-US
Used in standalone when children is empty.
````jsx ````jsx
import { Badge } from 'antd'; import { Badge } from 'antd';

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

@ -1,10 +1,17 @@
# 封顶数字 ---
order: 6
title:
zh-CN: 封顶数字
en-US: Customized overflow count
---
- order: 6 ## zh-CN
超过 `overflowCount` 的会显示为 `${overflowCount}+`。 超过 `overflowCount` 的会显示为 `${overflowCount}+`。
--- ## en-US
`${overflowCount}+` is displayed when count is larger than `overflowCount`.
````jsx ````jsx
import { Badge } from 'antd'; import { Badge } from 'antd';

30
components/badge/index.en-US.md Normal file
View File

@ -0,0 +1,30 @@
---
category: Components
type: Views
english: 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"></a>
</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 |

61
components/badge/index.jsx
View File

@ -1,61 +0,0 @@
import React from 'react';
import Animate from 'rc-animate';
import ScrollNumber from './ScrollNumber';
import classNames from 'classnames';
class AntBadge extends React.Component {
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>
);
}
}
AntBadge.defaultProps = {
prefixCls: 'ant-badge',
count: null,
dot: false,
overflowCount: 99,
};
AntBadge.propTypes = {
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
]),
dot: React.PropTypes.bool,
overflowCount: React.PropTypes.number,
};
export default AntBadge;

76
components/badge/index.tsx Normal file
View File

@ -0,0 +1,76 @@
import * as React from 'react';
import Animate from 'rc-animate';
import ScrollNumber from './ScrollNumber';
import classNames from 'classnames';
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;
}
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 } = this.props;
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} 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>
);
}
}

11
components/badge/index.md → components/badge/index.zh-CN.md
View File

@ -1,9 +1,8 @@
# Badge ---
category: Components
- category: Components chinese: 徽标数
- chinese: 徽标数 type: Views
- type: 展示 english: Badge
--- ---
图标右上角的圆形徽标数字。 图标右上角的圆形徽标数字。

16
style/components/badge.less → components/badge/style/index.less
View File

@ -1,10 +1,13 @@
@badge-prefix-cls: ~"@{css-prefix}badge"; @import "../../style/themes/default";
@number-prefix-cls: ~"@{css-prefix}scroll-number";
@badge-prefix-cls: ant-badge;
@number-prefix-cls: ant-scroll-number;
.@{badge-prefix-cls} { .@{badge-prefix-cls} {
position: relative; position: relative;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
vertical-align: middle;
&-count { &-count {
position: absolute; position: absolute;
@ -78,6 +81,15 @@ a & {
display: inline-block; display: inline-block;
transition: transform .3s @ease-in-out; transition: transform .3s @ease-in-out;
} }
// for IE8/9 display
&.not-support-css-animation &-only {
> p {
display: none;
&.current {
display: block;
}
}
}
} }
@keyframes antZoomBadgeIn { @keyframes antZoomBadgeIn {

2
components/badge/style/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

85
components/breadcrumb/Breadcrumb.tsx Normal file
View File

@ -0,0 +1,85 @@
import * as React from 'react';
import { cloneElement } from 'react';
import BreadcrumbItem from './BreadcrumbItem';
const defaultNameRender = (breadcrumbName, route, params) => {
if (!breadcrumbName) {
return null;
}
const paramsKeys = Object.keys(params).join('|');
const name = breadcrumbName.replace(
new RegExp(`:(${paramsKeys})`, 'g'),
(replacement, key) => params[key] || replacement
);
return <span>{name}</span>;
};
interface BreadcrumbProps {
prefixCls?: string;
routes?: Array<any>;
params?: Object;
separator?: string | React.ReactNode;
linkRender?: (link, name, paths: Array<any>) => React.ReactNode;
nameRender?: (breadcrumbName, route, params) => React.ReactNode;
style?: React.CSSProperties;
}
export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
static Item: any;
static defaultProps = {
prefixCls: 'ant-breadcrumb',
separator: '/',
linkRender: (href, name) => <a href={`#${href}`}>{name}</a>,
nameRender: defaultNameRender,
};
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 = [];
const lastPath = routes.length - 1;
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);
}
const name = nameRender(route.breadcrumbName, route, params);
if (name) {
const link = (i === lastPath) ? name : linkRender(`/${paths.join('/')}`, name, paths);
return <BreadcrumbItem separator={separator} key={route.breadcrumbName || i}>{link}</BreadcrumbItem>;
}
return null;
});
} else {
crumbs = React.Children.map(children, (element: any, index) => {
return cloneElement(element, {
separator,
key: index,
});
});
}
return (
<div className={prefixCls}>
{crumbs}
</div>
);
}
}

41
components/breadcrumb/BreadcrumbItem.tsx Normal file
View File

@ -0,0 +1,41 @@
import * as React from 'react';
import splitObject from '../_util/splitObject';
interface BreadcrumbItemProps {
separator?: React.ReactNode;
href?: string;
}
export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
static defaultProps = {
prefixCls: 'ant-breadcrumb',
separator: '/',
};
static propTypes = {
prefixCls: React.PropTypes.string,
separator: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element,
]),
href: React.PropTypes.string,
};
render() {
const [{ prefixCls, separator, children }, restProps] = splitObject(
this.props, ['prefixCls', 'separator', 'children']
);
let link;
if ('href' in this.props) {
link = <a className={`${prefixCls}-link`} {...restProps}>{children}</a>;
} else {
link = <span className={`${prefixCls}-link`} {...restProps}>{children}</span>;
}
return (
<span>
{link}
<span className={`${prefixCls}-separator`}>{separator}</span>
</span>
);
}
}

27
components/breadcrumb/demo/basic.md
View File

@ -1,20 +1,27 @@
# 基本
- order: 0
最简单的用法，存在 `href` 表示可点。
--- ---
order: 0
title:
zh-CN: 基本
en-US: Basic Usage
---
## zh-CN
最简单的用法。
## en-US
The simplest use
````jsx ````jsx
import { Breadcrumb } from 'antd'; import { Breadcrumb } from 'antd';
ReactDOM.render( ReactDOM.render(
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item> <Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item> <Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item> <Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
, mountNode); , mountNode);
```` ````

98
components/breadcrumb/demo/router.md
View File

@ -1,60 +1,61 @@
# 路由 ---
order: 2
iframe: true
title:
zh-CN: 路由
en-US: React Router Integration
---
- order: 2 ## zh-CN
和 `react-router@2.x` 进行结合使用。 和 `react-router@2.x` 进行结合使用。
--- ## en-US
Used together with `react-router@2.x`.
````jsx ````jsx
const ReactRouter = require('react-router'); import { Router, Route, Link, hashHistory } from 'react-router';
let { Router, Route, Link, hashHistory } = ReactRouter;
import { Breadcrumb } from 'antd'; import { Breadcrumb } from 'antd';
const Apps = React.createClass({ const Apps = () => (
render() { <ul className="app-list">
return ( <li>
<ul className="app-list"> <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
<li> </li>
<Link to="/apps/1">应用1</Link>：<Link to="/apps/1/detail">详情</Link> <li>
</li> <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
<li> </li>
<Link to="/apps/2">应用2</Link>：<Link to="/apps/2/detail">详情</Link> </ul>
</li> );
</ul>
);
}
});
const Home = React.createClass({ const Home = (props) => (
render() { <div>
return ( <div className="demo-nav">
<div> <Link to="/">Home</Link>
<div className="demo-nav"> <Link to="/apps">Application List</Link>
<Link to="/">首页</Link> </div>
<Link to="/apps">应用列表</Link> {props.children || 'Home'}
</div> <div
{this.props.children || 'Home'} style={{
<div style={{ marginBottom: 15,
marginBottom: 15, marginTop: 15,
marginTop: 15, paddingBottom: 15,
paddingBottom: 15, borderBottom: '1px dashed #ccc',
borderBottom: '1px dashed #ccc' }}
}}> >
点击上面的导航切换页面，面包屑在下面： Click the navigation above to switch:
</div> </div>
<Breadcrumb {...this.props} /> <Breadcrumb {...props} />
</div> </div>
); );
}
});
ReactDOM.render( ReactDOM.render(
<Router history={hashHistory}> <Router history={hashHistory}>
<Route name="home" breadcrumbName="首页" path="/" component={Home}> <Route name="home" breadcrumbName="Home" path="/" component={Home}>
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}> <Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
<Route name="app" breadcrumbName="应用:id" path=":id"> <Route name="app" breadcrumbName="Application:id" path=":id">
<Route name="detail" breadcrumbName="详情" path="detail" /> <Route name="detail" breadcrumbName="Detail" path="detail" />
</Route> </Route>
</Route> </Route>
</Route> </Route>
@ -62,7 +63,10 @@ ReactDOM.render(
, mountNode); , mountNode);
```` ````
<style> ````css
#components-breadcrumb-demo-router iframe {
height: 180px;
}
.demo-nav { .demo-nav {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -76,4 +80,4 @@ ReactDOM.render(
.app-list { .app-list {
margin-top: 15px; margin-top: 15px;
} }
</style> ````

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

@ -1,20 +1,27 @@
# 分隔符 ---
order: 3
title:
zh-CN: 分隔符
en-US: Configuring the Separator
---
- order: 3 ## zh-CN
使用 `separator=">"` 可以自定义分隔符。 使用 `separator=">"` 可以自定义分隔符。
--- ## en-US
The separator can be customized by setting the separator property: separator=">"
````jsx ````jsx
import { Breadcrumb } from 'antd'; import { Breadcrumb } from 'antd';
ReactDOM.render( ReactDOM.render(
<Breadcrumb separator=">"> <Breadcrumb separator=">">
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item> <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item> <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item> <Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
, mountNode); , mountNode);
```` ````

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

@ -1,10 +1,17 @@
# 带有图标的 ---
order: 1
title:
zh-CN: 带有图标的
en-US: With an Icon
---
- order: 1 ## zh-CN
图标放在文字前面。 图标放在文字前面。
--- ## en-US
The icon should be placed in front of the text.
````jsx ````jsx
import { Breadcrumb, Icon } from 'antd'; import { Breadcrumb, Icon } from 'antd';
@ -16,12 +23,11 @@ ReactDOM.render(
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item href=""> <Breadcrumb.Item href="">
<Icon type="user" /> <Icon type="user" />
应用列表 <span>Application List</span>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item> <Breadcrumb.Item>
应用 Application
</Breadcrumb.Item> </Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
, mountNode); , mountNode);
```` ````

32
components/breadcrumb/index.en-US.md Normal file
View File

@ -0,0 +1,32 @@
---
category: Components
type: Navigation
title: Breadcrumb
---
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up within 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
```html
<Breadcrumb>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Application Center</Breadcrumb.Item>
<Breadcrumb.Item>Application List</Breadcrumb.Item>
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>
```
| Property | Description | Type | Optional | Default |
|-----------|-----------------------------------|-----------------|---------|--------|
| routes | The routing stack information of router | Array | | - |
| params | Routing parameter | Object | | - |
| separator | Custom separator | String or Element | | '/' |
| linkRender | Custom link function，and react-router configuration | Function(href, name, paths) | | - |
| nameRender | Custom link function，and react-router configuration | Function(breadcrumbName, route, params) | | - |

95
components/breadcrumb/index.jsx
View File

@ -1,95 +0,0 @@
import React, { cloneElement } from 'react';
const BreadcrumbItem = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-breadcrumb',
separator: '/',
};
},
propTypes: {
prefixCls: React.PropTypes.string,
separator: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element,
]),
href: React.PropTypes.string,
},
render() {
const { prefixCls, separator, children } = this.props;
let link = <a className={`${prefixCls}-link`} {...this.props}>{children}</a>;
if (typeof this.props.href === 'undefined') {
link = <span className={`${prefixCls}-link`} {...this.props}>{children}</span>;
}
return (
<span>
{link}
<span className={`${prefixCls}-separator`}>{separator}</span>
</span>
);
}
});
const Breadcrumb = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-breadcrumb',
separator: '/',
};
},
propTypes: {
prefixCls: React.PropTypes.string,
separator: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element,
]),
routes: React.PropTypes.array,
params: React.PropTypes.object,
},
render() {
let crumbs;
const { separator, prefixCls, routes, params, children } = this.props;
if (routes && routes.length > 0) {
const paths = [];
crumbs = routes.map((route, i) => {
if (!route.breadcrumbName) {
return null;
}
const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => {
return params[key] || replacement;
});
let link;
let path = route.path.replace(/^\//, '');
Object.keys(params).forEach(key => {
path = path.replace(`:${key}`, params[key]);
});
if (path) {
paths.push(path);
}
if (i === routes.length - 1) {
link = <span>{name}</span>;
} else {
link = <a href={`#/${paths.join('/')}`}>{name}</a>;
}
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>
);
}
});
Breadcrumb.Item = BreadcrumbItem;
export default Breadcrumb;

5
components/breadcrumb/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import Breadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';
Breadcrumb.Item = BreadcrumbItem;
export default Breadcrumb;

29
components/breadcrumb/index.md → components/breadcrumb/index.zh-CN.md
View File

@ -1,9 +1,8 @@
# Breadcrumb ---
category: Components
- category: Components chinese: 面包屑
- chinese: 面包屑 type: Navigation
- type: 导航 english: Breadcrumb
--- ---
显示当前页面在系统层级结构中的位置，并能向上返回。 显示当前页面在系统层级结构中的位置，并能向上返回。
@ -11,7 +10,7 @@
## 何时使用 ## 何时使用
- 当系统拥有超过两级以上的层级结构时； - 当系统拥有超过两级以上的层级结构时；
- 当需要告知用户“你在哪里”时； - 当需要告知用户『你在哪里』时；
- 当需要向上导航的功能时。 - 当需要向上导航的功能时。
## API ## API
@ -19,22 +18,16 @@
```html ```html
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item> <Breadcrumb.Item>应用中心</Breadcrumb.Item>
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item> <Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item> <Breadcrumb.Item>某应用</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
``` ```
### Breadcrumb
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|-----------------------------------|-------------------|---------|--------| |-----------|-----------------------------------|-----------------|---------|--------|
| routes | router 的路由栈信息 | Array | | - | | routes | router 的路由栈信息 | Array | | - |
| params | 路由的参数 | Object | | - | | params | 路由的参数 | Object | | - |
| separator | 分隔符自定义 | String or Element | | '/' | | separator | 分隔符自定义 | String or Element | | '/' |
| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name, paths) | | - |
### Breadcrumb.Item | nameRender | 自定义文字函数，和 react-router 配置使用 | Function(breadcrumbName, route, params) | | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|---------|--------|
| href | 链接，如不传则不可点击 | string | | - |

18
style/components/breadcrumb.less → components/breadcrumb/style/index.less
View File

@ -1,16 +1,22 @@
@import "../../style/themes/default";
@breadcrumb-prefix-cls: ant-breadcrumb; @breadcrumb-prefix-cls: ant-breadcrumb;
.@{breadcrumb-prefix-cls} { .@{breadcrumb-prefix-cls} {
color: #999; color: #999;
font-size: 12px; font-size: @font-size-base;
a { a {
color: #666; color: @text-color;
transition: color .3s;
&:hover {
color: tint(@primary-color, 20%);
}
} }
& > span:last-child { & > span:last-child {
font-weight: bold; font-weight: bold;
color: #666; color: @text-color;
} }
& > span:last-child &-separator { & > span:last-child &-separator {
@ -22,7 +28,9 @@
color: @border-color-base; color: @border-color-base;
} }
.anticon + span { &-link {
margin-left: 4px; > .anticon + span {
margin-left: 4px;
}
} }
} }

2
components/breadcrumb/style/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

28
components/button/button-group.jsx
View File

@ -1,28 +0,0 @@
import React from 'react';
import classNames from 'classnames';
const prefix = 'ant-btn-group-';
export default class ButtonGroup extends React.Component {
render() {
const { size, className, ...others } = this.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.string,
};

32
components/button/button-group.tsx Normal file
View File

@ -0,0 +1,32 @@
import * as React from 'react';
import classNames from 'classnames';
import splitObject from '../_util/splitObject';
const prefix = 'ant-btn-group-';
type ButtonSize = 'small' | 'large'
interface ButtonGroupProps {
size?: ButtonSize;
style?: React.CSSProperties;
className?: string;
}
export default function ButtonGroup(props: ButtonGroupProps) {
const [{ size, className }, others] = splitObject(props, ['size', 'className']);
// 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} />;
}

87
components/button/button.jsx
View File

@ -1,87 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import { findDOMNode } from 'react-dom';
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isString(str) {
return typeof str === 'string';
}
const prefix = 'ant-btn-';
// Insert one space between two chinese characters automatically.
function insertSpace(child) {
if (isString(child) && isTwoCNChar(child)) {
return child.split('').join(' ');
}
if (isString(child.type) && isTwoCNChar(child.props.children)) {
return React.cloneElement(child, {},
child.props.children.split('').join(' '));
}
return child;
}
function clearButton(button) {
button.className = button.className.replace(`${prefix}clicked`, '');
}
export default class Button extends React.Component {
handleClick(...args) {
// Add click effect
const buttonNode = findDOMNode(this);
clearButton(buttonNode);
setTimeout(() => buttonNode.className += ` ${prefix}clicked`, 10);
clearTimeout(this.timeout);
this.timeout = setTimeout(() => clearButton(buttonNode), 500);
this.props.onClick(...args);
}
render() {
const props = this.props;
const { type, shape, size, className, htmlType, children, ...others } = props;
// large => lg
// small => sm
const sizeCls = ({
large: 'lg',
small: 'sm',
})[size] || '';
const classes = classNames({
'ant-btn': true,
[prefix + type]: type,
[prefix + shape]: shape,
[prefix + sizeCls]: sizeCls,
[`${prefix}loading`]: ('loading' in props && props.loading !== false),
[className]: className,
});
const kids = React.Children.map(children, insertSpace);
return (
<button {...others}
type={htmlType || 'button'}
className={classes}
onClick={this.handleClick.bind(this)}>
{kids}
</button>
);
}
}
Button.propTypes = {
type: React.PropTypes.string,
shape: React.PropTypes.string,
size: React.PropTypes.string,
htmlType: React.PropTypes.string,
onClick: React.PropTypes.func,
loading: React.PropTypes.bool,
className: React.PropTypes.string,
};
Button.defaultProps = {
onClick() {},
};

136
components/button/button.tsx Normal file
View File

@ -0,0 +1,136 @@
import * as 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) {
return typeof str === 'string';
}
// Insert one space between two chinese characters automatically.
function insertSpace(child) {
if (isString(child.type) && isTwoCNChar(child.props.children)) {
return React.cloneElement(child, {},
child.props.children.split('').join(' '));
}
if (isString(child)) {
if (isTwoCNChar(child)) {
child = child.split('').join(' ');
}
return <span>{child}</span>;
}
return child;
}
type ButtonType = 'primary' | 'ghost' | 'dashed'
type ButtonShape = 'circle' | 'circle-outline'
type ButtonSize = 'small' | 'large'
interface ButtonProps {
type?: ButtonType;
htmlType?: string;
icon?: string;
shape?: ButtonShape;
size?: ButtonSize;
onClick?: React.FormEventHandler;
loading?: boolean;
disabled?: boolean;
style?: React.CSSProperties;
prefixCls?: string;
}
export default class Button extends React.Component<ButtonProps, any> {
static Group: any;
static defaultProps = {
prefixCls: 'ant-btn',
onClick() {},
loading: false,
};
static propTypes = {
type: React.PropTypes.string,
shape: React.PropTypes.oneOf(['circle', 'circle-outline']),
size: React.PropTypes.oneOf(['large', 'default', 'small']),
htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']),
onClick: React.PropTypes.func,
loading: React.PropTypes.bool,
className: React.PropTypes.string,
icon: React.PropTypes.string,
};
timeout: any;
clickedTimeout: any;
componentWillUnmount() {
if (this.clickedTimeout) {
clearTimeout(this.clickedTimeout);
}
if (this.timeout) {
clearTimeout(this.timeout);
}
}
clearButton = (button) => {
button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, '');
}
handleClick = (e) => {
// Add click effect
const buttonNode = findDOMNode(this);
this.clearButton(buttonNode);
this.clickedTimeout = setTimeout(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`, 10);
clearTimeout(this.timeout);
this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
this.props.onClick(e);
}
// Handle auto focus when click button in Chrome
handleMouseUp = (e) => {
(findDOMNode(this) as HTMLElement).blur();
if (this.props.onMouseUp) {
this.props.onMouseUp(e);
}
}
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']);
// large => lg
// small => sm
const sizeCls = ({
large: 'lg',
small: 'sm',
})[size] || '';
const classes = classNames({
[prefixCls]: true,
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && icon,
[`${prefixCls}-loading`]: loading,
[className]: className,
});
const iconType = loading ? 'loading' : icon;
const kids = React.Children.map(children, insertSpace);
return (
<button {...others}
type={htmlType || 'button'}
className={classes}
onMouseUp={this.handleMouseUp}
onClick={this.handleClick}
>
{iconType ? <Icon type={iconType} /> : null}{kids}
</button>
);
}
}

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

@ -1,30 +1,36 @@
# 按钮类型
- order: 0
按钮有三种类型：主按钮、次按钮、幽灵按钮。
通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。
--- ---
order: 0
title:
zh-CN: 按钮类型
en-US: Type
---
## zh-CN
按钮有四种类型：主按钮、次按钮、幽灵按钮、虚线按钮。
通过设置 `type` 为 `primary` `ghost` `dashed` 可分别创建主按钮、幽灵按钮、虚线按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
主按钮和次按钮可独立使用，幽灵按钮用于和主按钮组合。需要强引导用主按钮，切记主按钮在同一个操作区域最多出现一次。
## en-US
There are primary button, default button, ghost button and dashed button in antd.
`type` can be set as `primary` or `ghost` or `dashed`, in order to create primary button or ghost button or dashed button. If nothing is provided to `type`, we will get default button. Users can tell the significance of button from it's appearance.
Primary button and default button can be used without other button, but ghost button must be used with primary button.
````jsx ````jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render(<div> ReactDOM.render(
<Button type="primary">主按钮</Button> <div>
<Button>次按钮</Button> <Button type="primary">Primary</Button>
<Button type="ghost">幽灵按钮</Button> <Button>Default</Button>
<Button type="dashed">虚线按钮</Button> <Button type="ghost">Ghost</Button>
</div>, <Button type="dashed">Dashed</Button>
mountNode); </div>,
mountNode
);
```` ````
<style>
#components-button-demo-basic .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>

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

@ -1,85 +1,75 @@
# 按钮组合 ---
order: 5
title:
zh-CN: 按钮组合
en-US: Button Group
---
- order: 5 ## zh-CN
可以将多个 `Button` 放入 `Button.Group` 的容器中。 可以将多个 `Button` 放入 `Button.Group` 的容器中。
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。 通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
--- ## en-US
Buttons can be grouped by placing multiple `Button` components into a `Button.Group`.
The `size` can be set to `large`, `small` or left unset resulting in a default size.
````jsx ````jsx
import { Button, Icon } from 'antd'; import { Button, Icon } from 'antd';
const ButtonGroup = Button.Group; const ButtonGroup = Button.Group;
ReactDOM.render(<div> ReactDOM.render(
<h4>基本组合</h4> <div>
<ButtonGroup> <h4>Basic</h4>
<Button type="primary">确定</Button> <ButtonGroup>
<Button type="primary">取消</Button> <Button>Cancel</Button>
</ButtonGroup> <Button type="primary">OK</Button>
<ButtonGroup> </ButtonGroup>
<Button disabled>左</Button> <ButtonGroup>
<Button disabled>中</Button> <Button disabled>L</Button>
<Button disabled>右</Button> <Button disabled>M</Button>
</ButtonGroup> <Button disabled>R</Button>
<ButtonGroup> </ButtonGroup>
<Button type="primary">左</Button> <ButtonGroup>
<Button type="ghost">中</Button> <Button type="primary">L</Button>
<Button type="ghost">中</Button> <Button>M</Button>
<Button>右</Button> <Button type="ghost">M</Button>
</ButtonGroup> <Button type="dashed">R</Button>
</ButtonGroup>
<h4>带图标按钮组合</h4> <h4>With Icon</h4>
<ButtonGroup> <ButtonGroup>
<Button type="primary"> <Button type="primary">
<Icon type="left" /> <Icon type="left" />Go back
<span>后退</span> </Button>
</Button> <Button type="primary">
<Button type="primary"> Go forward<Icon type="right" />
前进 </Button>
<Icon type="right" /> </ButtonGroup>
</Button> <ButtonGroup>
</ButtonGroup> <Button type="primary" icon="cloud" />
<ButtonGroup> <Button type="primary" icon="cloud-download" />
<Button type="primary"> </ButtonGroup>
<Icon type="cloud" />
</Button>
<Button type="primary">
<Icon type="cloud-download" />
</Button>
</ButtonGroup>
<h4>多个组合</h4> <h4>Size</h4>
<ButtonGroup> <ButtonGroup size="large">
<Button type="ghost">1</Button> <Button type="ghost">Large</Button>
<Button type="ghost">2</Button> <Button type="ghost">Large</Button>
<Button type="ghost">3</Button> </ButtonGroup>
<Button type="ghost">4</Button> <ButtonGroup>
<Button type="ghost"> <Button type="ghost">Default</Button>
<span>前进</span> <Button type="ghost">Default</Button>
<Icon type="right" /> </ButtonGroup>
</Button> <ButtonGroup size="small">
</ButtonGroup> <Button type="ghost">Small</Button>
<Button type="ghost">Small</Button>
<h4>尺寸</h4> </ButtonGroup>
<ButtonGroup size="large"> </div>,
<Button type="ghost">大</Button> mountNode
<Button type="ghost">大</Button> );
<Button type="ghost">大</Button>
</ButtonGroup>
<ButtonGroup>
<Button type="ghost">默认</Button>
<Button type="ghost">默认</Button>
<Button type="ghost">默认</Button>
</ButtonGroup>
<ButtonGroup size="small">
<Button type="ghost">小</Button>
<Button type="ghost">小</Button>
<Button type="ghost">小</Button>
</ButtonGroup>
</div>
, mountNode);
```` ````
<style> <style>
@ -92,13 +82,11 @@ ReactDOM.render(<div>
#components-button-demo-button-group h4:first-child { #components-button-demo-button-group h4:first-child {
margin-top: 0; margin-top: 0;
} }
#components-button-demo-button-group .ant-btn {
margin-bottom: 8px;
}
#components-button-demo-button-group .ant-btn-group { #components-button-demo-button-group .ant-btn-group {
margin-right: 8px; margin-right: 8px;
} }
#components-button-demo-button-group .ant-btn { #components-button-demo-button-group .ant-btn {
margin-bottom: 12px; margin-bottom: 12px;
margin-right: 0;
} }
</style> </style>

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

@ -1,33 +1,35 @@
# 不可用 ---
order: 3
title:
zh-CN: 不可用状态
en-US: Disabled
---
- order: 3 ## zh-CN
添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
--- ## en-US
To mark a button as disabled, add the `disabled` property to the `Button`.
````jsx ````jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render(<div> ReactDOM.render(
<Button type="primary">主按钮</Button> <div>
<Button type="primary" disabled>主按钮(失效)</Button> <Button type="primary">Primary</Button>
<br /> <Button type="primary" disabled>Primary(disabled)</Button>
<Button>次按钮</Button> <br />
<Button disabled>次按钮(失效)</Button> <Button>Default</Button>
<br /> <Button disabled>Default(disabled)</Button>
<Button type="ghost">幽灵按钮</Button> <br />
<Button type="ghost" disabled>幽灵按钮(失效)</Button> <Button type="ghost">Ghost</Button>
<br /> <Button type="ghost" disabled>Ghost(disabled)</Button>
<Button type="dashed">虚线按钮</Button> <br />
<Button type="dashed" disabled>虚线按钮(失效)</Button> <Button type="dashed">Dashed</Button>
</div> <Button type="dashed" disabled>Dashed(disabled)</Button>
, mountNode); </div>,
mountNode
);
```` ````
<style>
#components-button-demo-disabled .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>

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

@ -1,57 +1,33 @@
# 图标按钮 ---
order: 1
- order: 6 title:
zh-CN: 图标按钮
`Button` 内可以嵌套图标，图标可以放在文字前、后，也可以单独存在。 en-US: Icon
--- ---
## zh-CN
当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。
如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。
## en-US
`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`
If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
````jsx ````jsx
import { Button, Icon } from 'antd'; import { Button } from 'antd';
ReactDOM.render(<div> ReactDOM.render(
<Button type="primary" shape="circle" size="large"> <div>
<Icon type="search" /> <Button type="primary" shape="circle" icon="search" />
</Button> <Button type="primary" icon="search">搜索</Button>
<Button type="primary" size="large"> <br />
<Icon type="search" /> <Button type="ghost" shape="circle-outline" icon="search" />
大按钮 <Button type="ghost" icon="search">Search</Button>
</Button> </div>,
mountNode
<Button type="primary" shape="circle"> );
<Icon type="search" />
</Button>
<Button type="primary">
<Icon type="search" />
中按钮
</Button>
<Button type="primary" shape="circle" size="small">
<Icon type="search" />
</Button>
<Button type="primary" size="small">
<Icon type="search" />
小按钮
</Button>
<br />
<Button type="ghost" shape="circle-outline" size="large">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline" size="small">
<Icon type="search" />
</Button>
</div>,
mountNode);
```` ````
<style>
#components-button-demo-icon .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>

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

@ -1,13 +1,20 @@
# 加载中 ---
order: 4
title:
zh-CN: 加载中状态
en-US: Loading
---
- order: 4 ## zh-CN
添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。 添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
--- ## en-US
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
````jsx ````jsx
import { Button, Icon } from 'antd'; import { Button } from 'antd';
const App = React.createClass({ const App = React.createClass({
getInitialState() { getInitialState() {
@ -25,33 +32,23 @@ const App = React.createClass({
render() { render() {
return ( return (
<div> <div>
<Button type="primary" size="large" loading>
加载中
</Button>
<Button type="primary" loading> <Button type="primary" loading>
加载中 Loading
</Button> </Button>
<Button type="primary" size="small" loading> <Button type="primary" size="small" loading>
加载中 Loading
</Button> </Button>
<br /> <br />
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}> <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
点击变加载 Click me!
</Button> </Button>
<Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}> <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
<Icon type="poweroff" />点击变加载 Click me!
</Button> </Button>
</div> </div>
); );
} },
}); });
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);
```` ````
<style>
#components-button-demo-loading .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>

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

@ -1,41 +0,0 @@
# 按钮形状
- order: 1
通过设置 `shape` 为 `circle` `circle-outline`，可以把按钮形状设为圆形，并且 `circle-outline` 在 hover 时会有动画效果。
---
````jsx
import { Button, Icon } from 'antd';
ReactDOM.render(<div>
<Button type="primary" shape="circle" size="large">
<Icon type="search" />
</Button>
<Button type="primary" shape="circle">
<Icon type="search" />
</Button>
<Button type="primary" shape="circle" size="small">
<Icon type="search" />
</Button>
<br />
<Button type="ghost" shape="circle-outline" size="large">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline">
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline" size="small">
<Icon type="search" />
</Button>
</div>
, mountNode);
````
<style>
#components-button-demo-shape .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>

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

@ -1,26 +1,28 @@
# 按钮尺寸 ---
order: 2
title:
zh-CN: 按钮尺寸
en-US: Size
---
- order: 2 ## zh-CN
按钮有大、中、小三种尺寸。 按钮有大、中、小三种尺寸。
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。 通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
--- ## en-US
Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
````jsx ````jsx
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render(<div> ReactDOM.render(<div>
<Button type="primary" size="large">大号按钮</Button> <Button type="primary" size="large">Large</Button>
<Button type="primary">中号按钮(默认)</Button> <Button type="primary">Default</Button>
<Button type="primary" size="small">小号按钮</Button> <Button type="primary" size="small">Small</Button>
</div> </div>, mountNode);
, mountNode);
```` ````
<style>
#components-button-demo-size .ant-btn {
margin-right: 8px;
}
</style>

34
components/button/index.en-US.md Normal file
View File

@ -0,0 +1,34 @@
---
category: Components
type: Basic
title: Button
---
To trigger an operation.
## When To Use
A button means an operation(or a series of operations). Click a button will trigger corresponding business logic.
## API
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
Property | Description | Type | Default
-----|-----|-----|------
type | can be set to `primary` `ghost` or omitted | string | -
htmlType | to set the original `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
icon | set the icon of button, see: Icon component | string | -
shape | can be set to `circle` `circle-outline` or omitted | string | -
size | can be set to `small` `large` or omitted | string | `default`
loading | to set the loading status of button | boolean | false
onClick | set the handler to handle `click` event | function | -
`<Button>Hello world!</Button>` will be rendered into `<button>Hello world!</button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
<style>
[id^="components-button-demo-"] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>

31
components/button/index.md
View File

@ -1,31 +0,0 @@
# Button
- category: Components
- chinese: 按钮
- type: 基本
---
按钮用于开始一个即时操作。
## 何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
## API
- 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
- 按钮的属性说明如下：
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | string | -
htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | string | `button`
shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | string | 无
size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
loading | 设置按钮载入状态 | boolean | false
onClick | `click` 事件的 handler | function | `function() {}`
- `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`

0
components/button/index.jsx → components/button/index.tsx
View File

37
components/button/index.zh-CN.md Normal file
View File

@ -0,0 +1,37 @@
---
category: Components
type: Basic
title: Button
subtitle: 按钮
---
按钮用于开始一个即时操作。
## 何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
## API
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
按钮的属性说明如下：
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | string | -
htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
icon | 设置按钮的图标类型 | string | -
shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | string | -
size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
loading | 设置按钮载入状态 | boolean | false
onClick | `click` 事件的 handler | function | -
`<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。
<style>
[id^="components-button-demo-"] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>

85
style/components/button.less → components/button/style/index.less
View File

@ -1,5 +1,8 @@
@import "../mixins/index"; @import "../../style/themes/default";
@btn-prefix-cls: ~"@{css-prefix}btn"; @import "../../style/mixins/index";
@import "./mixin";
@btn-prefix-cls: ant-btn;
// Button styles // Button styles
// ----------------------------- // -----------------------------
@ -46,45 +49,39 @@
.btn-circle(@btn-prefix-cls); .btn-circle(@btn-prefix-cls);
} }
&-circle-outline { &:before {
.btn-circle-outline;
}
&:after {
font-family: anticon;
content: "\e6a1";
position: absolute; position: absolute;
opacity: 0; top: -1px;
visibility: hidden; left: -1px;
transition: opacity 0.5s ease; bottom: -1px;
right: -1px;
background: #fff;
opacity: 0.35;
content: '';
border-radius: inherit;
z-index: 1;
transition: opacity .2s;
pointer-events: none;
display: none;
} }
&&-loading { &&-loading {
padding-left: 29px; padding-left: 29px;
pointer-events: none; pointer-events: none;
opacity: 0.75; position: relative;
&:after { .anticon {
.animation(loadingCircle 1s infinite linear); margin-left: -14px;
height: 12px; transition: all .3s @ease-in-out;
line-height: 12px;
left: 10px;
top: 50%;
margin-top: -6px;
opacity: 1;
visibility: visible;
} }
> .anticon { &:before {
display: none; display: block;
& + span {
margin-left: 0;
}
} }
} }
&-sm&-loading { &-sm&-loading {
padding-left: 24px; padding-left: 24px;
&:after { .anticon {
left: 7px; margin-left: -17px;
} }
} }
@ -92,31 +89,39 @@
.btn-group(@btn-prefix-cls); .btn-group(@btn-prefix-cls);
} }
&:not(&-circle):not(&-circle-outline)&-icon-only {
padding-left: 8px;
padding-right: 8px;
}
// To ensure that a space will be placed between character and `Icon`. // To ensure that a space will be placed between character and `Icon`.
> .@{iconfont-css-prefix} + span, > .@{iconfont-css-prefix} + span,
> span + .@{iconfont-css-prefix} { > span + .@{iconfont-css-prefix} {
margin-left: 0.5em; margin-left: 0.5em;
} }
&-clicked:before { &-clicked:after {
content: ''; content: '';
position: absolute; position: absolute;
top: -6px; top: -1px;
left: -6px; left: -1px;
bottom: -6px; bottom: -1px;
right: -6px; right: -1px;
border-radius: inherit; border-radius: inherit;
z-index: -1; border: 0 solid @primary-color;
background: inherit; opacity: 0.4;
opacity: 1; animation: buttonEffect 0.32s ease forwards;
transform: scale3d(0.5, 0.5, 1); display: block;
animation: buttonEffect 0.48s ease forwards;
} }
} }
@keyframes buttonEffect { @keyframes buttonEffect {
to { to {
opacity: 0; opacity: 0;
transform: scale3d(1, 1, 1); top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
border-width: 5px;
} }
} }

2
components/button/style/index.tsx Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';

78
style/mixins/button.less → components/button/style/mixin.less
View File

@ -35,6 +35,20 @@
color: @color; color: @color;
background-color: @background; background-color: @background;
border-color: @border; border-color: @border;
// a inside Button which only work in Chrome
// http://stackoverflow.com/a/17253457
> a:only-child {
color: currentColor;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
}
} }
.button-group-base(@btnClassName) { .button-group-base(@btnClassName) {
@ -81,12 +95,9 @@
white-space: nowrap; white-space: nowrap;
line-height: @line-height-base; line-height: @line-height-base;
.button-size(@btn-padding-base; @font-size-base; @border-radius-base); .button-size(@btn-padding-base; @font-size-base; @border-radius-base);
.user-select(none); user-select: none;
.transition(all .3s @ease-in-out); transition: all .3s @ease-in-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
// Fix for ie8 border-radius
// http://css3pie.com/documentation/known-issues/#z-index
position: relative\0;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
line-height: 1; line-height: 1;
@ -104,12 +115,15 @@
&:not([disabled]):active { &:not([disabled]):active {
outline: 0; outline: 0;
.transition(none); transition: none;
} }
&.disabled, &.disabled,
&[disabled] { &[disabled] {
cursor: @cursor-disabled; cursor: @cursor-disabled;
> * {
pointer-events: none;
}
} }
&-lg { &-lg {
@ -192,50 +206,6 @@
} }
} }
// circle button with stroke border
.btn-circle-outline() {
position: relative;
&:not([disabled]):before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
.opacity(0);
width: 100%;
height: 100%;
border-radius: 50% 50%;
content: " ";
.scale(0, 0);
.transition(all .3s @ease-in-out);
z-index: 0;
background-color: @primary-color;
}
&:not([disabled]):hover,
&:not([disabled]):focus,
&:not([disabled]):active,
&:not([disabled]).active {
> .@{iconfont-css-prefix} {
color: @btn-primary-color;
position: relative;
}
}
&:not([disabled]):hover:before,
&:not([disabled]):focus:before,
&:not([disabled]):active:before,
&:not([disabled]).active:before {
.opacity(1);
.scale(1, 1);
}
&:not([disabled]):active:before,
&:not([disabled]).active:before {
background-color: tint(@primary-color, 20%);
}
}
// Horizontal button groups styl // Horizontal button groups styl
// -------------------------------------------------- // --------------------------------------------------
.btn-group(@btnClassName: btn) { .btn-group(@btnClassName: btn) {
@ -269,15 +239,15 @@
padding-left: 8px; padding-left: 8px;
} }
& > & { & > & {
float: left; float: left;
} }
& > &:not(:first-child):not(:last-child) > .@{btnClassName} { & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
border-radius: 0; border-radius: 0;
} }
& > &:first-child:not(:last-child) { & > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child { > .@{btnClassName}:last-child {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
@ -285,7 +255,7 @@
} }
} }
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child { & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
padding-left: 8px; padding-left: 8px;

0
components/calendar/Constants.js → components/calendar/Constants.tsx
View File

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