Compare commits

..

2 Commits
1.8.0 ... 1.3.2

Author SHA1 Message Date
ddcat1115
e051e8ae32 format webpack.config.js 2016-06-06 15:12:38 +08:00
ddcat1115
9558aa2c64 fix #1970 2016-06-06 13:53:05 +08:00
316 changed files with 3523 additions and 4472 deletions

View File

@@ -28,13 +28,13 @@ const eslintrc = {
'arrow-body-style': 0,
'react/sort-comp': 0,
'react/prop-types': 0,
'react/jsx-closing-bracket-location': 0,
'react/jsx-first-prop-new-line': 0,
'import/no-unresolved': 0,
'no-param-reassign': 0,
'no-return-assign': 0,
'max-len': 0,
'consistent-return': 0,
'no-redeclare': 0,
}
};

View File

@@ -1,27 +1,53 @@
<!-- Issue Template For Chinese Users -->
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 :-)
<!-- 请按照下列格式报告问题,务必提供复现步骤,否则恕难解决,感谢您的支持。-->
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
(e.g. I should be full)
## What actually happened
(e.g. But I am still hungry now T_T)
## Online demo
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
## Environment Information
- The version of antd(e.g. 0.12.0):
- Your operating system and it's version(e.g. OSX 10.11.0):
- Your browser and it's version(e.g. Chrome 48.0.0.0(64-bit)):
---
提问之前,建议先阅读[这份提示](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question)。:-)
如果是报告 bug请按照下列格式编辑问题务必提供复现步骤否则恕难解决非常感谢
## 你做了什么?
(例如,我吃了一个汉堡)
## 你期待的结果是:
(例如,我应该饱了)
## 实际上的结果和抱怨:
(例如,我还是饿的,肯定是哪里出问题了)
## 可重现的在线演示
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
## 本地环境信息
- antd 版本:
- 操作系统及其版本:
- 浏览器及其版本:
#### 你做了什么?
<!-- 引入 antd 了 Button -->
#### 你期待的结果是:
<!-- 像官网一样正常显示 -->
#### 实际上的结果:
<!-- 缺少样式 -->
#### 可重现的在线演示
<!-- 请修改并 Fork http://codepen.io/anon/pen/wGOWGW?editors=001 -->

View File

@@ -1,185 +1,14 @@
---
order: 3
title: 更新日志
chinese: 更新日志
toc: false
timeline: true
---
如果需要查看 `0.12.x` 及之前的更新日志,请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0)。
你也可以查看 GitHub 上的 [发布日志](https://github.com/ant-design/ant-design/releases)。
---
## 1.8.0
`2016-08-08`
- Tabs
- 修复可关闭Tabs组件只有一个Tab的时候报错的问题。 [#2559](https://github.com/ant-design/ant-design/issues/2559)
- Datepicker
- 修复 IE8 下关闭图标。 [#2584](https://github.com/ant-design/ant-design/issues/2584)
- Tags
- 支持自定义 tag 颜色。 [#2585](https://github.com/ant-design/ant-design/issues/2585)
- TreeSelect
- 修复未找到内容时的样式。 [#9cee9f](https://github.com/ant-design/ant-design/commit/9cee9f103a4729572358206c81cba84e2fdc20f5)
- Modal
- 适配小屏幕。 [#2597](https://github.com/ant-design/ant-design/issues/2597)
- Layout
- 修复了 `Row` 组件在同一行闭合会报错的问题。[#2603](https://github.com/ant-design/ant-design/issues/2603)
- Table
- selectedRows 想在将和 selectedRowKeys 一致 [#2566](https://github.com/ant-design/ant-design/issues/2603)
- Checkbox
- 支持了 onClick 事件
## 1.7.0
`2016-07-30`
友情提示 [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
- 优化清除按钮样式。
- 修复点击 `此刻` 时不触发 `onChange` 的问题。[#1902](https://github.com/ant-design/ant-design/issues/1902)
- Menu
- 修复子菜单中的 Item 被选中后,父级元素无样式变化的问题。[#2414](https://github.com/ant-design/ant-design/issues/2414)
- 修复 Menu.Item disabled 后的样式问题。
- TreeSelect
- treeNodes 可以设置是否可选。[#2401](https://github.com/ant-design/ant-design/issues/2401)
- 修复多选模式下进行搜索会把已选项清掉的问题。[#2393](https://github.com/ant-design/ant-design/issues/2393)
- 修复 TreeSelect 会修改原数据的问题。[#2459](https://github.com/ant-design/ant-design/issues/2459)
- 修复了 Select 组件 placeholder 溢出的问题。[#2480](https://github.com/ant-design/ant-design/pull/2480)
- 修复 Timeline.Item 无法自定义边框颜色的问题。[#2479](https://github.com/ant-design/ant-design/issues/2479)
- 修复 Spin 显示突兀的问题。[#2398](https://github.com/ant-design/ant-design/issues/2398)
- 修复 Cascader 选项文字过长导致的样式问题。[#2515](https://github.com/ant-design/ant-design/issues/2515)
## 1.6.5
`2016-07-16`
- 修复 Input 的 `value prop on input should not be null` 警告并且导致在表单中无法重置的问题。[#2335](https://github.com/ant-design/ant-design/issues/2335)
- 优化 FormItem 的布局实现,修复表单布局不支持响应式布局的问题。[#2305](https://github.com/ant-design/ant-design/issues/2305)
- 修复带时间的 DatePicker 的 onChange 触发逻辑。[#2399](https://github.com/ant-design/ant-design/issues/2399#issuecomment-232893146)
- 修复 Transfer 搜索后全选的问题。[#2396](https://github.com/ant-design/ant-design/issues/2396)
- 修复 Cascader 样式会被 ant-input 样式覆盖的问题。[#2400](https://github.com/ant-design/ant-design/issues/2400)
- 修复 Table 删除数据时导致当前页数溢出的问题。[#2301](https://github.com/ant-design/ant-design/pull/2301)
- 修复 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)
## 1.6.4
`2016-07-08`
- 修复组件在 react@15.2.0 下报 Unknown props 警告的问题。[#2258](https://github.com/ant-design/ant-design/issues/2258)
- `Table`
- 修复 filterDropDown 中内容未改变也会调用 onChange 的问题。[#2228](https://github.com/ant-design/ant-design/issues/2228)
- 修复设置 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`
@@ -228,7 +57,6 @@ timeline: true
- 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
- 修复了当有列固定在左边时,选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
- 修复了当 Checkbox 的 label 为数字 0 时, label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
- 修复 Select combobox 模式下无法重置 `optionLabelProp` 的问题。[#1773](https://github.com/ant-design/ant-design/issues/1773)
- 修复了 Tag 组件为 closeable 时,内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
- Tab 组件新增 `hideAdd` 属性,用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
- 修复了一个在某些情况下找不到 `normalize.css/normalize.css` 文件的问题。[ant-design/antd-init#52](https://github.com/ant-design/antd-init/issues/52)
@@ -279,7 +107,7 @@ timeline: true
- **兼容 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#浏览器引入)
- **提供独立的构建文件**。[文档](/docs/react/install?scrollTo=浏览器引入)
- 新增卡片组件 [Card](/components/card)。
- 新增评分组件 [Rate](/components/rate)。
- 新增 [LocaleProvider](/components/locale-provider) 组件,提供组件文案的国际化支持,并新增了英语和俄语的语言配置。[#1411](https://github.com/ant-design/ant-design/issues/1411)
@@ -292,7 +120,7 @@ timeline: true
此版本有部分不兼容的改动,升级时确保修改相应的使用代码。
- 推荐使用样式按需加载。如果依然需要整体载入样式**样式入口文件变为** `antd/dist/antd.css``antd/dist/antd.less`。如果你在项目中覆盖了 less 变量less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
- 推荐使用样式按需加载, 如果需要整体载入样式, **样式入口文件变为** `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';
@@ -310,7 +138,7 @@ timeline: true
这里的改动在升级后控制台会出现警告提示,请按提示进行修改。
- 废弃 QueueAnim可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/components/queue-anim),欢迎前往探索。
- 废弃 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" />`。
@@ -389,4 +217,629 @@ timeline: true
## 0.12.17
去 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0) 查看 `0.12.x` 及之前的更新日志。
`2016-05-05`
- 修复 FormItem 校验时表单项高度跳动的问题。[#1557](https://github.com/ant-design/ant-design/issues/1557)
- 修复一个 Table 圆角样式的小问题。
## 0.12.16
`2016-04-27`
- 修复 Collapse 在 safari 中切换动画异常的问题。[#1494](https://github.com/ant-design/ant-design/issues/1494)
- 修复 Table 的 selectedRowKeys 在初次渲染时失效的问题。[#1501](https://github.com/ant-design/ant-design/issues/1501)
- Table 现在点击选择框时将不再触发 `onRowClick`。[#1470](https://github.com/ant-design/ant-design/issues/1470)
- 修复一个 Calender 服务端渲染时提示 `Option is not defined` 的问题。[#1521](https://github.com/ant-design/ant-design/issues/1521)
- 修复 Menu 动态切换模式时的一些细节问题。
- 优化了 export 导出图标。
- 修复 Form 的一些样式细节。
## 0.12.15
`2016-04-21`
- 升级 rc-collapse 修复一个性能问题。
- 修复一个 Collapse 内嵌 Tabs 的选中项样式问题。[#1451](https://github.com/ant-design/ant-design/issues/1451)
- 修复 Input 组件服务端渲染报错的问题。[#1321](https://github.com/ant-design/ant-design/issues/1321)
- 修复 Tag 组件调用了两次 afterClose 的问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
- 修复一个 Table 控制模式的问题。[#1434](https://github.com/ant-design/ant-design/issues/1434)
- 修复一个 Tabs 相互嵌套的样式问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
- 修复 Dropdown.Button 点击右边也触发 onClick 的问题。
- 修复 Radio.Button 在 IE8 下无法选择的问题。[#1459](https://github.com/ant-design/ant-design/issues/1459)
- 优化了 Button 点击后仍然有 focus 效果的问题。
## 0.12.14
`2016-04-13`
- Form 和 Form.Item 支持 style 属性。[#1290](https://github.com/ant-design/ant-design/issues/1290)
- 修正 IE9 下没有 prefix css3 属性的问题。
- 修正 Table 中指定了 pagination.current 时依然能响应用户操作的问题。[#1311](https://github.com/ant-design/ant-design/issues/1311)
- 修正 Table 的单选模式无法用 `selectedRowKeys` 控制的问题。[#1346](https://github.com/ant-design/ant-design/issues/1346)
- 修正 DatePicker 启用 showTime 时时区失效的问题。[#1356](https://github.com/ant-design/ant-design/issues/1356)
- 修正 Menu、Progress、Form、Table、Select、Pagination、Cascader 的样式细节问题。
- 修正 Breadcrumb 不支持 IndexRoute 的问题。[#1375](https://github.com/ant-design/ant-design/issues/1375)
- 修正 Table 的筛选菜单 filters 的 value 为数字时无法选中的问题。
- 修正 DatePicker 面板输入框的日期格式 format 和外面不一致的问题。[#1403](https://github.com/ant-design/ant-design/issues/1403)
## 0.12.13
`2016-03-29`
- 按照最新的规范修正 Message、Alert、Notification 的默认图标。
- 统一梳理和优化了各浮层组件的 `z-index`,并增加了对应的 less 变量。
- 修复一个 Breadcrumb 组件未指定 breadcrumbName 导致的解析问题。[#1251](https://github.com/ant-design/ant-design/pull/1251)
- 现在 Upload 服务端返回数据不是 JSON 格式时将不判断为出错。[#1248](https://github.com/ant-design/ant-design/issues/1248)
- 修复 Cascader 在 Chrome 下无法滚动菜单的问题。
- 修复 Select、Radio、Progress、Table、DatePicker 的一些样式细节。
## 0.12.12
`2016-03-18`
- 更新了设计资源文件 `Axure Components` 和 `Axure Box`。
- 修复 Popover 和 Popconfirm 箭头消失的问题。
- 修复一个 Table 切换分页长度时的页码溢出的问题。
## 0.12.11
`2016-03-16`
- 全新的设计文档 `语言` 部分。
- 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。
- TreeSelect 组件补充 `showCheckedStrategy` 属性,支持回填数据的不同展示方式。
- 补充 Modal `align` 属性的文档。
- 修复 Menu 弹出菜单 `z-index` 丢失的问题。
- Progress 的默认颜色固定,不再随着主色变化。
- 优化 Button 点击动画在 Chrome 下的效果。
- 修复一个 Affix 的 `z-index` 太低的问题。
- 修复 Table 树形数据的二级节点列前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212)
- 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206)
- 修复 Table 指定 `rowKey` 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。
## 0.12.10
- 修复 0.12.9 版本 npm 包打包错误的问题。
## 0.12.9
`2016-03-11`
- Transfer
- 可以定义 `notFoundContent `。
- 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。
- 修复 Popconfirm、Popover、Tooltip 的箭头位置未指向元素的问题。
- 修正 Badge 在搜狗等旧版 webkit 浏览器下无法使用的问题。
- 调整 Tabs 样式。
- 修复 Table 中的 Pagination 默认配置问题。
- 调整 Form.Item 在 inline 模式下的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141)
- 修复 DatePicker `style` 设置错误的问题。
- 优化 Popconfirm、Button 样式。
- Dropdown 增加默认的 mouseEnterDelay 延迟以优化体验。
- 修复 Dialog 样式问题。
- 修复 Upload 上传中的状态问题。[#1159](https://github.com/ant-design/ant-design/issues/1159)
- 优化 Menu、Tabs 在 Chorme 下的渲染问题。
- Form 默认阻止 submit 事件。
## 0.12.8
`2016-03-06`
- 新增 `heart` `calculator` 图标。
- Table 补充了 `showHeader` 和 `footer` 属性。
- Modal 补充了 `maskClosable` 属性。
- 修正一个 Tag 和 Popover 配合使用的问题。[#1111](https://github.com/ant-design/ant-design/issues/1111)
- 将 TreeSelect 的 `treeDefaultExpandAll` 默认属性设为 false并优化了性能。
- 修复 RadioGroup 无法垂直布局的问题。[#1119](https://github.com/ant-design/ant-design/issues/1119)
- 统一了 less 文件的部分变量。
- 修正部分组件的样式。
## 0.12.7
`2016-03-03`
- 修正 Table 的 `rowSelect.onSelectAll` 的第三个参数 `deselectedRows` 为 `changeRows`,记录每次变化的列。
## 0.12.6
`2016-03-02`
- 优化 Table 本地排序在 Chrome 下的稳定性问题。
- 修正 Pagination 的 pageSize 属性为受控属性,并补充了 `defaultPageSize` 属性。[#1087](https://github.com/ant-design/ant-design/issues/1087)
- 优化 Select 的 combobox 模式的交互体验。
- 升级 react-slick 依赖到 `0.11`,修复自动播放有时会失效的问题。[#1009](https://github.com/ant-design/ant-design/issues/1009)
- 修复 TreeSelect 的 allowClear 属性失效的问题。[#1084](https://github.com/ant-design/ant-design/issues/1084)
- 修复 Input 组件的 className 属性失效的问题。[#1103](https://github.com/ant-design/ant-design/issues/1103)
- 修复 Dropdown 的 onClick 属性失效的问题。[#1097](https://github.com/ant-design/ant-design/issues/1097)
- 修复多个 CheckboxGroup 选项互相影响的问题。[#1101](https://github.com/ant-design/ant-design/pull/1101)
- 修复 FormItem 的子元素为 `null` 时报错的问题。
- 修复 Table 组件的选择功能和展开功能配合使用的问题。[#1102](https://github.com/ant-design/ant-design/issues/1102)
- 增加了一个搜索框和提示功能结合的 [例子](http://ant.design/components/select/#demo-search-box)。
- 允许可编辑的 Tabs 删除最后一个页签。[#1071](https://github.com/ant-design/ant-design/issues/1071)
- Table 的 `rowSelect.onSelectAll` 补充了第三个参数 `deselectedRows`, `rowSelect.onChange` 补充了第二个参数 `selectedRows`。[#1105](https://github.com/ant-design/ant-design/issues/1105)
- 修正部分组件的样式。
## 0.12.5
`2016-02-25`
- Pagination 支持 `showTotal` 属性。[#1077](https://github.com/ant-design/ant-design/pull/1077)
- Cascader 添加 `allowClear` 属性,允许隐藏清除按钮。
- 补充了一个带图标的搜索建议框的例子。[#1067](https://github.com/ant-design/ant-design/issues/1067)
- 修复 Transfer 在不支持 Object.assign 的浏览器上报错的问题。
- 修复 Cascader 在 Safari 下错位的问题。[#1066](https://github.com/ant-design/ant-design/issues/1066)
- 移除对 Button 圆角的降级方案。
- 修复了部分组件样式的小问题。
## 0.12.4
`2016-02-22`
- Radio 的 value 支持更多类型。[#1043](https://github.com/ant-design/ant-design/pull/1043)
- 修复 Spin 组件的大小、居中等样式问题。
- FormItem 补充 extra 属性的文档。[#931](https://github.com/ant-design/ant-design/issues/931)
- 修复的 Table 下树形数据和选择框配合时的样式问题。
- 修复一个水平表单的错误提示的样式错位问题。[#1040](https://github.com/ant-design/ant-design/issues/1040)
- 添加了一个轻微的 Button 点击动效。
## 0.12.3
`2016-02-19`
- DatePicker 补充 allowClear 属性,支持单选的清空。
- 修复显示时间的 DatePicker 的清空按钮失效的问题。
- 优化 DatePicker 的 `确定` 按钮失效样式。
## 0.12.2
`2016-02-19`
- DatePicker 如果有 `确定` 按钮,现在只有点击 `确定` 按钮才会触发 onChange 事件。
- 修复带时间选择的 DatePicker 日期格式缺少时间部分的问题。[#1005](https://github.com/ant-design/ant-design/issues/1005)
- 修复 DatePicker 内输入框多余的时间展示的问题。[#953](https://github.com/ant-design/ant-design/issues/953)
- 升级依赖 react-slick 到 `0.10`。
- 支持表单校验错误时自动滚动到第一个错误项。[#993](https://github.com/ant-design/ant-design/issues/993)
- 优化了 Select 和 TreeSelect 多选禁用的样式。
- Upload 列表项支持链接展现形式。[#1013](https://github.com/ant-design/ant-design/issues/1013)
- 修复 Safari 下的样式警告信息。[#999](https://github.com/ant-design/ant-design/issues/999)
- Cascader 支持 popupPlacement 位置配置。
## 0.12.1
`2016-02-03`
- 依赖升级到 `rc-pagination@1.4`、`rc-menu@4.10`、`rc-form@0.12`。
- 修复 TreeSelect 的不可用样式。
- DatePicker 补充 `getCalendarContainer` 属性,用于解决问题 [#991](https://github.com/ant-design/ant-design/issues/991)。
- 修正 Modal `onCancel` 的参数为点击事件。[#980](https://github.com/ant-design/ant-design/issues/980)
- 修复一个 Tooltip 内嵌套 Popconfirm 的问题。[#977](https://github.com/ant-design/ant-design/issues/977)
- 修复 DatePicker 和 RangePicker 的 `onOk` 一直不可用的问题。
- 修复一个 Badge 的 count 无法切换的问题。[#983](https://github.com/ant-design/ant-design/issues/983)
## 0.12.0
`2016-02-01`
- 新增 [级联选择(Cascader)](http://ant.design/components/cascader/) 组件。
- 新增 [树选择控件(TreeSelect)](http://ant.design/components/tree-select/) 组件。
- Form 自身支持校验功能,废弃 Validation。[演示](http://ant.design/components/form/#demo-validate-basic)
- Tabs
- `activeKey` 修正为受控属性。
- 当前项现在会始终显示。[#815](https://github.com/ant-design/ant-design/issues/815)
- Modal 可以配置右上关闭按钮是否显示。
- Select
- 打开选项菜单时,自动滚动到选中项。
- `combobox` 模式时,可配置是否默认选中第一项。[rc-select#38](https://github.com/react-component/select/issues/38)
- Table
- filter 支持层级选择。
- 支持行点击事件 `onRowClick`。
- 支持多列的横向切换。[演示](http://ant.design/components/table/#demo-paging-columns)
- 更换 `dataSource` 和变换页面时不再默认清除选择数据,你可以用 `selectedRowKeys` 手动控制。`原来默认清除的行为会触发一个数据更新的死循环,而且难以实现跨页选择。`
- 支持固定表头。[演示](http://ant.design/components/table/#demo-fixed-header)
- Tag 去除 `href` 属性,默认标签名从 `a` 改为 `span`。
- Timeline 支持指定 pending 节点的内容。
- Tree
- 节点支持拖拽。
- 支持动态控制节点展开与否。[演示](http://ant.design/components/tree/#demo-basic-controlled)
- 可以监听节点展开/关闭事件 `onExpand`。
- `onCheck` `onSelect` 参数调整。
- `onDataLoaded` 改为 `loadData`。
- 新增 drag&drop 相关属性:
- `onDragStart`
- `onDragEnter`
- `onDragOver`
- `onDragLeave`
- `onDrop`
- 新增 TreeNode 节点属性:
- `disableCheckbox`
- `isLeaf`
- Transfer 给 `onChange` 增加参数。[#972](https://github.com/ant-design/ant-design/issues/972)
- DatePicker
- 修复 RangePicker 开始结束日期相同的 bug。[#822](https://github.com/ant-design/ant-design/issues/822)
- 修复 `format` 对浮层不生效问题。[#917](https://github.com/ant-design/ant-design/issues/917)
- TimePicker 修复一个 `value` 为 `null` 时没有进入受控模式的问题。
- Upload
- 可以用 `headers` 设置上传头部。
- 新增上传图片卡片样式。[演示](http://ant.design/components/upload/#demo-picture-card)
- Radio
- 更换 Radio.Button 的展现样式。
- 可以设置 Radio.Button 的大小。
- Progress
- `format` 属性现在支持自定义 function 的方式进行定义。[#893](https://github.com/ant-design/ant-design/issues/893)
- `format` 指定 string 和 React.Node 的方式被废弃。
- 支持 `style` 属性。[#895](https://github.com/ant-design/ant-design/issues/895)
- message && notification 现在可以销毁。
- Button
- 小号 Button 的圆角调整为 `4px`。
- 修复 Button.Group disabled 后的样式问题。[#926](https://github.com/ant-design/ant-design/issues/926)
- BreadCrumb
- 移除 `router` 属性,无需设置。
- 修复一个链接参数不对的问题。
## 0.11.3
`2016-01-19`
- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
- 修复 Transfer 搜索功能失效的问题。
- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
- 修复 RangePicker 时区无法设置的问题。[#837](https://github.com/ant-design/ant-design/issues/837)
- 修复二维码图标,新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
## 0.11.2
`2015-01-03`
- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
- Table
- 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`,完善选择功能。
- 更新 dataSource 时,选中项现在会被清空。
- 修复一个全选框和禁用的选择项配合的问题。
- 修复 `0.11.1`版本 menu 内嵌型菜单inline选中后关闭的问题。
- 修复 `0.11.1`版本对 React 版本要求太严的问题,对应的警告提示对于 `0.14.x` 将不再出现。
- 组件和文档的样式小调整。
## 0.11.1
`2015-12-29`
- 修复一个 Table 无法修改 pageSize 的问题。
- 修复一个 Table 子表格展开的对齐问题。
- 修复一个 Chrome 下部分图标左侧切边的问题。
- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
## 0.11.0
`2015-12-28`
- **移除默认加载的样式文件,样式现在需要独立加载。**
- 按钮圆角调整为 `6px`。
- Modal、Popconfirm、Table、TimePicker 支持国际化配置。
- 新增虚线型按钮。
- 新增 [通用搜索框](http://ant.design/components/form/#demo-search-input) 样式。
- 新增图片上传列表样式[演示](http://ant.design/components/upload/#demo-picture-style)。
- **部分设计资源开放 [下载](http://ant.design/spec/tools),包括 Axure 组件库和 Iconfont 字体打包文件。**
- 新增 [吊顶规范](http://ant.design/spec/layout/#demo-ceiling)。
- 组件演示页面增加锚点。
- 新增穿梭框 [Transfer](http://ant.design/components/transfer/) 组件。
- 新增小尺寸的 Switch 开关组件。
- 增加更多的图标。[#](https://github.com/ant-design/ant-design/commit/087c64649d73206a4d62e52f9b3f6042c1d28608#diff-dc1a1f4794c1c4ee3b083381d4c50c47R180)
- 全局微调了警告和错误状态色。
- Select
- 选中样式进行了调整。
- 在标签/多选模式下,选中或删除选项增加了动画效果。
- Alert
- 默认样式不展示图标。
- 带描述的警告框图标改为描线图标。
- `type="warn"` 图标修改。
- Dropdown 新增带菜单触发的按钮 `Dropdown.Button`。[演示](http://ant.design/components/dropdown/#demo-dropdown-button)
- Menu
- 新增 `Menu.ItemGroup` 用于把菜单项分组。
- onOpen 和 onClose 函数的参数新增了 `keyPath` 数据,可用于制作手风琴类型的菜单。
- Badge
- 徽章可以独立使用。[演示](http://ant.design/components/badge/#demo-no-wrapper)
- 支持设置封顶的 `99+` 的数字。[演示](http://ant.design/components/badge/#demo-overflow)
- Slider
- 增加 `onAfterChange` 事件。[演示](http://ant.design/components/slider/#demo-event)
- 现在设置 `tipFormatter={null}` 可以隐藏 `Tooltip`。
- 双滑块拖动体验优化,一个滑块在拖动时可以直接跨过另一滑块。
- Breadcrumb 可以自定义分隔符。[演示](http://ant.design/components/breadcrumb/#demo-separator)
- Popconfirm 添加 `visible` 属性,使其可以控制是否显示。[演示](http://ant.design/components/popconfirm/#demo-dynamic-trigger)
- 修复 Icon `ref` 引起的报错。
- 修复 Calendar 组件无法切换年/月的问题。[#757](https://github.com/ant-design/ant-design/issues/757)
- Checkbox 新增 `Checkbox.Group`,现可以方便的 [生成一组选择框](http://ant.design/components/checkbox/#demo-group)
- Tabs
- 新增 [卡片式页签](http://ant.design/components/tabs/#demo-card)。
- 调整 [新增和关闭页签](http://ant.design/components/tabs/#demo-editable-card) 的样式。
- 现在支持页签的四个位置 `tabPosition="top|right|bottom|left"`。
- 移除 `animation` 属性,并在 `tabPosition="top|bottom"` 时默认启用切换动画。
- Timepicker
- **重命名为 TimePicker。**
- 国际化属性 `locale` 结构发生了 [变化](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384)。
- 新增 `value` 属性。
- 新增属性 `disabledHours` `disabledMinutes` `disabledSeconds`。[演示](http://ant.design/components/time-picker/#picker-demo-disable-options)
- 移除 `hourOptions` `minuteOptions` `secondOptions`,新增 `hideDisabled` 属性用于替代。
- Datepicker
- **重命名为 DatePicker。**
- 新增 [日期范围选择控件](http://ant.design/components/date-picker/#picker-demo-range)。
- 修改 `showTime` 的交互。[演示](http://ant.design/components/date-picker/#picker-demo-time)
- 修正为受控组件。
- Table
- **移除 `dataSource` 的远程模式。**
- 新增 [紧凑型表格](http://ant.design/components/table/#demo-size)。
- 允许监听分页的 `onShowSizeChange`。[演示](http://ant.design/components/table/#demo-paging)
- 优化表格对树形数据的显示。[演示](http://ant.design/components/table/#demo-indent-size)
- 优化了筛选菜单的样式,并添加了最大高度。[演示](http://ant.design/components/table/#demo-head)。
- 修复 column.key 设置失效的问题。[#642](https://github.com/ant-design/ant-design/issues/642)
- 修复设置时 rowKey 时单选会导致全部选中的问题。[#697](https://github.com/ant-design/ant-design/issues/697)
- 修复一个列重新渲染导致选项错乱的问题。[#418](https://github.com/ant-design/ant-design/issues/418#issuecomment-163093580)
- 修复选择列无法设置宽度的问题。[#649](https://github.com/ant-design/ant-design/issues/649)
- Form
- 修复了 Textarea 无法输入的问题。[#646](https://github.com/ant-design/ant-design/issues/646)
- 修复了 Textarea 设置 `cols` 和 `rows` 属性失效的问题。[#694](https://github.com/ant-design/ant-design/issues/694)
- 修复无法设置 `className` 的问题。[#711](https://github.com/ant-design/ant-design/issues/711)
- 修复 Upload 组件在 `beforeUpload` 返回 `false` 后依然更新上传列表问题。[#757](https://github.com/ant-design/ant-design/issues/757)
- 工具
- 替换 `antd build` 为 [atool-build](https://github.com/ant-tool/atool-build),重构并改善了 webpack 配置的自定义方式。
- 替换 `antd server` 为 [dora](https://github.com/dora-js/dora),一个完全插件化的开发服务器,支持[代理转发和数据 Mock](https://github.com/dora-js/dora-plugin-proxy)、[atool-build](https://github.com/dora-js/dora-plugin-atool-build)、[热替换](https://github.com/dora-js/dora-plugin-hmr)。
- 新增 babel 插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd),转换 `import {Button} from 'antd'` 为 `import Button from 'antd/lib/button'`。
- 发布了 `antd-init@0.6.x`,支持以上改动。
> [0.11 升级指南](http://ant.design/docs/react/upgrade-notes#0-10-gt-0-11)
## 0.10.5
`2016-01-04`
- 修复 Table 更新 dataSource 后,选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793)
## 0.10.4
`2015-11-30`
- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题,并增加了相关演示。
- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
## 0.10.3
`2015-11-26`
- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`(而非 less 文件),方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
- 升级 Pagination增加 `defaultCurrent` 属性,修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
- 对演示和样式代码增加了 lint 检查。
## 0.10.2
`2015-11-25`
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
- 优化 Badge 动画效果。
- 修复以下问题:
- 文本域的表单校验无法重置。
- 设置 Upload 的 `multiple` 为 `true` 时,未显示每个文件的上传进度。
- Breadcrumb 配合 Router 的时候如果没有 `breadcrumbName` 会抛错。
- InputNumber 同时设置 `size` `className` 时会有冲突。
## 0.10.1
`2015-11-20`
- 修改内部组件的引用结构,方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
- 移除了演示中没有使用过的 `antd.ButtonGroup`,依然用 `const ButtonGroup = Button.Group` 来使用。
- Form 和 Input 目录分离,`import { Form, Input } from 'ant/lib/form'` 的引用方式被废弃。
现在可以 `import Form from 'ant/lib/form'` 和 `import Input from 'ant/lib/input'`。
原有的 `import { Form, Input } from 'antd'` 则不受影响。
- 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题,并将 `calendarStyle` 更名为 `popupStyle`。
## 0.10.0
`2015-11-20`
- 全面兼容 `react@0.14.x`。
- 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。
- [Button](http://ant.design/components/button/)、[Iconfont](http://ant.design/components/icon/)、[Layout](http://ant.design/components/layout/)、[Form](http://ant.design/components/form/)、[Input](http://ant.design/components/form/#demo-input) 等样式模块改造为 React 组件。
- 新增 [Queue-anim](http://ant.design/components/queue-anim/) 组件,更换了原来的 enter-animation。
- 全新的[字体图标](/components/icon)。
- 全面更新视觉风格,补充更多图标。[#313](https://github.com/ant-design/ant-design/issues/313)
- 调整字体基线,告别对图标位置的特殊调节。(感谢 [iconfont.cn](http://iconfont.cn) 的鼎力支持)
- Datepicker、Dropdown、Select、Popover、Popconfirm 等浮层组件添加在空间不足的情况下自动调整位置功能。
- Popover、Tooltip、Popconfirm 组件支持 12 个方向。[#312](https://github.com/ant-design/ant-design/issues/312)
- 优先使用苹方字体。
- 统一 size 属性的可选值为 `small` `default` `large`。
- 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
- 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
- 添加布局和导航规范,以及[常用布局](http://ant.design/spec/layout/)。
- 文档支持标题和演示的锚点,方便分享文档和演示代码。
- 提供多版本的文档,在[主站](http://ant.design)的右下角提供切换按钮。
- [antd-bin](https://github.com/ant-tool/xtool) 升级到 `0.10`。
- 拆分出 [antd-init](https://github.com/ant-design/antd-init) 和 [antd-build](https://github.com/ant-design/antd-build)。
- 提供代理功能。
- 提供 UI 测试功能。
#### 组件变更
- Table
- 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
- 列支持了 `colSpan` 和 `rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
- 新增 `loading` 属性。
- 筛选增加 `filterMultiple` 属性,支持单选的配置。
- Datepicker
- 添加国际化支持。
- 添加手动输入和清除功能。
- 优化了视觉样式。
- 修复不标准的日期格式导致显示错误的问题。
- 用 `onChange` 属性代替 `onSelect` 属性。
- Validation 修复了 对 Datepicker、Input-number、Select 的支持,并添加了相关演示。
- Carousel 的依赖 react-slick 升级到 0.9.x相关 API 也相应更新。
- Tree 组件支持完全受控模式。[#397](https://github.com/ant-design/ant-design/issues/397)
- Input Number
- 组件输入体验优化,现在可以键入任意字符,失焦时格式化为合法值。
- 修复不支持小数 step 的问题。[#530](https://github.com/ant-design/ant-design/issues/530)
- Tabs 新增[垂直页签功能](http://ant.design/components/tabs/#demo-vertical-left)。
- Upload 组件视觉优化,新增高级浏览器下的上传进度展示。[#311](https://github.com/ant-design/ant-design/issues/311)
- Menu
- 视觉效果大幅优化。
- 新增 [dark 主题](http://ant.design/components/menu/#demo-theme) 的样式。
- 修复一个链接点击区域的问题。[#535](https://github.com/ant-design/ant-design/issues/535)
- Dropdown 用 onClick 代替 onSelect 作为推荐的使用方式,因为原有的 onSelect 只在变化时触发。
- Slider
- 新增[双滑块功能](http://ant.design/components/slider/#demo-range)。
- 优化 marks 属性的使用逻辑,使其可以和具体数值进行绑定。[slider#26](https://github.com//react-component/slider/issues/26)
- 属性命名优化,用 `dots` 代替了 `withDots` 属性,用 `included` 代替了 `isIncluded`。
- Badge 当 `count` 为 0 时不展示。
- Progress 新增 `format` 属性,能够自定义展示的进度文案。
- Modal 新增 `confirmLoading` 属性。
- 新增 Radio.Button 的失效样式。
- 提供 IE8 下的圆角按钮[兼容方案](http://ant.design/components/button/#ie8-border-radius-support)。
- `antd.Notification()` 修正为 `antd.notification()`。
- 另有巨量样式的修复和优化。
> 备注:
>
> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
> - [0.10 升级指南](http://010x.ant.design/docs/upgrade-to-0.10)
---
## 0.9.3 ~ 0.9.5
`2015-11-04`
* 增加对 React 版本的检测提示机制0.9.x 序列只能使用 `react@~0.13.3`。
## 0.9.2
`2015-10-26`
* Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76)
* 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d)
* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](https://github.com/ant-design/ant-design/commit/9ef14500f3abfcc7081f8dceab8187ec835e3918)
* 修复一些小的样式问题。
## 0.9.1
`2015-09-26`
* 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)
* 升级依赖 rc-upload 到 1.6.x修复 IE8/9 下的兼容性问题。
* 升级依赖 rc-steps 到 1.3.x。
* 新增 current 属性,方便配置当前的步骤。[#290](https://github.com/ant-design/ant-design/issues/290)
* 修复因滚动条影响页面宽度导致的错位问题。
* 升级依赖 rc-menu 到 1.5.x。
* 新增 onSelect 回调中返回参数 keyPath从而支持只展开当前父级菜单的交互方式。[demo](http://ant.design/components/menu/#demo-sider-current)
* 修复 hover 类型的弹出菜单能响应点击事件的问题。[react-component/menu#14](https://github.com/react-component/menu/issues/14)
* 修复一个 Table 的分页无法正确展示的问题。[#253](https://github.com/ant-design/ant-design/issues/253)
* 修复一个 combobox 选择框无法选中的问题。[0435ca6](https://github.com/ant-design/ant-design/commit/0435ca60e3b574bac3808a10ba3db62f482335fd)
* 修复 Radio.Button 在 IE 8 下不可用的问题。[#321](https://github.com/ant-design/ant-design/issues/321)
* 适配 breadcrumb 面包屑组件和 `react-router@1.0.0-rc1`。
* 修复只能同时弹出一个 Modal 通知框的问题。[d6a4094](https://github.com/ant-design/ant-design/commit/d6a4094bc4c72acd05be001c7e46dbd17092001a)
* 升级依赖 rc-tooltip 到 2.8.0,增加 overlayClassName 属性。
* 部分组件交互和视觉效果修正。
## 0.9.0
`2015-09-14`
* 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
* 优化弹出层类组件的动画效果,使其更加流畅。
* 部分文案更新。
* 优化主站在小分辨率屏幕下的样式。
* 使用 instantclick 改造主站,加载速度有明显提升。
* antd-bin 升级到 [0.6.x](https://github.com/ant-design/antd-bin/blob/master/HISTORY.md) 。
* Upload **重构了 API 接口,不向下兼容**,支持自定义的功能扩展。
* 新增 `onChange(file) {}` 接口,移出原来的 `onSuccess`、`onProgess`、`onError` 等接口。
* 新增 `fileList` 和 `defaultFileList` 属性,以满足更多的自定义功能,具体见演示。
* 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。
* 移除内建的上传成功或失败的信息提示,业务可自行实现。
* 修正多文件选择上传时文件列表只展示一个文件的问题。
* Table
* 新增可展开的 table。[#258](https://github.com/ant-design/ant-design/pull/258)
* 新增无数据的展示样式。[4c54644](https://github.com/ant-design/ant-design/commit/4c54644116d46cb2510d2d475234529bad60e5d5)
* 修复本地模式 `dataSource` 无法更新的问题。[6d2dcc4](https://github.com/ant-design/ant-design/commit/6d2dcc45393b6ec0ad1ba73caf8b1ec42353743f)
* 修复远程模式 loading 失效的问题。[9b8abb2](https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf)
* 用 [reqwest-without-xhr2](http://npmjs.com/reqwest-without-xhr2) 代替了 reqwest解决某些开发环境下 xhr2 依赖的问题。
* Select
* 增加 label 属性,允许多选模式下展示标签(原来只能显示 value 值)。[演示](http://react-component.github.io/select/examples/mul-suggest.html)
* 修复 combobox 模式下 value 失效的问题。
* Notification 修复不会自动消失的问题。[23fce55](https://github.com/ant-design/ant-design/commit/23fce559b0b2faf4e0b686a92dbcdd045727a464)
* Steps 新增竖版的步骤条。
* Carousel 修复 fade 模式下可以拖拽的问题。#212
* Collapse 修复动画不生效的问题。
* Datepicker 修复无法设置为空值的问题。
* Modal
* 添加 [通知类型](http://ant.design/components/modal/#demo-info) 的对话框函数。
* 用 `Modal.confirm()` 代替 `confirm()` 方法。
* 修改为需要在 onCancel 手动设置 visible 属性来关闭。
* Message 添加 [加载中类型](http://ant.design/components/message/#demo-loading)。
* Radio 修改 Radio.Group 容器的盒模型属性为 inline-block 。
* Enter Animation
* 大幅度的重构,全新 API 的设计。
* 支持和 react-router 结合使用。
## 0.8.0
`2015-08-25`
这个版本是第一个稳定版,组件经过三期迭代,基本到齐,并有大量改进和变化,不向下兼容。
* 新增九个组件 `menu`、`upload`、`carousel`、`tree`、`notification`、`validation`、`affix`、`alert`、`enterAnimation`。目前共有组件 34 个,基本能满足后台类项目的组件需求。
* 新增设计文档部分,包括文字、色彩、动画。
* 重新梳理了设计和 React 实现部分的关系,强调了 Ant Design 的设计属性,并更新了网站的信息结构。
* 构建工具 `antd-bin` 升级到 `0.4.0` 版本,支持合并 webpack 配置热替换HMR等特性[详见](https://github.com/ant-design/antd-bin)。
* 组件动画优化和补充,体验更加流畅动感。
* 排查并修复 IE 和 safari 等浏览器的兼容问题。
* 大量代码重构,演示代码补充,文档更新、以及样式上的优化。
## 0.7.3
`2015-07-30`
* 小幅重构了 Table 分页,修复了分页导致的数据不展示的问题。
* 更新了部分文档。
## 0.7.2
`2015-07-27`
* 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
* 重构了 message 组件。
* 添加英文版说明文档 [README-en_US.md](https://github.com/ant-design/ant-design/blob/master/README-en_US.md)。
* 部分代码切换至 ES6 模式。
* 修正了部分组件的样式和演示,优化部分动画。
## 0.7.1
`2015-07-22`
* 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。
* select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)(原来是显示 value
* 修正了部分组件的样式和演示。
* 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。
## 0.7.0
`2015-07-21`
* 第一个公开版本,发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。
* 发布 [Ant Design 首页](http://ant.design/) 和入门文档。

View File

@@ -11,8 +11,9 @@
## 特性
- 提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件
- 基于 npm + webpack + babel 的工作流,支持 ES2015 和 TypeScript
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI
- 基于 npm + webpack + babel 的工作流,支持 ES2015。
## 安装
@@ -56,13 +57,11 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- [修改记录](CHANGELOG.md)
- [开发脚手架](https://github.com/ant-design/antd-init/)
- [开发工具文档](http://ant-tool.github.io/)
- [React 基础组件](http://react-component.github.io/)
- [移动端组件](http://mobile.ant.design)
- [React 组件](http://react-component.github.io/)
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%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/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
## 如何贡献

View File

@@ -14,8 +14,8 @@ We are now working on translate components document to English, and we need some
## Features
- An enterprise-class design language and high quality UI.
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
- An enterprise-class design language and high quality UI style.
- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).
## Install
@@ -54,9 +54,9 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```jsx
// import js and css modularly, parsed by babel-plugin-antd
import { DatePicker } from 'antd';
import { DatePicker } from 'antd';
```
- Manually import
```jsx
@@ -91,11 +91,10 @@ tsconfig.json
- [Scaffold tool](https://github.com/ant-design/antd-init/)
- [Development tool](http://ant-tool.github.io/)
- [React components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports

View File

@@ -8,8 +8,13 @@ title: 固定状态改变的回调
````jsx
import { Affix, Button } from 'antd';
const onChange = function (affixed) {
console.log(affixed); // true or false
};
ReactDOM.render(
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
<Affix offsetTop={120} onChange={onChange}>
<Button>固定在距离顶部 120px 的位置</Button>
</Affix>
, mountNode);

View File

@@ -1,9 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import { Dom } from 'rc-util';
import classNames from 'classnames';
import warning from 'warning';
import shallowequal from 'shallowequal';
function getScroll(w, top) {
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
@@ -48,39 +47,10 @@ export default class Affix extends React.Component {
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) => {
handleScroll = () => {
let { offsetTop, offsetBottom, offset } = this.props;
// Backwards support
@@ -103,39 +73,40 @@ export default class Affix extends React.Component {
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
// Fixed Top
this.setAffixStyle(e, {
position: 'fixed',
top: offsetTop,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
});
this.setPlaceholderStyle(e, {
width: ReactDOM.findDOMNode(this).offsetWidth,
height: ReactDOM.findDOMNode(this).offsetHeight,
});
if (!this.state.affixStyle) {
this.setState({
affixStyle: {
position: 'fixed',
top: offsetTop,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
},
}, () => this.props.onChange(!!this.state.affixStyle));
}
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
offsetMode.bottom) {
// Fixed Bottom
this.setAffixStyle(e, {
position: 'fixed',
bottom: offsetBottom,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
});
this.setPlaceholderStyle(e, {
width: ReactDOM.findDOMNode(this).offsetWidth,
height: ReactDOM.findDOMNode(this).offsetHeight,
});
} else {
this.setAffixStyle(e, null);
this.setPlaceholderStyle(e, null);
if (!this.state.affixStyle) {
this.setState({
affixStyle: {
position: 'fixed',
bottom: offsetBottom,
left: elemOffset.left,
width: ReactDOM.findDOMNode(this).offsetWidth,
},
}, () => this.props.onChange(!!this.state.affixStyle));
}
} else if (this.state.affixStyle) {
this.setState({
affixStyle: null,
}, () => this.props.onChange(!!this.state.affixStyle));
}
}
componentDidMount() {
warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.');
this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
this.resizeEvent = addEventListener(window, 'resize', this.handleScroll);
this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
}
componentWillUnmount() {
@@ -152,12 +123,8 @@ export default class Affix extends React.Component {
'ant-affix': this.state.affixStyle,
});
const props = { ...this.props };
delete props.offsetTop;
delete props.offsetBottom;
return (
<div {...props} style={this.state.placeholderStyle}>
<div {...this.props}>
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
{this.props.children}
</div>

View File

@@ -16,13 +16,11 @@ ReactDOM.render(<div>
<Alert message="警告提示的文案"
type="warning"
closable
onClose={onClose}
/>
onClose={onClose} />
<Alert message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
closable
onClose={onClose}
/>
onClose={onClose} />
</div>, mountNode);
````

View File

@@ -11,21 +11,17 @@ import { Alert } from 'antd';
ReactDOM.render(<div>
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success"
/>
type="success" />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"
/>
type="info" />
<Alert
message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warning"
/>
type="warning" />
<Alert
message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
/>
type="error" />
</div>, mountNode);
````

View File

@@ -16,24 +16,20 @@ ReactDOM.render(<div>
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success"
showIcon
/>
showIcon />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"
showIcon
/>
showIcon />
<Alert
message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warning"
showIcon
/>
showIcon />
<Alert
message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
showIcon
/>
showIcon />
</div>, mountNode);
````

View File

@@ -29,7 +29,7 @@ export default class Alert extends React.Component {
this.setState({
closing: false,
});
this.props.onClose(e);
this.props.onClose.call(this, e);
}
animationEnd = () => {
this.setState({
@@ -81,9 +81,8 @@ export default class Alert extends React.Component {
return this.state.closed ? null : (
<Animate component=""
showProp="data-show"
transitionName={`${prefixCls}-slide-up`}
onEnd={this.animationEnd}
>
transitionName="slide-up"
onEnd={this.animationEnd}>
<div data-show={this.state.closing} className={alertCls}>
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
<span className={`${prefixCls}-message`}>{message}</span>

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 警告提示
type: Views
type: Presentation
english: Alert
---

View File

@@ -121,43 +121,14 @@
display: block;
}
&&-close {
height: 0 !important;
&-close {
height: 0;
opacity: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
transition: all .3s @ease-in-out-circ;
transition: all .3s @ease-in-out;
transform-origin: 50% 0;
}
&-slide-up-leave {
animation: antAlertSlideUpOut .3s @ease-in-out-circ;
animation-fill-mode: both;
}
}
@keyframes antAlertSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes antAlertSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
animation-timing-function: @ease-in-out !important;
}
}

View File

@@ -1,17 +0,0 @@
---
order: 0
title: 基本
---
最简单的用法。
````jsx
import { BackTop } from 'antd';
ReactDOM.render(
<div>
<BackTop />
向下滚动后,见右下角灰色按钮
</div>
, mountNode);
````

View File

@@ -1,30 +0,0 @@
---
order: 1
title: 自定义样式
---
可以自定义回到顶部按钮的样式,限制宽高:`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);
````

View File

@@ -1,101 +0,0 @@
import 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;
}
export default class BackTop extends React.Component {
static propTypes = {
visibilityHeight: React.PropTypes.number,
}
static defaultProps = {
onClick() {},
visibilityHeight: 400,
prefixCls: 'ant-back-top',
}
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, ...otherProps } = 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(otherProps, [
'visibilityHeight',
]);
return (
<Animate component="" transitionName="fade">
{
this.state.visible ?
<div {...divProps} className={classString} onClick={this.scrollToTop}>
{children || defaultElement}
</div>
: null
}
</Animate>
);
}
}

View File

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

View File

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

View File

@@ -1,33 +0,0 @@
@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;
}
}

View File

@@ -1,7 +1,6 @@
import React, { createElement } from 'react';
import { findDOMNode } from 'react-dom';
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
import omit from 'object.omit';
function getNumberArray(num) {
return num ?
@@ -105,8 +104,8 @@ export default class ScrollNumber extends React.Component {
className: `${this.props.prefixCls}-only`,
style: {
transition: removeTransition && 'none',
WebkitTransform: `translateY(${-position * height}px)`,
transform: `translateY(${-position * height}px)`,
WebkitTransform: `translate3d(0, ${-position * height}px, 0)`,
transform: `translate3d(0, ${-position * height}px, 0)`,
height,
},
key: i,
@@ -123,18 +122,12 @@ export default class ScrollNumber extends React.Component {
}
render() {
const { component, prefixCls, className, ...otherProps } = this.props;
// fix https://fb.me/react-unknown-prop
const restProps = omit(otherProps, [
'count',
'onAnimated',
]);
const props = {
...restProps,
className: `${prefixCls} ${className}`,
...this.props,
className: `${this.props.prefixCls} ${this.props.className}`,
};
return createElement(
component,
this.props.component,
props,
this.renderNumberElement()
);

View File

@@ -21,7 +21,8 @@ export default class Badge extends React.Component {
}
render() {
let { count, prefixCls, overflowCount, className, style, children, dot } = this.props;
let { count, prefixCls, overflowCount, className, style, children } = this.props;
const dot = this.props.dot;
count = count > overflowCount ? `${overflowCount}+` : count;
@@ -40,22 +41,16 @@ export default class Badge extends React.Component {
});
return (
<span className={badgeCls} title={count} style={null}>
<span className={badgeCls} title={count} {...this.props} style={null}>
{children}
<Animate
component=""
<Animate component=""
showProp="data-show"
transitionName={`${prefixCls}-zoom`}
transitionAppear
>
transitionAppear>
{
hidden ? null :
<ScrollNumber
data-show={!hidden}
className={scrollNumberCls}
count={count}
style={style}
/>
<ScrollNumber data-show={!hidden} className={scrollNumberCls}
count={count} style={style} />
}
</Animate>
</span>

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 徽标数
type: Views
type: Presentation
english: Badge
---

View File

@@ -1,24 +1,12 @@
import React, { 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>;
};
export default class Breadcrumb extends React.Component {
static defaultProps = {
prefixCls: 'ant-breadcrumb',
separator: '/',
linkRender: (href, name) => <a href={`#${href}`}>{name}</a>,
nameRender: defaultNameRender,
nameRender: (name) => <span>{name}</span>,
}
static propTypes = {
@@ -38,7 +26,6 @@ export default class Breadcrumb extends React.Component {
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(/^\//, '');
@@ -48,12 +35,21 @@ export default class Breadcrumb extends React.Component {
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>;
if (!route.breadcrumbName) {
return null;
}
return null;
const name = route.breadcrumbName.replace(/:(.*)/g, (replacement, key) => {
return params[key] || replacement;
});
let link;
if (i === routes.length - 1) {
link = nameRender(name);
} else {
link = linkRender(`/${paths.join('/')}`, name);
}
return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
});
} else {
crumbs = React.Children.map(children, (element, index) => {

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,32 +0,0 @@
---
category: Components
type: Navigation
title: Breadcrumb
---
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up 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 functionand react-router configuration | Function(href, name) | | - |
| nameRender | Custom link functionand react-router configuration | Function(name) | | - |

View File

@@ -29,5 +29,5 @@ english: Breadcrumb
| routes | router 的路由栈信息 | Array | | - |
| params | 路由的参数 | Object | | - |
| separator | 分隔符自定义 | String or Element | | '/' |
| linkRender | 自定义链接函数,和 react-router 配置使用 | Function(href, name, paths) | | - |
| nameRender | 自定义文字函数,和 react-router 配置使用 | Function(breadcrumbName, route, params) | | - |
| linkRender | 自定义链接函数,和 react-router 配置使用 | Function(href, name) | | - |
| nameRender | 自定义链接函数,和 react-router 配置使用 | Function(name) | | - |

View File

@@ -8,10 +8,6 @@
a {
color: @text-color;
transition: color .3s;
&:hover {
color: tint(@primary-color, 20%);
}
}
& > span:last-child {
@@ -28,9 +24,7 @@
color: @border-color-base;
}
&-link {
> .anticon + span {
margin-left: 4px;
}
.anticon + span {
margin-left: 4px;
}
}

View File

@@ -104,8 +104,7 @@ export default class Button extends React.Component {
type={htmlType || 'button'}
className={classes}
onMouseUp={this.handleMouseUp}
onClick={this.handleClick}
>
onClick={this.handleClick}>
{iconType ? <Icon type={iconType} /> : null}{kids}
</button>
);

View File

@@ -45,8 +45,7 @@ export default class Header extends React.Component {
dropdownMenuStyle={{ minWidth: 103 }}
className={`${prefixCls}-year-select`}
onChange={this.onYearChange}
value={String(year)}
>
value={String(year)}>
{options}
</Select>
);
@@ -70,8 +69,7 @@ export default class Header extends React.Component {
dropdownMatchSelectWidth={false}
className={`${prefixCls}-month-select`}
value={String(month)}
onChange={this.onMonthChange}
>
onChange={this.onMonthChange}>
{options}
</Select>
);

View File

@@ -26,7 +26,6 @@ function monthCellRender(value) {
ReactDOM.render(
<Calendar defaultValue={new Date('2010-10-10')}
dateCellRender={dateCellRender} monthCellRender={monthCellRender}
/>
dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
, mountNode);
````

View File

@@ -45,7 +45,7 @@ function getListData(value) {
}
function dateCellRender(value) {
const listData = getListData(value);
let listData = getListData(value);
return (
<ul className="events">
{

View File

@@ -1,6 +1,6 @@
---
category: Components
type: Views
type: Presentation
cols: 1
title: Calendar
---

View File

@@ -139,8 +139,7 @@ export default class Calendar extends React.Component {
locale={locale.lang}
prefixCls={prefixCls}
onTypeChange={this.setType}
onValueChange={this.setValue}
/>
onValueChange={this.setValue} />
<FullCalendar
{...props}
Select={noop}
@@ -150,8 +149,7 @@ export default class Calendar extends React.Component {
showHeader={false}
value={value}
monthCellRender={this.monthCellRender}
dateCellRender={this.dateCellRender}
/>
dateCellRender={this.dateCellRender} />
</div>
);
}

View File

@@ -1,6 +1,6 @@
---
category: Components
type: Views
type: Presentation
chinese: 日历
cols: 1
english: Calendar

View File

@@ -35,11 +35,11 @@ ReactDOM.render(
````css
/* Increase grid spacing of 16px */
.code-box-demo .ant-row {
.code-box-demo .row {
margin-left: -8px;
margin-right: -8px;
}
.code-box-demo .ant-row > div {
.code-box-demo .row > div {
padding: 0 8px;
}
````

View File

@@ -1,8 +1,7 @@
---
category: Components
type: Views
type: Presentation
title: Card
cols: 1
---
Common card container.

View File

@@ -1,9 +1,8 @@
---
category: Components
type: Views
type: Presentation
title: Card
subtitle: 卡片
cols: 1
---
通用卡片容器。

View File

@@ -1,18 +1,10 @@
---
order: 3
title:
zh-CN: 自动切换
en-US: Scroll automatically
title: 自动切换
---
## zh-CN
定时切换下一张。
## en-US
Timing of scrolling to the next card/picture.
````jsx
import { Carousel } from 'antd';

View File

@@ -1,18 +1,10 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
title: 基本
---
## zh-CN
最简单的用法。
## en-US
Basic usage.
````jsx
import { Carousel } from 'antd';

View File

@@ -1,18 +1,10 @@
---
order: 2
title:
zh-CN: 渐显
en-US: Fade in
title: 渐显
---
## zh-CN
切换效果为渐显。
## en-US
Slides use fade for transition.
````jsx
import { Carousel } from 'antd';

View File

@@ -1,18 +1,10 @@
---
order: 1
title:
zh-CN: 垂直
en-US: Vertical
title: 垂直
---
## zh-CN
垂直显示。
## en-US
Vertical pagination.
````jsx
import { Carousel } from 'antd';

View File

@@ -1,41 +0,0 @@
---
category: Components
type: Views
title: Carousel
---
A carousel component. Scales with its container.
## When to use
- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a resolving door.
- Commonly used in a carousel for a group of pictures/cards.
## API
| Property | Description | Type | Default |
|------------------|----------------------------------------------|----------|---------------------------------|
| effect | Animation effect, either `scrollx` or `fade` | String | scrollx |
| dots | Should we show the dots at the bottom of the gallery | Boolean | true |
| vertical | Whether to use a vertical display | Boolean | false |
| autoplay | Whether to scroll automatically | Boolean | false |
| easing | Transition name | String | linear |
| beforeChange | Callback function called before the current index changes | function(from, to) |
| afterChange | Callback function called after the current index changes | function(current) |
For more info on the parameters, refer to the https://github.com/akiran/react-slick
<style>
.ant-carousel .slick-slide {
text-align: center;
height: 100px;
line-height: 100px;
background: #71B5DE;
color: #fff;
overflow: hidden;
}
#components-carousel-demo-vertical .ant-carousel {
margin-right: 35px;
}
</style>

View File

@@ -1,8 +1,8 @@
---
category: Components
type: Views
title: Carousel
subtitle: 走马灯
chinese: 走马灯
type: Presentation
english: Carousel
---
旋转木马,一组轮播的区域。

View File

@@ -56,7 +56,6 @@ ReactDOM.render(
options={options}
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
displayRender={displayRender}
style={{ width: 200 }}
/>
style={{ width: 200 }} />
, mountNode);
````

View File

@@ -43,7 +43,6 @@ function displayRender(label) {
ReactDOM.render(
<Cascader options={options} expandTrigger="hover"
displayRender={displayRender} onChange={onChange}
/>
displayRender={displayRender} onChange={onChange} />
, mountNode);
````

View File

@@ -4,7 +4,6 @@ import Input from '../input';
import Icon from '../icon';
import arrayTreeFilter from 'array-tree-filter';
import classNames from 'classnames';
import omit from 'object.omit';
export default class Cascader extends React.Component {
static defaultProps = {
@@ -74,7 +73,6 @@ export default class Cascader extends React.Component {
const props = this.props;
const { prefixCls, children, placeholder, size, disabled,
className, style, allowClear, ...otherProps } = props;
const sizeCls = classNames({
'ant-input-lg': size === 'large',
'ant-input-sm': size === 'small',
@@ -82,8 +80,7 @@ export default class Cascader extends React.Component {
const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
<Icon type="cross-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/> : null;
onClick={this.clearSelection} /> : null;
const arrowCls = classNames({
[`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
@@ -95,41 +92,24 @@ export default class Cascader extends React.Component {
});
// Fix bug of https://github.com/facebook/react/pull/5004
// and https://fb.me/react-unknown-prop
const inputProps = omit(otherProps, [
'onChange',
'options',
'popupPlacement',
'transitionName',
'displayRender',
'onPopupVisibleChange',
'changeOnSelect',
'expandTrigger',
'popupVisible',
'getPopupContainer',
'loadData',
'popupClassName',
]);
delete otherProps.onChange;
return (
<RcCascader {...props}
value={this.state.value}
popupVisible={this.state.popupVisible}
onPopupVisibleChange={this.handlePopupVisibleChange}
onChange={this.handleChange}
>
onChange={this.handleChange}>
{children ||
<span
style={style}
className={pickerCls}
>
<Input {...inputProps}
className={pickerCls}>
<Input {...otherProps}
placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
className={`${prefixCls}-input ${sizeCls}`}
className={`${prefixCls}-input ant-input ${sizeCls}`}
value={null}
disabled={disabled}
readOnly
/>
readOnly />
<span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
{clearIcon}
<Icon type="down" className={arrowCls} />

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 级联选择
type: Form Controls
type: Form Control
english: Cascader
---

View File

@@ -5,11 +5,10 @@
.@{cascader-prefix-cls} {
font-size: @font-size-base;
&-input.ant-input {
&-input {
display: block;
cursor: pointer;
width: 100%;
z-index: 1;
}
&-picker {
position: relative;
@@ -17,8 +16,7 @@
cursor: pointer;
vertical-align: middle;
font-size: @font-size-base;
background-color: #fff;
border-radius: @border-radius-base;
overflow: hidden;
&-disabled {
cursor: not-allowed;
@@ -26,24 +24,20 @@
&-label {
position: absolute;
left: 0;
top: 0;
left: 8px;
height: 20px;
line-height: 20px;
top: 50%;
margin-top: -10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
padding: 0 12px 0 8px;
z-index: 1;
}
&-clear {
opacity: 0;
position: absolute;
right: 8px;
z-index: 2;
z-index: 1;
background: #fff;
top: 50%;
font-size: 12px;
@@ -66,7 +60,6 @@
// arrow
&-arrow {
position: absolute;
z-index: 1;
top: 50%;
right: 8px;
width: 12px;
@@ -74,6 +67,7 @@
margin-top: -6px;
line-height: 12px;
color: #999;
background: #fff;
.iconfont-size-under-12px(8px);
&:before {
transition: transform 0.2s ease;
@@ -140,9 +134,11 @@
}
}
&-menu-item {
padding: 7px 26px 7px 16px;
padding: 7px 16px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.3s ease;
&:hover {
background: tint(@primary-color, 90%);
@@ -164,7 +160,8 @@
&-expand {
position: relative;
&:after {
.iconfont-font("\e600");
content: '\e600';
font-family: 'anticon';
.iconfont-size-under-12px(8px);
color: #999;
position: absolute;

View File

@@ -1,6 +1,5 @@
import React from 'react';
import Checkbox from './index';
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class CheckboxGroup extends React.Component {
static defaultProps = {
@@ -31,9 +30,6 @@ export default class CheckboxGroup extends React.Component {
});
}
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
getOptions() {
const { options } = this.props;
return options.map(option => {
@@ -68,8 +64,7 @@ export default class CheckboxGroup extends React.Component {
<Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
checked={this.state.value.indexOf(option.value) !== -1}
onChange={() => this.toggleOption(option)}
className="ant-checkbox-group-item" key={option.value}
>
className="ant-checkbox-group-item" key={option.value}>
{option.label}
</Checkbox>
)

View File

@@ -13,6 +13,6 @@ function onChange(e) {
}
ReactDOM.render(
<Checkbox onChange={onChange}>Checkbox</Checkbox>
<Checkbox defaultChecked={false} onChange={onChange}>Checkbox</Checkbox>
, mountNode);
````

View File

@@ -22,21 +22,18 @@ const App = React.createClass({
<p style={{ marginBottom: '20px' }}>
<Checkbox checked={this.state.checked}
disabled={this.state.disabled}
onChange={this.onChange}
>
onChange={this.onChange}>
{label}
</Checkbox>
</p>
<p>
<Button type="primary" size="small"
onClick={this.toggleChecked}
>
onClick={this.toggleChecked}>
{!this.state.checked ? '选中' : '取消'}
</Button>
<Button style={{ marginLeft: '10px' }}
type="primary" size="small"
onClick={this.toggleDisable}
>
onClick={this.toggleDisable}>
{!this.state.disabled ? '不可用' : '可用'}
</Button>
</p>

View File

@@ -2,16 +2,12 @@ import RcCheckbox from 'rc-checkbox';
import React from 'react';
import CheckboxGroup from './Group';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class Checkbox extends React.Component {
static Group = CheckboxGroup;
static defaultProps = {
prefixCls: 'ant-checkbox',
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
render() {
const { prefixCls, style, children, className, ...restProps } = this.props;
const classString = classNames({

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 多选框
type: Form Controls
type: Form Control
english: Checkbox
---
@@ -16,17 +16,17 @@ english: Checkbox
### Checkbox
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| checked | 指定当前是否选中 | boolean | | false |
| defaultChecked | 初始是否选中 | boolean | | false |
| onChange | 变化时回调函数 | Function(e:Event) | | | |
### Checkbox Group
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| defaultValue | 默认选中的选项 | array | [] |
| value | 指定选中的选项| array | [] |
| options | 指定可选项 | array | [] |
| onChange | 变化时回调函数 | Function(checkedValue) | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|---------|--------|
| defaultValue | 默认选中的选项 | array | | [] |
| value | 指定选中的选项| array | | [] |
| options | 指定可选项 | array | | [] |
| onChange | 变化时回调函数 | Function(checkedValue) | | | |

View File

@@ -151,20 +151,11 @@
.@{checkbox-inner-prefix-cls}-input {
cursor: default;
}
& + span {
color: #ccc;
cursor: @cursor-disabled;
}
}
.@{checkbox-prefix-cls}-wrapper {
cursor: pointer;
font-size: @font-size-base;
display: inline-block;
& + & {
margin-left: 8px;
}
}
.@{checkbox-prefix-cls}-wrapper + span,
@@ -183,21 +174,4 @@
display: inline-block;
}
}
@ie8: \0screen;
// IE8 hack for https://github.com/ant-design/ant-design/issues/2148
@media @ie8 {
.@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
.@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
.iconfont-font("\e62e");
font-weight: bold;
font-size: 8px;
border: 0;
color: #fff;
left: 2px;
top: 3px;
position: absolute;
}
}
}

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 折叠面板
type: Views
type: Presentation
english: Collapse
---

View File

@@ -3,7 +3,6 @@ import GregorianCalendar from 'gregorian-calendar';
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import Icon from '../icon';
export default class RangePicker extends React.Component {
static defaultProps = {
@@ -34,13 +33,6 @@ export default class RangePicker extends React.Component {
}
}
clearSelection = (e) => {
e.preventDefault();
e.stopPropagation();
this.setState({ value: [] });
this.handleChange([]);
}
handleChange = (value) => {
const props = this.props;
if (!('value' in props)) {
@@ -70,15 +62,21 @@ export default class RangePicker extends React.Component {
'ant-calendar-time': showTime,
});
// 需要选择时间时,点击 ok 时才触发 onChange
let pickerChangeHandler = {
onChange: this.handleChange,
};
let calendarHandler = {
onOk: this.handleChange,
};
if (props.timePicker) {
pickerChangeHandler = {};
pickerChangeHandler.onChange = (value) => {
// Click clear button
if (value === null || value.length === 0) {
this.handleChange(value);
}
};
} else {
calendarHandler = {};
}
@@ -102,13 +100,6 @@ export default class RangePicker extends React.Component {
/>
);
const clearIcon = (!props.disabled && state.value && (state.value[0] || state.value[1]))
? <Icon
type="cross-circle"
className="ant-calendar-picker-clear"
onClick={this.clearSelection}
/> : null;
return (<span className={props.pickerClass} style={style}>
<RcDatePicker
formatter={props.getFormatter()}
@@ -132,20 +123,17 @@ export default class RangePicker extends React.Component {
<span className={props.pickerInputClass} disabled={disabled}>
<input
disabled={disabled}
readOnly
onChange={props.handleInputChange}
value={start ? props.getFormatter().format(start) : ''}
placeholder={startPlaceholder}
className="ant-calendar-range-picker-input"
/>
className="ant-calendar-range-picker-input" />
<span className="ant-calendar-range-picker-separator"> ~ </span>
<input
disabled={disabled}
readOnly
onChange={props.handleInputChange}
value={end ? props.getFormatter().format(end) : ''}
placeholder={endPlaceholder}
className="ant-calendar-range-picker-input"
/>
{clearIcon}
className="ant-calendar-range-picker-input" />
<span className="ant-calendar-picker-icon" />
</span>
);

View File

@@ -3,7 +3,6 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import GregorianCalendar from 'gregorian-calendar';
import classNames from 'classnames';
import Icon from '../icon';
export default function createPicker(TheCalendar) {
return class CalenderWrapper extends React.Component {
@@ -23,13 +22,6 @@ export default function createPicker(TheCalendar) {
}
}
clearSelection = (e) => {
e.preventDefault();
e.stopPropagation();
this.setState({ value: null });
this.handleChange(null);
}
handleChange = (value) => {
const props = this.props;
if (!('value' in props)) {
@@ -58,25 +50,6 @@ export default function createPicker(TheCalendar) {
'ant-calendar-month': MonthCalendar === TheCalendar,
});
// 需要选择时间时,点击 ok 时才触发 onChange
let pickerChangeHandler = {
onChange: this.handleChange,
};
let calendarHandler = {
onOk: this.handleChange,
// fix https://github.com/ant-design/ant-design/issues/1902
onSelect: (value, cause) => {
if (cause && cause.source === 'todayButton') {
this.handleChange(value);
}
},
};
if (props.showTime) {
pickerChangeHandler = {};
} else {
calendarHandler = {};
}
const calendar = (
<TheCalendar
formatter={props.getFormatter()}
@@ -88,8 +61,6 @@ export default function createPicker(TheCalendar) {
dateInputPlaceholder={placeholder}
prefixCls="ant-calendar"
className={calendarClassName}
onOk={props.onOk}
{...calendarHandler}
/>
);
@@ -99,11 +70,6 @@ export default function createPicker(TheCalendar) {
pickerStyle.width = 180;
}
const clearIcon = (!props.disabled && this.state.value) ?
<Icon type="cross-circle"
className="ant-calendar-picker-clear"
onClick={this.clearSelection}
/> : null;
return (
<span className={props.pickerClass} style={{ ...pickerStyle, ...props.style }}>
<RcDatePicker
@@ -115,10 +81,9 @@ export default function createPicker(TheCalendar) {
style={props.popupStyle}
align={props.align}
getCalendarContainer={props.getCalendarContainer}
open={props.open}
onOpen={props.toggleOpen}
onClose={props.toggleOpen}
{...pickerChangeHandler}
onChange={this.handleChange}
>
{
({ value }) => {
@@ -126,12 +91,10 @@ export default function createPicker(TheCalendar) {
<span>
<input
disabled={props.disabled}
readOnly
onChange={props.handleInputChange}
value={value ? props.getFormatter().format(value) : ''}
placeholder={placeholder}
className={props.pickerInputClass}
/>
{clearIcon}
className={props.pickerInputClass} />
<span className="ant-calendar-picker-icon" />
</span>
);

View File

@@ -1,18 +1,10 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
title: 基本
---
## zh-CN
最简单的用法。
## en-US
The most basic usage.
````jsx
import { DatePicker } from 'antd';

View File

@@ -1,22 +1,12 @@
---
order: 6
title:
zh-CN: 指定不可选择日期
en-US: Specify the date that cannot be selected
title: 指定不可选择日期
---
## zh-CN
设置 `disabledDate` 方法,来确定不可选时段。
如上例:不可选择今天之后的日期。
## en-US
Specify unselectable period by `disabledDate`.
As in the example above: you can't select a date later than today.
````jsx
import { DatePicker } from 'antd';

View File

@@ -1,18 +1,10 @@
---
order: 5
title:
zh-CN: 禁用
en-US: Disabled
title: 禁用
---
## zh-CN
选择框的不可用状态。
## en-US
A disabled state of the `DatePicker`.
````jsx
import { DatePicker } from 'antd';

View File

@@ -1,18 +1,10 @@
---
order: 1
title:
zh-CN: 日期格式
en-US: Date format
title: 日期格式
---
## zh-CN
使用 `format` 属性,可以自定义你需要的日期显示格式,如 `yyyy/MM/dd`
## en-US
By using `format`, you can customize the format(such as `yyyy/MM/dd`) the date is displayed in.
````jsx
import { DatePicker } from 'antd';

View File

@@ -1,19 +1,10 @@
---
order: 10
title:
zh-CN: 国际化
en-US: Locale
title: 国际化
---
## zh-CN
通过 `locale` 配置时区、语言等, 默认支持 `en_US``zh_CN`
## en-US
Use locale to set the properties like time zone, language and etc. en_US, zh_CN are supported by default.
````jsx
import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';

View File

@@ -1,17 +1,9 @@
---
order: 9
title:
zh-CN: 月选择器
en-US: MonthPicker
title: 月选择器
---
## zh-CN
使用 `MonthPicker` 实现月选择器。
## en-US
You can get a month selector by using `MonthPicker`.
使用 `MonthPicker` 实现月选择器.
````jsx
import { DatePicker } from 'antd';

View File

@@ -1,20 +1,10 @@
---
order: 8
title:
zh-CN: 日期范围二
en-US: Date range, case 2
title: 日期范围二
---
## zh-CN
使用 `RangePicker` 实现日期范围选择有更好的交互体验。
## en-US
By using `RangePicker` to specify a date range, you can achieve a better interactive experience.
````jsx
import { DatePicker } from 'antd';
const RangePicker = DatePicker.RangePicker;

View File

@@ -1,19 +1,10 @@
---
order: 1
title:
zh-CN: 三种大小
en-US: Three sizes
title: 三种大小
---
## zh-CN
三种大小的输入框,大的用在表单中,中的为默认。
## en-US
The input box comes in three sizes. `large` is used in the form, while the medium size is the default.
````jsx
import { DatePicker } from 'antd';

View File

@@ -1,19 +1,10 @@
---
order: 7
title:
zh-CN: 日期范围一
en-US: Date range, case 1
title: 日期范围一
---
## zh-CN
可以设置 `disabledDate` 方法,来约束开始和结束日期。
## en-US
You can use the `disabledDate` property to limit the start and end dates.
````jsx
import { DatePicker } from 'antd';
@@ -22,7 +13,6 @@ const DateRange = React.createClass({
return {
startValue: null,
endValue: null,
endOpen: false,
};
},
disabledStartDate(startValue) {
@@ -49,36 +39,17 @@ const DateRange = React.createClass({
onEndChange(value) {
this.onChange('endValue', value);
},
handleStartToggle({ open }) {
if (!open) {
this.setState({ endOpen: true });
}
},
handleEndToggle({ open }) {
this.setState({ endOpen: open });
},
render() {
return (
<div>
<DatePicker
disabledDate={this.disabledStartDate}
showTime
format="yyyy-MM-dd HH:mm:ss"
<DatePicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onStartChange}
toggleOpen={this.handleStartToggle}
/>
<DatePicker
disabledDate={this.disabledEndDate}
showTime
format="yyyy-MM-dd HH:mm:ss"
onChange={this.onStartChange} />
<DatePicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onEndChange}
open={this.state.endOpen}
toggleOpen={this.handleEndToggle}
/>
onChange={this.onEndChange} />
</div>
);
},

View File

@@ -1,18 +1,10 @@
---
order: 4
title:
zh-CN: 日期时间选择
en-US: To choose time
title: 日期时间选择
---
## zh-CN
增加选择时间功能,当 `showTime` 为一个对象时,其属性会传递给内建的 `TimePicker`
## en-US
This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to `TimePicker`, witch is a built-in function.
````jsx
import { DatePicker } from 'antd';

View File

@@ -1,19 +1,11 @@
---
order: 4
hidden: true
title:
zh-CN: 日期时间选择二
en-US: To select a date, case 2
title: 日期时间选择二
---
## zh-CN
和 <a href="/components/time-picker">时间选择框</a> 配合使用。
## en-US
Cooperate with `<a href="/components/time-picker">time-picker</a>`
````jsx
import { DatePicker, TimePicker } from 'antd';

View File

@@ -1,74 +0,0 @@
---
category: Components
type: Form Controls
english: DatePicker
---
To select/input a date.
## When To Use
By clicking the input box, you can select a date from a popup calendar.
## API
### DatePicker
```html
<DatePicker defaultValue="2015-01-01" />
```
> Warning: `Datepicker` is renamed to `DatePicker` after `0.11`.
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | String/Date | - |
| defaultValue | to set default date | String/Date | - |
| format | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String | "yyyy-MM-dd" |
| disabledDate | to specify the date that cannot be selected | function | - |
| onChange | a callback function, can be executed when the selected time is changing | function(date, dateString) | - |
| disabled | determine whether the DatePicker is disabled | Boolean | false |
| style | to customize the style of the input box | Object | {} |
| popupStyle | to customize the style of the popup calendar | Object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String | - |
| locale | localization configuration | Object | [default](https://github.com/ant-design/ant-design/issues/424) |
| onOk | a callback function, can be executed when OK-button is clicked | function(Date value) | - |
| toggleOpen | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
### MonthPicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | String/Date | - |
| defaultValue | to set default date | String/Date | - |
| format | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String | "yyyy-MM" |
| disabledDate | to specify the date that cannot be selected | function | - |
| onChange | a callback function, can be executed when the selected time is changing | function(Date value) | - |
| disabled | determine whether the MonthPicker is disabled | Boolean | false |
| style | to customize the style of the input box | Object | {} |
| popupStyle | to customize the style of the popup calendar | Object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String | - |
| locale | localization configuration | Object | [default](https://github.com/ant-design/ant-design/issues/424) |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
### RangePicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [String/Date, String/Date] | - |
| defaultValue | to set default date | [String/Date, String/Date] | - |
| format | to set the date format | String | "yyyy-MM-dd HH:mm:ss" |
| onChange | a callback function, can be executed when the selected time is changing | function(date[], dateString[]) | - |
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
The following properties are the same with `DatePicker`: `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer`
<style>
.code-box-demo .ant-calendar-picker {
margin: 0 8px 12px 0;
}
</style>

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 日期选择框
type: Form Controls
type: Form Control
english: DatePicker
---
@@ -28,12 +28,13 @@ english: DatePicker
| defaultValue | 默认日期 | string or Date | 无 |
| format | 展示的日期格式,配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string | "yyyy-MM-dd" |
| disabledDate | 不可选择的日期 | function | 无 |
| onChange | 时间发生变化的回调 | function(date, dateString) | 无 |
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date, dateString) | 无 |
| disabled | 禁用 | bool | false |
| style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小,`large` 高度为 32px`small` 为 22px默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
| onOk | 点击确定按钮的回调 | function(Date value) | 无 |
| toggleOpen | 弹出日历和关闭日历的回调 | function(status) | 无 |
| getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 |
| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |

View File

@@ -38,7 +38,7 @@
position: absolute;
top: 0;
color: #999;
font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
font-family: Arial,"Hiragino Sans GB","Microsoft Yahei","Microsoft Sans Serif",sans-serif;
padding: 0 5px;
font-size: 16px;
display: inline-block;
@@ -246,7 +246,6 @@
}
.@{calendar-prefix-cls}-clear-btn {
display: none;
position: absolute;
right: 5px;
text-indent: -76px;
@@ -260,7 +259,8 @@
}
.@{calendar-prefix-cls}-clear-btn:after {
.iconfont-font("\e631");
content: "\e631";
font-family: "anticon";
font-size: 12px;
color: #ccc;
display: inline-block;

View File

@@ -37,30 +37,7 @@
> input {
outline: none;
}
&-clear {
opacity: 0;
z-index: -1;
position: absolute;
right: 7px;
background: #fff;
top: 50%;
font-size: 12px;
color: #ccc;
width: 14px;
height: 14px;
margin-top: -7px;
line-height: 14px;
cursor: pointer;
transition: color 0.3s ease, opacity 0.15s ease;
&:hover {
color: #999;
}
}
&:hover &-clear {
opacity: 1;
z-index: 1;
}
&-icon {
position: absolute;
user-select: none;

View File

@@ -62,7 +62,6 @@
}
.@{calendar-prefix-cls}-input-wrap {
position: relative;
height: @input-box-height;
}
.@{calendar-prefix-cls}-input {
@@ -110,22 +109,11 @@
.@{calendar-prefix-cls}-in-range-cell {
border-radius: 0;
position: relative;
> div {
position: relative;
z-index: 1;
}
&:before {
content: '';
display: block;
> span {
background: tint(@primary-color, 90%);
width: 100%;
border-radius: 0;
border: 0;
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
right: 0;
}
}

View File

@@ -18,12 +18,22 @@ export default function wrapPicker(Picker, defaultFormat) {
align: {
offset: [0, -9],
},
open: false,
}
static contextTypes = {
antLocale: PropTypes.object,
}
constructor(props) {
super(props);
this.state = {};
}
// remove input readonly warning
handleInputChange() {}
getLocale() {
const props = this.props;
let locale = defaultLocale;
@@ -56,14 +66,19 @@ export default function wrapPicker(Picker, defaultFormat) {
return value;
}
toggleOpen = ({ open }) => {
this.props.toggleOpen({ open });
toggleOpen = (e) => {
this.setState({
open: e.open,
});
this.props.toggleOpen(e);
}
render() {
const props = this.props;
const state = this.state;
const pickerClass = classNames({
'ant-calendar-picker': true,
'ant-calendar-picker-open': state.open,
});
const pickerInputClass = classNames({
'ant-calendar-range-picker': true,
@@ -88,17 +103,18 @@ export default function wrapPicker(Picker, defaultFormat) {
placeholder={locale.timePickerLocale.placeholder}
locale={locale.timePickerLocale}
transitionName="slide-up"
/>
/>
) : null;
return (
<Picker
{...props}
{...this.props}
pickerClass={pickerClass}
pickerInputClass={pickerInputClass}
locale={locale}
timePicker={timePicker}
toggleOpen={this.toggleOpen}
handleInputChange={this.handleInputChange}
getFormatter={this.getFormatter}
parseDateFromValue={this.parseDateFromValue}
/>

View File

@@ -33,8 +33,7 @@ const OverlayVisible = React.createClass({
return (
<Dropdown overlay={menu}
onVisibleChange={this.handleVisibleChange}
visible={this.state.visible}
>
visible={this.state.visible}>
<a className="ant-dropdown-link" href="#">
鼠标移入 <Icon type="down" />
</a>

View File

@@ -23,7 +23,7 @@ export default class DropdownButton extends React.Component {
const { type, overlay, trigger, align, children, className, onClick, ...restProps } = this.props;
const cls = classNames({
'ant-dropdown-button': true,
[className]: !!className,
className: !!className,
});
return (
<ButtonGroup {...restProps} className={cls}>

View File

@@ -10,6 +10,12 @@ export default class Dropdown extends React.Component {
}
render() {
return <RcDropdown {...this.props} />;
const { overlay, ...otherProps } = this.props;
const menu = React.cloneElement(overlay, {
openTransitionName: 'zoom-big',
});
return (
<RcDropdown {...otherProps} overlay={menu} />
);
}
}

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 下拉菜单
type: Views
type: Presentation
english: Dropdown
---
@@ -33,7 +33,7 @@ english: Dropdown
|-------------|------------------|--------------------|--------------|
| type | 按钮类型,和 [Button](/components/button) 一致 | String | 'default' |
| onClick | 点击左侧按钮的回调,和 [Button](/components/button) 一致 | Function | - |
| trigger | 触发下拉的行为 | ['click'] or ['hover'] | ['hover'] |
| trigger | 触发下拉的行为 | "click" or "hover" | hover |
| overlay | 菜单 | [Menu](/components/menu) | - |
| visible | 菜单是否显示 | Bool | 无 |
| onVisibleChange | 菜单显示状态改变时调用,参数为 { visible } | Function | - |

View File

@@ -1,8 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import omit from 'object.omit';
import warning from 'warning';
export default class Form extends React.Component {
static defaultProps = {
@@ -16,36 +13,33 @@ export default class Form extends React.Component {
prefixCls: React.PropTypes.string,
horizontal: React.PropTypes.bool,
inline: React.PropTypes.bool,
form: React.PropTypes.object,
children: React.PropTypes.any,
onSubmit: React.PropTypes.func,
}
constructor(props) {
super(props);
warning(!props.form, 'It is unnecessary to pass `form` to `Form` after antd@1.7.0.');
static childContextTypes = {
form: React.PropTypes.object,
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
getChildContext() {
return {
form: this.props.form,
};
}
render() {
const { prefixCls, className, inline, horizontal } = this.props;
const { prefixCls, className, style } = this.props;
const formClassName = classNames({
[`${prefixCls}-horizontal`]: horizontal,
[`${prefixCls}-inline`]: inline,
[`${prefixCls}-horizontal`]: this.props.horizontal,
[`${prefixCls}-inline`]: this.props.inline,
[className]: !!className,
});
const formProps = omit(this.props, [
'prefixCls',
'className',
'inline',
'horizontal',
'form',
]);
return <form {...formProps} className={formClassName} />;
return (
<form {...this.props} className={formClassName} style={style}>
{this.props.children}
</form>
);
}
}

View File

@@ -1,9 +1,9 @@
import React from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Row from '../row';
import Col from '../col';
import { FIELD_META_PROP } from './constants';
function prefixClsFn(prefixCls, ...args) {
return args.map((s) => `${prefixCls}-${s}`).join(' ');
}
export default class FormItem extends React.Component {
static defaultProps = {
@@ -28,8 +28,14 @@ export default class FormItem extends React.Component {
form: React.PropTypes.object,
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
getLayoutClass(colDef) {
if (!colDef) {
return '';
}
const { span, offset } = colDef;
const col = span ? `col-${span}` : '';
const offsetCol = offset ? ` col-offset-${offset}` : '';
return col + offsetCol;
}
getHelpMsg() {
@@ -45,7 +51,7 @@ export default class FormItem extends React.Component {
getOnlyControl() {
const children = React.Children.toArray(this.props.children);
const child = children.filter((c) => {
return c.props && FIELD_META_PROP in c.props;
return c.props && '__meta' in c.props;
})[0];
return child !== undefined ? child : null;
}
@@ -60,14 +66,15 @@ export default class FormItem extends React.Component {
}
getMeta() {
return this.getChildProp(FIELD_META_PROP);
return this.getChildProp('__meta');
}
renderHelp() {
const prefixCls = this.props.prefixCls;
const props = this.props;
const prefixCls = props.prefixCls;
const help = this.getHelpMsg();
return help ? (
<div className={`${prefixCls}-explain`} key="help">
<div className={prefixClsFn(prefixCls, 'explain')} key="help">
{help}
</div>
) : null;
@@ -76,7 +83,7 @@ export default class FormItem extends React.Component {
renderExtra() {
const { prefixCls, extra } = this.props;
return extra ? (
<span className={`${prefixCls}-extra`}>{extra}</span>
<span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>
) : null;
}
@@ -125,9 +132,9 @@ export default class FormItem extends React.Component {
renderWrapper(children) {
const wrapperCol = this.props.wrapperCol;
return (
<Col {...wrapperCol} key="wrapper">
<div className={this.getLayoutClass(wrapperCol)} key="wrapper">
{children}
</Col>
</div>
);
}
@@ -151,21 +158,20 @@ export default class FormItem extends React.Component {
props.required;
const className = classNames({
[this.getLayoutClass(labelCol)]: true,
[`${props.prefixCls}-item-required`]: required,
});
// remove user input colon
let label = props.label;
if (typeof label === 'string' && label.trim() !== '') {
label = props.label.replace(/[|:]\s*$/, '');
if (typeof props.label === 'string') {
label = props.label.replace(/|:$/, '');
}
return props.label ? (
<Col {...labelCol} key="label" className={`${props.prefixCls}-item-label`}>
<label htmlFor={props.id || this.getId()} className={className}>
{label}
</label>
</Col>
<label htmlFor={props.id || this.getId()} className={className} key="label">
{label}
</label>
) : null;
}
@@ -200,9 +206,9 @@ export default class FormItem extends React.Component {
};
return (
<Row className={classNames(itemClassName)} style={style}>
<div className={classNames(itemClassName)} style={style}>
{children}
</Row>
</div>
);
}

View File

@@ -1 +0,0 @@
export const FIELD_META_PROP = 'data-__meta';

View File

@@ -18,22 +18,19 @@ ReactDOM.render(
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
</Col>
@@ -41,22 +38,19 @@ ReactDOM.render(
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
</Col>
@@ -64,22 +58,19 @@ ReactDOM.render(
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
</Col>
@@ -105,7 +96,7 @@ ReactDOM.render(
}
/* 由于输入标签长度不确定,所以需要微调使之看上去居中 */
.ant-advanced-search-form > .ant-row {
.ant-advanced-search-form > .row {
position: relative;
left: -6px;
}

View File

@@ -36,12 +36,7 @@ let Demo = React.createClass({
},
submit(e) {
e.preventDefault();
this.props.form.validateFields((errors, values) => {
if (errors) {
console.log(errors);
}
console.log(values);
});
console.log(this.props.form.getFieldsValue());
},
render() {
const { getFieldProps, getFieldValue } = this.props.form;
@@ -57,14 +52,7 @@ let Demo = React.createClass({
const formItems = getFieldValue('keys').map((k) => {
return (
<Form.Item {...formItemLayout} label={`好朋友${k}`} key={k}>
<Input {...getFieldProps(`name${k}`, {
rules: [{
required: true,
whitespace: true,
message: '你好友的名字捏!',
}],
})} style={{ width: '80%', marginRight: 8 }}
/>
<Input {...getFieldProps(`name${k}`)} style={{ width: '80%', marginRight: 8 }} />
<Button onClick={() => this.remove(k)}>删除</Button>
</Form.Item>
);

View File

@@ -23,8 +23,7 @@ ReactDOM.render(
id="control-input"
label="输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input id="control-input" placeholder="Please enter..." />
</FormItem>
@@ -32,8 +31,7 @@ ReactDOM.render(
id="control-textarea"
label="文本域"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input type="textarea" id="control-textarea" rows="3" />
</FormItem>
@@ -41,8 +39,7 @@ ReactDOM.render(
id="select"
label="Select 选择器"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
@@ -54,8 +51,7 @@ ReactDOM.render(
<FormItem
label="Checkbox 多选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
wrapperCol={{ span: 18 }} >
<Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
<Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
<Checkbox className="ant-checkbox-vertical" disabled>选项三(不可选)</Checkbox>
@@ -64,8 +60,7 @@ ReactDOM.render(
<FormItem
label="Checkbox 多选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
wrapperCol={{ span: 18 }} >
<Checkbox className="ant-checkbox-inline">选项一</Checkbox>
<Checkbox className="ant-checkbox-inline">选项二</Checkbox>
<Checkbox className="ant-checkbox-inline">选项三</Checkbox>
@@ -74,8 +69,7 @@ ReactDOM.render(
<FormItem
label="Radio 单选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
wrapperCol={{ span: 18 }} >
<RadioGroup defaultValue="b">
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>

View File

@@ -42,14 +42,12 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名"
>
label="用户名">
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
>
label="密码">
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
</FormItem>
</Form>

View File

@@ -26,20 +26,17 @@ let Demo = React.createClass({
<Form horizontal onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="用户名"
>
label="用户名">
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
>
<Input type="password" {...getFieldProps('pass', { initialValue: '' })} placeholder="请输入密码" />
label="密码">
<Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
</FormItem>
<FormItem
{...formItemLayout}
label="您的性别"
>
label="您的性别">
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
@@ -48,15 +45,13 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="备注"
help="随便写点什么"
>
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark', { initialValue: '' })} />
help="随便写点什么">
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
</FormItem>
<FormItem
{...formItemLayout}
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
>
<Checkbox {...getFieldProps('agreement', { initialValue: false, valuePropName: 'checked' })}>同意</Checkbox>
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}>
<Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
<Button type="primary" htmlType="submit">确定</Button>

View File

@@ -20,18 +20,14 @@ let Demo = React.createClass({
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem
label="账户"
>
label="账户">
<Input placeholder="请输入账户名"
{...getFieldProps('userName')}
/>
{...getFieldProps('userName')} />
</FormItem>
<FormItem
label="密码"
>
label="密码">
<Input type="password" placeholder="请输入密码"
{...getFieldProps('password')}
/>
{...getFieldProps('password')} />
</FormItem>
<FormItem>
<Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>

View File

@@ -11,22 +11,12 @@ const FormItem = Form.Item;
const InputGroup = Input.Group;
const Option = Select.Option;
const selectAfter = (
<Select defaultValue=".com" style={{ width: 70 }}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
);
ReactDOM.render(
<Form horizontal>
<FormItem
label="标签输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
</FormItem>
@@ -34,24 +24,31 @@ ReactDOM.render(
label="标签输入框"
labelCol={{ span: 6 }}
validateStatus="success"
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
</FormItem>
<FormItem
label="select 标签输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
<Input addonAfter={selectAfter} placeholder="www.mysite" id="site4" />
wrapperCol={{ span: 16 }}>
<InputGroup>
<Input id="site4" placeholder="www.mysite" />
<div className="ant-input-group-wrap">
<Select defaultValue=".com" style={{ width: 70 }}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
</div>
</InputGroup>
</FormItem>
<FormItem
label="输入身份证"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<InputGroup>
<Col span="6">
<Input id="certNo1" />
@@ -71,8 +68,7 @@ ReactDOM.render(
<FormItem
label="电话号码"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<InputGroup>
<Col span="4">
<Input id="tel1" defaultValue="086" />

View File

@@ -46,19 +46,16 @@ let Demo = React.createClass({
<FormItem
label="InputNumber 数字输入框"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
wrapperCol={{ span: 10 }}>
<InputNumber min={1} max={10} style={{ width: 100 }}
{...getFieldProps('inputNumber', { initialValue: 3 })}
/>
{...getFieldProps('inputNumber', { initialValue: 3 })} />
<span className="ant-form-text"> 台机器</span>
</FormItem>
<FormItem
label="我是标题"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
wrapperCol={{ span: 10 }}>
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
<p className="ant-form-text">
<a href="#">链接文字</a>
@@ -69,8 +66,7 @@ let Demo = React.createClass({
label="Switch 开关"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
>
required>
<Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
</FormItem>
@@ -78,8 +74,7 @@ let Demo = React.createClass({
label="Slider 滑动输入条"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
>
required>
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
</FormItem>
@@ -87,11 +82,9 @@ let Demo = React.createClass({
label="Select 选择器"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
>
required>
<Select style={{ width: 200 }}
{...getFieldProps('select')}
>
{...getFieldProps('select')}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
@@ -104,16 +97,14 @@ let Demo = React.createClass({
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
hasFeedback
>
hasFeedback>
<Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
</FormItem>
<FormItem
label="DatePicker 日期选择框"
labelCol={{ span: 8 }}
required
>
required>
<Col span="6">
<FormItem>
<DatePicker {...getFieldProps('startDate')} />
@@ -134,15 +125,13 @@ let Demo = React.createClass({
label="TimePicker 时间选择器"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
>
required>
<TimePicker {...getFieldProps('time')} />
</FormItem>
<FormItem
label="选项"
labelCol={{ span: 8 }}
>
labelCol={{ span: 8 }}>
<RadioGroup {...getFieldProps('rg')}>
<RadioButton value="a">选项一</RadioButton>
<RadioButton value="b">选项二</RadioButton>
@@ -154,8 +143,7 @@ let Demo = React.createClass({
label="logo图"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
help="提示信息要长长长长长长长长长长长长长长"
>
help="提示信息要长长长长长长长长长长长长长长">
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
{...getFieldProps('upload', {
valuePropName: 'fileList',

View File

@@ -114,43 +114,36 @@ let BasicDemo = React.createClass({
{...formItemLayout}
label="用户名"
hasFeedback
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
>
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
<Input {...nameProps} placeholder="实时校验,输入 JasonWood 看看" />
</FormItem>
<FormItem
{...formItemLayout}
label="邮箱"
hasFeedback
>
hasFeedback>
<Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
hasFeedback
>
hasFeedback>
<Input {...passwdProps} type="password" autoComplete="off"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
</FormItem>
<FormItem
{...formItemLayout}
label="确认密码"
hasFeedback
>
hasFeedback>
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
</FormItem>
<FormItem
{...formItemLayout}
label="备注"
>
label="备注">
<Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
</FormItem>

View File

@@ -145,8 +145,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="密码"
>
label="密码">
<Input {...passProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="pass"
@@ -162,8 +161,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="确认密码"
>
label="确认密码">
<Input {...rePassProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="rePass"

View File

@@ -110,8 +110,7 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="国籍"
>
label="国籍">
<Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
<Option value="china">中国</Option>
<Option value="use">美国</Option>
@@ -123,8 +122,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="喜欢的颜色"
>
label="喜欢的颜色">
<Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
@@ -136,8 +134,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="性别"
>
label="性别">
<RadioGroup {...radioProps}>
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
@@ -147,8 +144,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="兴趣爱好"
>
label="兴趣爱好">
<Checkbox {...getFieldProps('eat', {
valuePropName: 'checked',
})}>吃饭饭</Checkbox>
@@ -162,35 +158,30 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="生日"
>
label="生日">
<DatePicker {...birthdayProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="选一个时间"
>
label="选一个时间">
<TimePicker {...timeProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="8~12间的质数"
>
label="8~12间的质数">
<InputNumber {...primeNumberProps} min={8} max={12} />
</FormItem>
<FormItem
{...formItemLayout}
label="选择地址"
>
label="选择地址">
<Cascader {...addressProps} options={address} />
</FormItem>
<FormItem
wrapperCol={{ span: 12, offset: 7 }}
>
wrapperCol={{ span: 12, offset: 7 }} >
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重置</Button>

View File

@@ -22,8 +22,7 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="error"
help="请输入数字和字母组合"
>
help="请输入数字和字母组合">
<Input defaultValue="无效选择" id="error" />
</FormItem>
@@ -31,8 +30,7 @@ ReactDOM.render(
label="警告校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="warning"
>
validateStatus="warning">
<Input defaultValue="前方高能预警" id="warning" />
</FormItem>
@@ -42,8 +40,7 @@ ReactDOM.render(
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="validating"
help="信息审核中..."
>
help="信息审核中...">
<Input defaultValue="我是被校验的内容" id="validating" />
</FormItem>
@@ -52,8 +49,7 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="success"
>
validateStatus="success">
<Input defaultValue="我是正文" id="success" />
</FormItem>
@@ -62,8 +58,7 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="warning"
>
validateStatus="warning">
<Input defaultValue="前方高能预警" id="warning" />
</FormItem>
@@ -73,16 +68,14 @@ ReactDOM.render(
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="error"
help="请输入数字和字母组合"
>
help="请输入数字和字母组合">
<Input defaultValue="无效选择" id="error" />
</FormItem>
<FormItem
label="行内校验"
labelCol={{ span: 5 }}
help
>
help>
<Col span="6">
<FormItem validateStatus="error" help="请选择正确日期">
<DatePicker />

View File

@@ -1,35 +1,16 @@
import React, { PropTypes } from 'react';
import createDOMForm from 'rc-form/lib/createDOMForm';
import Form from './Form';
import FormItem from './FormItem';
import ValueMixin from './ValueMixin';
import { FIELD_META_PROP } from './constants';
import createDOMForm from 'rc-form/lib/createDOMForm';
Form.create = (o = {}) => {
const options = {
...o,
fieldNameProp: 'id',
fieldMetaProp: FIELD_META_PROP,
fieldMetaProp: '__meta',
};
const formWrapper = createDOMForm(options);
/* eslint-disable react/prefer-es6-class */
return (Component) => formWrapper(React.createClass({
propTypes: {
form: PropTypes.object.isRequired,
},
childContextTypes: {
form: PropTypes.object.isRequired,
},
getChildContext() {
return {
form: this.props.form,
};
},
render() {
return <Component {...this.props} />;
},
}));
return createDOMForm(options);
};
Form.Item = FormItem;

View File

@@ -1,7 +1,7 @@
---
category: Components
chinese: 表单
type: Form Controls
type: Form Control
cols: 1
english: Form
---
@@ -34,11 +34,11 @@ english: Form
### Form
**更多示例参考 [rc-form](http://react-component.github.io/form/)**
更多示例参考 [rc-form](http://react-component.github.io/form/)
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|-------|
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性,直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性,直接传给 Form 即可 | object | 无 |
| horizontal | 水平排列布局 | boolean | false |
| inline | 行内排列布局 | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
@@ -76,9 +76,9 @@ CustomizedForm = Form.create({})(CustomizedForm);
| resetFields | 重置一组输入控件的值与状态,如不传入参数,则重置所有组件 | Function([names: string[]]) |
| getFieldProps | 用于和表单进行双向绑定,详见下方描述 | |
### this.props.form.getFieldProps(id, options)
#### this.props.form.getFieldProps(id, options)
#### 特别注意
##### 特别注意
`getFieldProps` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
@@ -86,8 +86,6 @@ CustomizedForm = Form.create({})(CustomizedForm);
> 在表单中 `defaultValue` 也不应该被设置,请使用下面的 `initialValue`。
#### getFieldProps options
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----|--------|
| options.id | 必填输入控件唯一标志 | string | |
@@ -98,7 +96,6 @@ CustomizedForm = Form.create({})(CustomizedForm);
| options.validateTrigger | 校验子节点值的时机 | string | 'onChange' |
| options.rules | 校验规则,参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件(即你所设置的 `trigger` `validateTrigger`),所以如果仍需绑定事件,请在 `options` 内设置 | function | 无 |
| options.exclusive | 是否和其他控件互斥,特别用于 Radio 单选控件 | boolean | false |
### Form.Item
@@ -116,6 +113,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | bool | | false |
| prefixCls | 样式类名,默认为 ant-form通常您不需要设置 | string | | 'ant-form' |
<style>
.code-box-demo .ant-form-horizontal {
max-width: 540px;

View File

@@ -47,7 +47,6 @@ input[type="checkbox"] {
cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.ant-radio,
.ant-checkbox {
@@ -81,21 +80,17 @@ input[type="checkbox"] {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - 3;
}
&-label {
> label {
color: @label-color;
text-align: right;
vertical-align: middle;
padding: 7px 0;
display: inline-block;
label {
color: @label-color;
&:after {
content: ":";
margin: 0 8px 0 2px;
position: relative;
top: -0.5px;
}
&:after {
content: ":";
margin: 0 8px 0 2px;
position: relative;
top: -0.5px;
}
}
@@ -166,11 +161,6 @@ form {
display: block;
}
.ant-checkbox-vertical + .ant-checkbox-vertical,
.ant-radio-vertical + .ant-radio-vertical {
margin-left: 0;
}
.ant-input-number {
margin-top: -1px;
margin-right: 8px;
@@ -238,6 +228,11 @@ form {
}
}
.ant-input {
display: inline-block;
vertical-align: middle;
}
.@{form-prefix-cls}-text {
display: inline-block;
}
@@ -272,12 +267,12 @@ form {
top: 0;
right: 0;
visibility: visible;
font-family: "anticon" !important;
.square(@input-height-lg);
line-height: @input-height-lg;
line-height: @input-height-lg + 2;
text-align: center;
font-size: 14px;
animation: zoomIn .3s @ease-out-back;
.iconfont-font("");
}
}
@@ -399,7 +394,7 @@ form {
}
}
.ant-advanced-search-form {
.advanced-search-form {
.@{form-prefix-cls}-item {
margin-bottom: 16px;
}

View File

@@ -86,7 +86,7 @@
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color; // lesshint spaceAroundOperator: false
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

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