mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-14 05:19:20 +08:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e051e8ae32 | ||
|
|
9558aa2c64 |
16
.eslintrc.js
16
.eslintrc.js
@@ -1,3 +1,5 @@
|
||||
'use strict';
|
||||
|
||||
const eslintrc = {
|
||||
extends: ['eslint-config-airbnb'],
|
||||
env: {
|
||||
@@ -22,23 +24,18 @@ const eslintrc = {
|
||||
],
|
||||
rules: {
|
||||
'func-names': 0,
|
||||
'prefer-const': 0,
|
||||
'arrow-body-style': 0,
|
||||
'react/sort-comp': 0,
|
||||
'react/prop-types': 0,
|
||||
'react/jsx-closing-bracket-location': 0,
|
||||
'react/jsx-first-prop-new-line': 0,
|
||||
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
|
||||
'import/no-unresolved': 0,
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
'no-param-reassign': 0,
|
||||
'no-return-assign': 0,
|
||||
'max-len': 0,
|
||||
'consistent-return': 0,
|
||||
'no-redeclare': 0,
|
||||
'react/require-extension': 0,
|
||||
'react/jsx-indent': 0,
|
||||
'jsx-a11y/no-static-element-interactions': 0,
|
||||
'jsx-a11y/anchor-has-content': 0,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
if (process.env.RUN_ENV === 'DEMO') {
|
||||
@@ -50,13 +47,10 @@ if (process.env.RUN_ENV === 'DEMO') {
|
||||
|
||||
Object.assign(eslintrc.rules, {
|
||||
'no-console': 0,
|
||||
'no-plusplus': 0,
|
||||
'eol-last': 0,
|
||||
'prefer-rest-params': 0,
|
||||
'react/no-multi-comp': 0,
|
||||
'react/prefer-es6-class': 0,
|
||||
'jsx-a11y/href-no-hash': 0,
|
||||
'import/newline-after-import': 0,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
4
.github/CONTRIBUTING.md
vendored
4
.github/CONTRIBUTING.md
vendored
@@ -13,7 +13,7 @@ The following guidelines are about *How to avoid Homework Questions*.
|
||||
|
||||
### 1. Read the documentation.
|
||||
|
||||
It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001). It's helpful to understand our documentation.
|
||||
It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001). It's helpful to understand our documentation.
|
||||
|
||||
Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
|
||||
|
||||
@@ -36,7 +36,7 @@ It is a good habit which will save maintainers' time. Thank you!
|
||||
|
||||
## Providing a demo while reporting a bug
|
||||
|
||||
It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug.
|
||||
It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug.
|
||||
|
||||
|
||||
## Tips about Feature Request
|
||||
|
||||
68
.github/ISSUE_TEMPLATE.md
vendored
68
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,27 +1,53 @@
|
||||
<!-- Issue Template -->
|
||||
If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)
|
||||
|
||||
<!-- 请按照下列格式报告问题，务必提供复现步骤，否则恕难解决，感谢您的支持。-->
|
||||
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/benjycui/pen/KgPZrE?editors=001 -->
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -15,7 +15,6 @@ Thumbs.db
|
||||
*.swp
|
||||
*.swo
|
||||
*.log
|
||||
*.json.gzip
|
||||
node_modules/
|
||||
.buildpath
|
||||
.settings
|
||||
@@ -27,5 +26,4 @@ dist
|
||||
/lib
|
||||
elasticsearch-*
|
||||
config/base.yaml
|
||||
components/**/*.js
|
||||
components/**/*.jsx
|
||||
typings
|
||||
|
||||
@@ -9,8 +9,6 @@
|
||||
"duplicateProperty": false,
|
||||
"importPath": false,
|
||||
"finalNewline": false,
|
||||
"newlineAfterBlock": false,
|
||||
"maxCharPerLine": false,
|
||||
"excludedFiles": [
|
||||
"components/layout/style/mixin.less",
|
||||
"components/style/core/base.less",
|
||||
|
||||
37
AUTHORS.txt
37
AUTHORS.txt
@@ -1,4 +1,3 @@
|
||||
Andrew Murray <radarhere@gmail.com>
|
||||
Benjy Cui <benjytrys@gmail.com>
|
||||
Bernie <bernie.wangbj@gmail.com>
|
||||
Bozhao <yubz86@gmail.com>
|
||||
@@ -7,40 +6,25 @@ Bruno Maia <bruno.mm.maia@gmail.com>
|
||||
Cam Song <neosoyn@gmail.com>
|
||||
Cee Cirno <i@cee.moe>
|
||||
Daqi Song <dqaria@gmail.com>
|
||||
DengYun <tdzl2003@gmail.com>
|
||||
Eddie Xie <oeddyo@gmail.com>
|
||||
Emma <sima.zhang1990@gmail.com>
|
||||
Eric <84263800@qq.com>
|
||||
Eward Song <eward.song@gmail.com>
|
||||
Gray Choi <gray.choi.1988@gmail.com>
|
||||
Guan Hao <raptium@gmail.com>
|
||||
Haibin Yu <haibin.yu@oceanwing.com>
|
||||
Hanai <ihanai1991@gmail.com>
|
||||
Infinity <305870677@qq.com>
|
||||
James <james@schoolshape.com>
|
||||
Jerry Bendy <jerry@icewingcc.com>
|
||||
KgTong <kgtong1992@gmail.com>
|
||||
Leon Shi <superRaytin@163.com>
|
||||
Leon Shi <superRaytin@gmail.com>
|
||||
Liu Yang <zation1@gmail.com>
|
||||
MG12 <wuzhao.mail@gmail.com>
|
||||
Ma Tianxiao <matx2215@outlook.com>
|
||||
Marius Ileana <visvadw@gmail.com>
|
||||
Marshall Chen <Juniors.fei@gmail.com>
|
||||
Mr.Tone <vector@malubei.com>
|
||||
Neverland <chenjiahan@buaa.edu.cn>
|
||||
Pyiner <lijiuyang1992@gmail.com>
|
||||
Qiaosen Huang <joesonw@gmail.com>
|
||||
RaoHai <surgesoft@gmail.com>
|
||||
Rrrandom <emanonhere@gmail.com>
|
||||
Sean Lin <sean@ejoy.com>
|
||||
Sebastian Blade <blade254353074@hotmail.com>
|
||||
Shawn Sit <xueqingxiao@gmail.com>
|
||||
ShiTengFei <shitengfei@goyoo.com>
|
||||
SimaQ <sima.zhang1990@gmail.com>
|
||||
The Rock <zhoguoxin@126.com>
|
||||
Vadim Macagon <vadim.macagon@gmail.com>
|
||||
Vincent Zhang <vxzhong@qq.com>
|
||||
Wei Zhu <yesmeck@gmail.com>
|
||||
Yuwei Ba <i@xiaoba.me>
|
||||
Zap <a124116186@qq.com>
|
||||
@@ -49,59 +33,44 @@ bang <sqibang@gmail.com>
|
||||
bang88 <sqibang@gmail.com>
|
||||
chencheng (云谦) <sorrycc@gmail.com>
|
||||
ddcat1115 <ddcat1115@gmail.com>
|
||||
detailyang <detailyang@gmail.com>
|
||||
devqin <devqin@gmail.com>
|
||||
djorkaeff <djorkae55@gmail.com>
|
||||
ecofe <150641329@qq.com>
|
||||
elrrrrrrr <elrrrrrrr@gmail.com>
|
||||
ezpub <ez.foro@gmail.com>
|
||||
feng zhi hao <fzhihao@outlook.com>
|
||||
fengmk2 <m@fengmk2.com>
|
||||
genie <genie88@163.com>
|
||||
haoxin <coderhaoxin@outlook.com>
|
||||
hi-caicai <hi@cai-cai.me>
|
||||
ioldfish <fish.wangl@gmail.com>
|
||||
jasonslyvia <jasonslyvia@gmail.com>
|
||||
jiang <155259966@qq.com>
|
||||
kagawagao <kingsongao1221@gmail.com>
|
||||
kaifei <150641329@qq.com>
|
||||
kasinooya <kasinooya@gmail.com>
|
||||
leon.shi <superRaytin@163.com>
|
||||
lgmcolin <gengmin.lgm@gmail.com>
|
||||
lgmcolin <lgmcolin@gmail.com>
|
||||
lixiaochou077 <qi.liqi07@gmail.com>
|
||||
lizhaocai <lzc09008@gmail.com>
|
||||
muzuiget <muzuiget@gmail.com>
|
||||
pizn <pizner@gmail.com>
|
||||
plandem <plandem@gmail.com>
|
||||
popomore <sakura9515@gmail.com>
|
||||
qubaoming <qubaoming@didichuxing.com>
|
||||
ryangun <ryangun@foxmail.com>
|
||||
shelwin <wxfans@gmail.com>
|
||||
shouyong <enlangs@163.com>
|
||||
simaQ <sima.zhang1990@gmail.com>
|
||||
snadn <snadn@snadn.cn>
|
||||
sorrycc <sorrycc@gmail.com>
|
||||
swindme <swindme@163.com>
|
||||
tianli.zhao <275287902@qq.com>
|
||||
tom <caolvchong@gmail.com>
|
||||
ustccjw <317713370@qq.com>
|
||||
warmhug <hualei5280@gmail.com>
|
||||
wizawu <wizawu@gmail.com>
|
||||
yeliex <yeliex@yeliex.com>
|
||||
yiminghe <yiminghe@gmail.com>
|
||||
yubozhao <yubz86@gmail.com>
|
||||
yuche <i@yuche.me>
|
||||
z <haig8@msn.com>
|
||||
zack <zxyah@126.com>
|
||||
zhangpc <zhangpc@tenxcloud.com>
|
||||
zhaocai <lzc09008@gmail.com>
|
||||
zhujun24 <zhujun87654321@gmail.com>
|
||||
zilong <jzlxiaohei@163.com>
|
||||
zinkey <yaya@uloveit.com.cn>
|
||||
偏右 <afc163@gmail.com>
|
||||
逸达 <dqaria@gmail.com>
|
||||
陆离 <surgesoft@gmail.com>
|
||||
低位 <zhujun87654321@gmail.com>
|
||||
闲耘™ <hotoo.cn@gmail.com>
|
||||
偏右 <afc163@gmail.com>
|
||||
白羊座小葛 <abeyuhang@gmail.com>
|
||||
逸达 <dqaria@gmail.com>
|
||||
闲耘™ <hotoo.cn@gmail.com>
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title: Change Log
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0).
|
||||
|
||||
---
|
||||
|
||||
After four months, `antd@2.0.0` is published. We had refactored code and improve functionalities and details of existing components. What's more, we provide English version of the documentation. The antd community help us a lot in developing `antd@2.0.0`.
|
||||
|
||||
If you meet any problem while you try to upgrade from `antd@1.0.0`, feel free to [create issues on GitHub](https://github.com/ant-design/ant-design/issues).
|
||||
|
||||
### 2.x Major changes
|
||||
|
||||
* Refactor components with TypeScript, and provide **`.d.ts` files which are officially supported**. Thanks to all the developers that contributed to [#1846](https://github.com/ant-design/ant-design/issues/1846) and @infeng.
|
||||
* **Translate the documentation into English**, and we are going to provide both of Chinese and English versions of the documentation in the future. Thanks to all the translators and reviewers that contributed to [#1471](https://github.com/ant-design/ant-design/issues/1471).
|
||||
* DatePicker, TimePicker, Calendar and other components that are designed to select time **are refactored to replace [gregorian-calendar](github.com/yiminghe/gregorian-calendar) with [moment](http://momentjs.com/)**.
|
||||
* All the [icons](http://ant.design/components/icon/) are re-designed.
|
||||
* New component [Mention](http://ant.design/components/mention/).
|
||||
* New component [AutoComplete](http://ant.design/components/auto-complete/).
|
||||
* The `getFieldProps` of Form is replaced with `getFieldDecorator` which will warn developers if they make mistakes. Related discussion [#1533](https://github.com/ant-design/ant-design/issues/1533).
|
||||
* Table supports [grouping columns](http://ant.design/components/table/#components-table-demo-grouping-columns). @yesmeck
|
||||
* Removed components and features which are deprecated in `antd@1.x`, such as QueueAnim, Validation, Form.ValueMixin, Progress.Line, Progress.Circle, Popover[overlay] and Slider[marks] will not support array any more.
|
||||
|
||||
### 2.x Breaking changes
|
||||
|
||||
There are some breaking changes in `antd@2.0.0`, and you need to modify your code to work with it.
|
||||
|
||||
* `value` and `defaultValue` of all the time-related components will not support type `String/Date`, please use [moment](http://momentjs.com/):
|
||||
```diff
|
||||
- <TimePicker defaultValue="12:08:23" />
|
||||
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
|
||||
|
||||
- <DatePicker defaultValue="2015/01/01" />
|
||||
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />
|
||||
|
||||
- <Calendar defaultValue={new Date('2010-10-10')} />
|
||||
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
|
||||
```
|
||||
* Parameters of type `Date/GregorianCalendar` of functions such as `onChange` and `onPanelChange`, plus other callback functions had been changed to type moment. Please consult [APIs of gregorian-calendar](https://github.com/yiminghe/gregorian-calendar) and [APIs of moment](http://momentjs.com/docs/), and update your code accordingly. Because the return value of `JSON.stringy(date: moment)` will lost time zone, we should use `.format` to convert date to string first, see related issue [#3082](https://github.com/ant-design/ant-design/issues/3082) for details:
|
||||
```js
|
||||
handleSubmit() {
|
||||
const values = this.props.form.getFieldsValue();
|
||||
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // or other format
|
||||
const data = JSON.stringify(values);
|
||||
// send data to server
|
||||
}
|
||||
```
|
||||
* The `format` of time-related components is the same as [moment's format](http://momentjs.com/docs/) now.
|
||||
* `linkRender` and `nameRender` of Breadcrumb are removed, please use `itemRender`.
|
||||
* `onClose` and `onOpen` of Menu are removed, please use `onOpenChange`. As being totally different, please check [this demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first.
|
||||
* Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns).
|
||||
|
||||
The following change will throw some warnings in the console and it will still work, but we recommend to update your code.
|
||||
|
||||
* `getFieldProps` of Form is deprecated, please use `getFieldDecorator`:
|
||||
```diff
|
||||
+ getFieldDecorator('userName', { ... })(
|
||||
<Input placeholder="请输入账户名"
|
||||
- {...getFieldProps('userName', { ... })}
|
||||
/>
|
||||
+ )
|
||||
```
|
||||
* `toggleOpen` of DatePicker is deprecated, please use `onOpenChange`:
|
||||
```diff
|
||||
- handleToggleOpen({ open }) {
|
||||
+ handleOpenChange(open) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 2.x Bug fixes
|
||||
|
||||
* Dropdown.Button[disabled] should work. [#3070](https://github.com/ant-design/ant-design/issues/3070)
|
||||
* `option.withRef` of Form.create should work. [#2843](https://github.com/ant-design/ant-design/issues/2843)
|
||||
* Fix slow response of expanding sub menu in Menu[inline] mode. [#2701](https://github.com/ant-design/ant-design/issues/2701)
|
||||
* The button of Modal.confirm(and so on) should not be clickable while it is closed asynchronously. [#2684](https://github.com/ant-design/ant-design/issues/2684)
|
||||
* `format` of DatePicker[showTime] should work. [#3123](https://github.com/ant-design/ant-design/issues/3123)
|
||||
* Fix Table[dataSource] treat key whose value is `0` as inexisting. [#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
|
||||
* Tree.Node should not show arrow if it has no child nodes. [#2616](https://github.com/ant-design/ant-design/issues/2616)
|
||||
* Fix cursor style of arrows that are hidden of Tree.Node. [#2748](https://github.com/ant-design/ant-design/issues/2748)
|
||||
|
||||
### 2.x Other improvements
|
||||
|
||||
* Alert supports [`banner` mode](http://ant.design/components/alert/#components-alert-demo-banner).
|
||||
* BackTop will scroll to top with animation.
|
||||
* Badge supports [status dot mode](http://ant.design/components/badge/#components-badge-demo-status).
|
||||
* Cascader supports [searching options directly](http://ant.design/components/cascader/#components-cascader-demo-search).
|
||||
* Checkbox supports [indeterminate mode](http://ant.design/components/checkbox/#components-checkbox-demo-check-all).
|
||||
* Form supports [vertical layout](http://ant.design/components/form/#components-form-demo-validate-customized).
|
||||
* InputNumber supports long press to increase/decrease number. [#](http://ant.design/components/input-number/#components-input-number-demo-basic)
|
||||
* notification supports [customized icon](http://ant.design/components/notification/#components-notification-demo-custom-icon).
|
||||
* Spin allows [customized tips and animation work together](http://ant.design/components/spin/#components-spin-demo-tip). @jerrybendy
|
||||
* Transfer can handle event while options are checked/unchecked. [#](http://ant.design/components/transfer/#components-transfer-demo-basic)
|
||||
* Transfer can determine [whether an option is checkable](http://ant.design/components/transfer/#components-transfer-demo-basic).
|
||||
* Improve style of Alert and notification.
|
||||
* Modal.confirm(and so on) can be closed by keyboard. @Dafrok
|
||||
* Improve the user experience of [selecting time in DatePicker](http://ant.design/components/date-picker/#components-date-picker-demo-time).
|
||||
* Improve the status changed animation of [Spin](http://ant.design/components/spin/#components-spin-demo-nested ).
|
||||
* Update [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc).
|
||||
|
||||
### 2.x Workflow
|
||||
|
||||
* [AntD Library](http://library.ant.design/) a collection of Axure files which includes components and patterns that follow Ant Design Specification.
|
||||
* Rename `babel-plugin-antd` to [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import), and this means that `babel-plugin-import` becomes an common load-on-demand solution and not just for `antd`.
|
||||
Please update `package.json`:
|
||||
```diff
|
||||
{
|
||||
"devDependencies": {
|
||||
- "babel-plugin-antd": "^0.x.x",
|
||||
+ "babel-plugin-import": "^1.0.0",
|
||||
}
|
||||
}
|
||||
```
|
||||
And update your babel config in `.babelrc` or other place:
|
||||
```diff
|
||||
{
|
||||
- "plugins": [["antd", { style: "css" }]]
|
||||
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
}
|
||||
```
|
||||
* [`dva@1.0.0`](https://github.com/dvajs/dva) is published and it is officially recommended framework [in real world](http://ant.design/docs/react/practical-projects).
|
||||
* The officially recommended scaffold is [`dva-cli`](https://github.com/dvajs/dva-cli) now, the old `antd-init` is just for studying and demo.
|
||||
|
||||
## 1.0.0
|
||||
|
||||
Visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0) to read change logs from `0.x` to `1.x`。
|
||||
845
CHANGELOG.md
Normal file
845
CHANGELOG.md
Normal file
@@ -0,0 +1,845 @@
|
||||
---
|
||||
order: 3
|
||||
chinese: 更新日志
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
你也可以查看 GitHub 上的 [发布日志](https://github.com/ant-design/ant-design/releases)。
|
||||
|
||||
---
|
||||
|
||||
## 1.3.2
|
||||
|
||||
`2016-06-06`
|
||||
|
||||
- 修复全局模式下引用 antd，IE8 环境报错的问题。 [#1970](https://github.com/ant-design/ant-design/issues/1970)
|
||||
|
||||
## 1.3.1
|
||||
|
||||
`2016-06-06`
|
||||
|
||||
- 修复 `Message` `Notification` 找不到的问题。 [#1968](https://github.com/ant-design/ant-design/issues/1968)
|
||||
|
||||
## 1.3.0
|
||||
|
||||
`2016-06-02`
|
||||
|
||||
- Transfer 组件增加 `rowKey` 属性，可自定义数据源主键。 [#1900](https://github.com/ant-design/ant-design/issues/1900)
|
||||
- Tag 组件 `default` 类型的样式增加边框，防止淹没在背景中。 [#1910](https://github.com/ant-design/ant-design/issues/1910)
|
||||
- Table
|
||||
- 修复筛选为单选时仍旧展示多选框的问题。 [#1880](https://github.com/ant-design/ant-design/issues/1880)
|
||||
- 修复 fixed left 的固定列会覆盖 rowSelection 的 Checkbox 的问题。 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 升级 rc-table 依赖
|
||||
- 修复了 fixed 列中数据重复展示以及一些错位问题。 [#1898](https://github.com/ant-design/ant-design/issues/1898)
|
||||
- `dataIndex` 支持内嵌属性的写法。 [react-component/table#46](https://github.com/react-component/table/issues/46)
|
||||
- 修复了 v1.2.0 新增加的组件属性的 TypeScript 定义。 [#1933](https://github.com/ant-design/ant-design/issues/1933)
|
||||
- Form 修复 label中冒号的国际化问题，采用样式实现冒号，不再需要手动输入冒号。 [#1877](https://github.com/ant-design/ant-design/issues/1877)
|
||||
- 修复 DatePicker 组件点击『此刻』失效的问题，并进行了一些代码优化。 [#1902](https://github.com/ant-design/ant-design/issues/1902)
|
||||
- 升级 rc-upload 依赖，修复了 IE10 中第二次上传同一文件不触发 `onChange` 的问题。 [058af3c](https://github.com/ant-design/ant-design/commit/b15a4e3165be5e4db995d3fe75d4d557c7f21c61)
|
||||
- 文档使用 [bisheng](https://github.com/benjycui/bisheng) 重构。
|
||||
|
||||
## 1.2.1
|
||||
|
||||
`2016-05-27`
|
||||
|
||||
- 修复一个 Select 组件的文字重复问题。
|
||||
|
||||
## 1.2.0
|
||||
|
||||
`2016-05-26`
|
||||
|
||||
- Input 组件的文档现在和 Form 分离。 [3c98d3](https://github.com/ant-design/ant-design/commit/3c98d3f80f4ec80066756adc3b4108141d4383ca)
|
||||
- Affix
|
||||
- 新增了 `onChange` 属性。当固定状态改变时回调 [#1777](https://github.com/ant-design/ant-design/issues/1777)
|
||||
- 找回了从 affixStyle 中走失的 `width` 属性，修复固定后错位的问题。[#1820](https://github.com/ant-design/ant-design/issues/1820)
|
||||
- Table
|
||||
- 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
|
||||
- 修复了当有列固定在左边时，选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 修复了当 Checkbox 的 label 为数字 0 时， label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
|
||||
- 修复了 Tag 组件为 closeable 时，内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
|
||||
- Tab 组件新增 `hideAdd` 属性，用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
|
||||
- 修复了一个在某些情况下找不到 `normalize.css/normalize.css` 文件的问题。[ant-design/antd-init#52](https://github.com/ant-design/antd-init/issues/52)
|
||||
- 修复构建文件在 IE8 下报错的问题。[#1804](https://github.com/ant-design/ant-design/issues/1804)
|
||||
- 更新了第三方依赖。
|
||||
|
||||
## 1.1.0
|
||||
|
||||
`2016-05-18`
|
||||
|
||||
- Cascader 的选择框支持自定义渲染节点，并给 `displayRender` 方法增加了 `selectedOptions` 参数。[#1726](https://github.com/ant-design/ant-design/issues/1726)
|
||||
- Input.Group 新增 `size` 属性，可设置控件尺寸。[#1732](https://github.com/ant-design/ant-design/issues/1732)
|
||||
- Layout 新增常用布局：侧边导航展开收起模式。[#1643](https://github.com/ant-design/ant-design/issues/1643)
|
||||
- Transfer 支持自定义渲染行数据。[#1664](https://github.com/ant-design/ant-design/issues/1664)
|
||||
- Upload 的 children 为空时，不再显示上传按钮。[#1610](https://github.com/ant-design/ant-design/issues/1610)
|
||||
- Table
|
||||
- 修复 `filter` 过滤数据后显示错误分页的问题。[#1669](https://github.com/ant-design/ant-design/issues/1669)
|
||||
- 修复 `pagination` 不指定时显示错误分页的问题。[#1683](https://github.com/ant-design/ant-design/issues/1683)
|
||||
- Modal
|
||||
- 修复弹出时背景依然跟随滚动的问题。[#1751](https://github.com/ant-design/ant-design/issues/1751)
|
||||
- 修复关闭按钮获得焦点时的样式问题。[#1668](https://github.com/ant-design/ant-design/issues/1668)
|
||||
- 将搜索输入框相关样式移到 Input 组件下。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
|
||||
- 修复 Select 获得焦点时的样式问题。[#1684](https://github.com/ant-design/ant-design/issues/1684)
|
||||
- 修复 TreeSelect 占位符样式问题。[#1657](https://github.com/ant-design/ant-design/issues/1657)
|
||||
- 修复了类型定义以更好地支持 `TypeScript`。[#1696](https://github.com/ant-design/ant-design/pull/1696) [@xujihui1985](https://github.com/xujihui1985)
|
||||
- 优化了 LocaleProvider。[a3850a4](https://github.com/ant-design/ant-design/commit/a3850a4df84d7055a1a40600919f2f9ba1bbf2b2)
|
||||
- 其他组件的样式优化。
|
||||
|
||||
## 1.0.1
|
||||
|
||||
`2016-05-11`
|
||||
|
||||
- 修复当 Table 的 `rowSelection.type` 为 'radio' 时的报错。[#1627](https://github.com/ant-design/ant-design/issues/1627)
|
||||
- 修复 CheckboxGroup 与 `getFieldProps`共用时的问题。[#1631](https://github.com/ant-design/ant-design/issues/1631)
|
||||
- 修复 RangePicker 中 TimePicker 不会受 locale 控制的问题。[#1635](https://github.com/ant-design/ant-design/issues/1635)
|
||||
- 修复 Tag 组件缺失的问题。
|
||||
- 修复 Table 的 className 不在最外层容器上的问题。
|
||||
- 修复一个样式文件重复打包的问题。
|
||||
|
||||
## 1.0.0
|
||||
|
||||
`2016-05-09`
|
||||
|
||||
很高兴的通知各位，经过四个月时间的紧密开发，`antd@1.0.0` 终于发布了。从去年 5 月 7 日提交第一行代码以来，经过整整一年的开发迭代，antd 受到社区的大量关注，使用的公司和产品持续增加，已经日趋成熟。这个版本我们重构了底层代码和站点，持续完善现有组件功能和优化细节，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时反馈给我们。
|
||||
|
||||
### 主要变化
|
||||
|
||||
- **兼容 React@15.x**。
|
||||
- **全新单页站点**，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。
|
||||
- **样式支持按需加载**。可参考 [antd-init](https://github.com/ant-design/antd-init) 的模版代码, 需要配合 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd#usage) 插件和 `style` 配置进行使用。[#900](https://github.com/ant-design/ant-design/issues/900)
|
||||
- **提供独立的构建文件**。[文档](/docs/react/install?scrollTo=浏览器引入)
|
||||
- 新增卡片组件 [Card](/components/card)。
|
||||
- 新增评分组件 [Rate](/components/rate)。
|
||||
- 新增 [LocaleProvider](/components/locale-provider) 组件，提供组件文案的国际化支持，并新增了英语和俄语的语言配置。[#1411](https://github.com/ant-design/ant-design/issues/1411)
|
||||
- 更好的服务端渲染支持，修复了 Badge、Spin、Calendar、Upload 等组件服务端渲染的问题。
|
||||
- 新增 antd.d.ts 以更好的支持 TypeScript。[@bang88](https://github.com/bang88)
|
||||
- 布局组件支持响应式布局和栅格间隔设置。[#1082](https://github.com/ant-design/ant-design/issues/1082)
|
||||
- Table 支持固定列和横向滚动。[#1265](https://github.com/ant-design/ant-design/issues/1265)
|
||||
|
||||
### 不兼容改动
|
||||
|
||||
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
|
||||
|
||||
- 推荐使用样式按需加载, 如果需要整体载入样式, **样式入口文件变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
|
||||
|
||||
```diff
|
||||
- import 'antd/lib/index.css'; // import 'antd/style/index.less';
|
||||
+ import 'antd/dist/antd.css'; // import 'antd/dist/antd.less';
|
||||
```
|
||||
|
||||
- 完全移除了 `0.12` 中废弃的 Validation 组件，可以直接 import [rc-form-validation](https://github.com/react-component/form-validation) 用以代替。[#1096](https://github.com/ant-design/ant-design/issues/1096)
|
||||
- Breadcrumb.Item 的 `href` 属性被移除，请直接用 `a` 标签包裹可点击的内容。
|
||||
- Modal 移除了 `align` 属性，现在可以使用 `style` 属性调整位置。
|
||||
- `Modal.confirm` 等方法的配置项 `iconClassName` 重命名为 `iconType`。
|
||||
- Select 移除了 `onChange` 中的 `label` 参数，新增了 `labelInValue` 属性。[#1695](https://github.com/ant-design/ant-design/issues/1695)
|
||||
- 移除了 `import { Form } from 'antd/lib/form';` 的用法，应统一为 `import { Form } from 'antd';` 或 `import Form from 'antd/lib/form';`。
|
||||
|
||||
#### 有兼容提示的改动
|
||||
|
||||
这里的改动在升级后控制台会出现警告提示，请按提示进行修改。
|
||||
|
||||
- 废弃 QueueAnim，可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/#/components/queue-anim)，欢迎前往探索。
|
||||
- Affix 的 `offset` 属性重命名为 `offsetTop`。
|
||||
- Popover 的 `overlay` 属性重命名为 `content`。
|
||||
- Progress.Line 使用方式改为 `<Progress />` 或 `<Progress type="line" />`。
|
||||
- Progress.Circle 使用方式改为 `<Progress type="circle" />`。
|
||||
- Spin 的 `spining` 属性更正为 `spinning`。
|
||||
- Alert 的 type `warn` 重命名为 `warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225)
|
||||
- Tree 的 `onExpand` 参数从 `function(node, expanded, expandedKeys)` 调整为 `function(expandedKeys, {expanded, node})`。
|
||||
|
||||
### Bug 修复
|
||||
|
||||
- 修复 Table 的 `size` 为 `middle` 时，分页器大小无法控制的问题。[#1396](https://github.com/ant-design/ant-design/issues/1396)
|
||||
- 修复 Table 的 `pagination.defaultCurrent` 失效的问题。
|
||||
- 修复 Cascader 的 `defaultValue` 没有被 `value` 覆盖的问题。
|
||||
- 修复 Select 同时设置 `allowClear` `disabled` 时还是会出现清除按钮的问题。[#1480](https://github.com/ant-design/ant-design/issues/1480)
|
||||
- 修复 Transfer 的 `DataSource` 变化时已选中项没有同步的问题。[#1587](https://github.com/ant-design/ant-design/issues/1587)
|
||||
- 修复 DatePicker 日期格式与国际化配置不同步的问题。[#1509](https://github.com/ant-design/ant-design/issues/1509)
|
||||
- 修复 Button 禁用时事件仍然会冒泡的问题。[#1541](https://github.com/ant-design/ant-design/issues/1541)
|
||||
- 修复 Carousel 自动播放时的卡顿和报错问题。[#1397](https://github.com/ant-design/ant-design/issues/1397)
|
||||
- 修复 Tabs 的 card 类型内嵌标准 Tabs 时的样式问题。[#1617](https://github.com/ant-design/ant-design/issues/1617)
|
||||
- 修复 Menu `horizontal` 和 `vertical` 模式不支持受控 `openKeys` 的问题。
|
||||
|
||||
### 其他改进
|
||||
|
||||
- 样式变量梳理，去除了部分无用的变量，另外还有大量样式细节问题修复。
|
||||
- 依赖的 normalize.css 升级到 [4.x](https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md)。
|
||||
- 使用 ES2016 classes 重构了代码。[@waywardmonkeys](https://github.com/waywardmonkeys)
|
||||
- Popover、Popconfirm 和 Tooltip 组件根据不同的弹出位置有了更精准方向的弹出动画。
|
||||
- 补充 Select TreeSelect Switch Radio Checkbox 等组件的 `focus` 表现，增强表单组件的可用性。[#1358](https://github.com/ant-design/ant-design/issues/1358)
|
||||
- message 和 notification 现在可以全局配置 `duration`。[#1143](https://github.com/ant-design/ant-design/issues/1143)
|
||||
- DatePicker 和 TimePicker 的 `onChange(date, dateString)` 方法增加第二个参数用于获得格式化后的日期字符串。[#1104](https://github.com/ant-design/ant-design/issues/1104)
|
||||
- DatePicker 和 DatePicker.RangePicker 现在可以设置内部 TimePikcer 的属性。[#1415](https://github.com/ant-design/ant-design/issues/1415)
|
||||
- Checkbox
|
||||
- 支持类似 Radio 的使用方式 `<Checkbox>option</Checkbox>`。[#1029](https://github.com/ant-design/ant-design/issues/1029)
|
||||
- Checkbox.Group 现在允许 `label` 和 `value` 不同。[#1025](https://github.com/ant-design/ant-design/issues/1025)
|
||||
- Checkbox.Group 允许单独设置某个 Checkbox 为 `disabled`。[#1218](https://github.com/ant-design/ant-design/issues/1218)
|
||||
- Breadcrumb
|
||||
- 支持路由模式下自定义链接 `linkRender`。[#1026](https://github.com/ant-design/ant-design/issues/1026)
|
||||
- 支持路由模式下自定义最后一项内容 `nameRender`。[#1304](https://github.com/ant-design/ant-design/issues/1304)
|
||||
- Modal
|
||||
- 新增 `Modal.warning` 方法。
|
||||
- 弹出时背景不再跟随滚动。[#1195](https://github.com/ant-design/ant-design/issues/1195)
|
||||
- Select
|
||||
- 搜索框和单选选择框合并，以优化视觉和交互效果。
|
||||
- 优化多选框的选中效果。
|
||||
- Spin
|
||||
- 增加延时展示以优化体验。[#1273](https://github.com/ant-design/ant-design/issues/1273)
|
||||
- 增加 `tip` 属性用于定义加载文案。[#1046](https://github.com/ant-design/ant-design/issues/1046)
|
||||
- Steps
|
||||
- 重构布局方式，以支持更灵活的自适应布局和优化了性能，并移除了 `maxDescriptionWidth` 属性。[#1099](https://github.com/ant-design/ant-design/issues/1099)
|
||||
- 新增 `status` 属性以指定当前步骤状态，同时支持错误步骤的展示。[#1098](https://github.com/ant-design/ant-design/issues/1098)
|
||||
- Timeline
|
||||
- 新增 `dot` 属性，可自定义时间轴点。
|
||||
- 现在可以设置 `className` 和 `style` 的问题。
|
||||
- `color` 属性现在支持自定义色值。
|
||||
- Tree
|
||||
- 当子节点被选中时，自动展开父节点。
|
||||
- 新增 `checkStrictly` 属性，支持父子节点选中关系脱离。
|
||||
- Upload
|
||||
- 在上传文件列表中的文件被删除时，将触发 `onRemove` 事件。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- 增加 `onPreview` 支持文件的自定义预览方式。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- `data` 属性支持设为一个函数，用于动态修改上传参数。[react-component/upload#32](https://github.com/react-component/upload/pull/32)
|
||||
- Slider `marks` 现在支持 JSX 并可以单独设置某个标记的样式。
|
||||
- Tag 的 `onClose` 可以使用 `e.preventDefault()` 阻止默认事件。[#1267](https://github.com/ant-design/ant-design/issues/1267)
|
||||
- Form.Item 在有多个 child 时也可以自动生成错误信息与校验状态，但一个 Form.Item 内仍然只能有一个表单控件。[#1287](https://github.com/ant-design/ant-design/issues/1287)
|
||||
- Input 新增 `onPressEnter` 属性监听回车事件。
|
||||
- Table 现在可以通过 `filteredValue` `sortOrder` 控制筛选和排序的状态。[#971](https://github.com/ant-design/ant-design/issues/971)
|
||||
- Button 增加了 `icon` 属性。[#1199](https://github.com/ant-design/ant-design/issues/1199)
|
||||
- SubMenu 增加 `onTitleClick` 属性。
|
||||
- Affix 增加 `offsetBottm` 属性，支持固定在底部。[#1000](https://github.com/ant-design/ant-design/issues/1000)
|
||||
|
||||
### 相关工具发布
|
||||
|
||||
- [antd-init](http://github.com/ant-design/antd-init) 同步发布 `1.0.0` 版本，享受最新 [ant-tool](https://github.com/ant-tool/) 工具带来的流畅开发体验。
|
||||
- [Ant Motion](http://motion.ant.design) 全新的动效设计解决方案。
|
||||
- [Ant UX](http://ux.ant.design/) 发布 1.0 版本，提供多种平台的流程素材支持。
|
||||
|
||||
## 0.12.17
|
||||
|
||||
`2016-05-05`
|
||||
|
||||
- 修复 FormItem 校验时表单项高度跳动的问题。[#1557](https://github.com/ant-design/ant-design/issues/1557)
|
||||
- 修复一个 Table 圆角样式的小问题。
|
||||
|
||||
## 0.12.16
|
||||
|
||||
`2016-04-27`
|
||||
|
||||
- 修复 Collapse 在 safari 中切换动画异常的问题。[#1494](https://github.com/ant-design/ant-design/issues/1494)
|
||||
- 修复 Table 的 selectedRowKeys 在初次渲染时失效的问题。[#1501](https://github.com/ant-design/ant-design/issues/1501)
|
||||
- Table 现在点击选择框时将不再触发 `onRowClick`。[#1470](https://github.com/ant-design/ant-design/issues/1470)
|
||||
- 修复一个 Calender 服务端渲染时提示 `Option is not defined` 的问题。[#1521](https://github.com/ant-design/ant-design/issues/1521)
|
||||
- 修复 Menu 动态切换模式时的一些细节问题。
|
||||
- 优化了 export 导出图标。
|
||||
- 修复 Form 的一些样式细节。
|
||||
|
||||
## 0.12.15
|
||||
|
||||
`2016-04-21`
|
||||
|
||||
- 升级 rc-collapse 修复一个性能问题。
|
||||
- 修复一个 Collapse 内嵌 Tabs 的选中项样式问题。[#1451](https://github.com/ant-design/ant-design/issues/1451)
|
||||
- 修复 Input 组件服务端渲染报错的问题。[#1321](https://github.com/ant-design/ant-design/issues/1321)
|
||||
- 修复 Tag 组件调用了两次 afterClose 的问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
|
||||
- 修复一个 Table 控制模式的问题。[#1434](https://github.com/ant-design/ant-design/issues/1434)
|
||||
- 修复一个 Tabs 相互嵌套的样式问题。[#1435](https://github.com/ant-design/ant-design/issues/1435)
|
||||
- 修复 Dropdown.Button 点击右边也触发 onClick 的问题。
|
||||
- 修复 Radio.Button 在 IE8 下无法选择的问题。[#1459](https://github.com/ant-design/ant-design/issues/1459)
|
||||
- 优化了 Button 点击后仍然有 focus 效果的问题。
|
||||
|
||||
## 0.12.14
|
||||
|
||||
`2016-04-13`
|
||||
|
||||
- Form 和 Form.Item 支持 style 属性。[#1290](https://github.com/ant-design/ant-design/issues/1290)
|
||||
- 修正 IE9 下没有 prefix css3 属性的问题。
|
||||
- 修正 Table 中指定了 pagination.current 时依然能响应用户操作的问题。[#1311](https://github.com/ant-design/ant-design/issues/1311)
|
||||
- 修正 Table 的单选模式无法用 `selectedRowKeys` 控制的问题。[#1346](https://github.com/ant-design/ant-design/issues/1346)
|
||||
- 修正 DatePicker 启用 showTime 时时区失效的问题。[#1356](https://github.com/ant-design/ant-design/issues/1356)
|
||||
- 修正 Menu、Progress、Form、Table、Select、Pagination、Cascader 的样式细节问题。
|
||||
- 修正 Breadcrumb 不支持 IndexRoute 的问题。[#1375](https://github.com/ant-design/ant-design/issues/1375)
|
||||
- 修正 Table 的筛选菜单 filters 的 value 为数字时无法选中的问题。
|
||||
- 修正 DatePicker 面板输入框的日期格式 format 和外面不一致的问题。[#1403](https://github.com/ant-design/ant-design/issues/1403)
|
||||
|
||||
## 0.12.13
|
||||
|
||||
`2016-03-29`
|
||||
|
||||
- 按照最新的规范修正 Message、Alert、Notification 的默认图标。
|
||||
- 统一梳理和优化了各浮层组件的 `z-index`，并增加了对应的 less 变量。
|
||||
- 修复一个 Breadcrumb 组件未指定 breadcrumbName 导致的解析问题。[#1251](https://github.com/ant-design/ant-design/pull/1251)
|
||||
- 现在 Upload 服务端返回数据不是 JSON 格式时将不判断为出错。[#1248](https://github.com/ant-design/ant-design/issues/1248)
|
||||
- 修复 Cascader 在 Chrome 下无法滚动菜单的问题。
|
||||
- 修复 Select、Radio、Progress、Table、DatePicker 的一些样式细节。
|
||||
|
||||
## 0.12.12
|
||||
|
||||
`2016-03-18`
|
||||
|
||||
- 更新了设计资源文件 `Axure Components` 和 `Axure Box`。
|
||||
- 修复 Popover 和 Popconfirm 箭头消失的问题。
|
||||
- 修复一个 Table 切换分页长度时的页码溢出的问题。
|
||||
|
||||
## 0.12.11
|
||||
|
||||
`2016-03-16`
|
||||
|
||||
- 全新的设计文档 `语言` 部分。
|
||||
- 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。
|
||||
- TreeSelect 组件补充 `showCheckedStrategy` 属性，支持回填数据的不同展示方式。
|
||||
- 补充 Modal `align` 属性的文档。
|
||||
- 修复 Menu 弹出菜单 `z-index` 丢失的问题。
|
||||
- Progress 的默认颜色固定，不再随着主色变化。
|
||||
- 优化 Button 点击动画在 Chrome 下的效果。
|
||||
- 修复一个 Affix 的 `z-index` 太低的问题。
|
||||
- 修复 Table 树形数据的二级节点列前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212)
|
||||
- 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206)
|
||||
- 修复 Table 指定 `rowKey` 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。
|
||||
|
||||
## 0.12.10
|
||||
|
||||
- 修复 0.12.9 版本 npm 包打包错误的问题。
|
||||
|
||||
## 0.12.9
|
||||
|
||||
`2016-03-11`
|
||||
|
||||
- Transfer
|
||||
- 可以定义 `notFoundContent `。
|
||||
- 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。
|
||||
- 修复 Popconfirm、Popover、Tooltip 的箭头位置未指向元素的问题。
|
||||
- 修正 Badge 在搜狗等旧版 webkit 浏览器下无法使用的问题。
|
||||
- 调整 Tabs 样式。
|
||||
- 修复 Table 中的 Pagination 默认配置问题。
|
||||
- 调整 Form.Item 在 inline 模式下的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141)
|
||||
- 修复 DatePicker `style` 设置错误的问题。
|
||||
- 优化 Popconfirm、Button 样式。
|
||||
- Dropdown 增加默认的 mouseEnterDelay 延迟以优化体验。
|
||||
- 修复 Dialog 样式问题。
|
||||
- 修复 Upload 上传中的状态问题。[#1159](https://github.com/ant-design/ant-design/issues/1159)
|
||||
- 优化 Menu、Tabs 在 Chorme 下的渲染问题。
|
||||
- Form 默认阻止 submit 事件。
|
||||
|
||||
## 0.12.8
|
||||
|
||||
`2016-03-06`
|
||||
|
||||
- 新增 `heart` `calculator` 图标。
|
||||
- Table 补充了 `showHeader` 和 `footer` 属性。
|
||||
- Modal 补充了 `maskClosable` 属性。
|
||||
- 修正一个 Tag 和 Popover 配合使用的问题。[#1111](https://github.com/ant-design/ant-design/issues/1111)
|
||||
- 将 TreeSelect 的 `treeDefaultExpandAll` 默认属性设为 false，并优化了性能。
|
||||
- 修复 RadioGroup 无法垂直布局的问题。[#1119](https://github.com/ant-design/ant-design/issues/1119)
|
||||
- 统一了 less 文件的部分变量。
|
||||
- 修正部分组件的样式。
|
||||
|
||||
## 0.12.7
|
||||
|
||||
`2016-03-03`
|
||||
|
||||
- 修正 Table 的 `rowSelect.onSelectAll` 的第三个参数 `deselectedRows` 为 `changeRows`，记录每次变化的列。
|
||||
|
||||
## 0.12.6
|
||||
|
||||
`2016-03-02`
|
||||
|
||||
- 优化 Table 本地排序在 Chrome 下的稳定性问题。
|
||||
- 修正 Pagination 的 pageSize 属性为受控属性，并补充了 `defaultPageSize` 属性。[#1087](https://github.com/ant-design/ant-design/issues/1087)
|
||||
- 优化 Select 的 combobox 模式的交互体验。
|
||||
- 升级 react-slick 依赖到 `0.11`，修复自动播放有时会失效的问题。[#1009](https://github.com/ant-design/ant-design/issues/1009)
|
||||
- 修复 TreeSelect 的 allowClear 属性失效的问题。[#1084](https://github.com/ant-design/ant-design/issues/1084)
|
||||
- 修复 Input 组件的 className 属性失效的问题。[#1103](https://github.com/ant-design/ant-design/issues/1103)
|
||||
- 修复 Dropdown 的 onClick 属性失效的问题。[#1097](https://github.com/ant-design/ant-design/issues/1097)
|
||||
- 修复多个 CheckboxGroup 选项互相影响的问题。[#1101](https://github.com/ant-design/ant-design/pull/1101)
|
||||
- 修复 FormItem 的子元素为 `null` 时报错的问题。
|
||||
- 修复 Table 组件的选择功能和展开功能配合使用的问题。[#1102](https://github.com/ant-design/ant-design/issues/1102)
|
||||
- 增加了一个搜索框和提示功能结合的 [例子](http://ant.design/components/select/#demo-search-box)。
|
||||
- 允许可编辑的 Tabs 删除最后一个页签。[#1071](https://github.com/ant-design/ant-design/issues/1071)
|
||||
- Table 的 `rowSelect.onSelectAll` 补充了第三个参数 `deselectedRows`, `rowSelect.onChange` 补充了第二个参数 `selectedRows`。[#1105](https://github.com/ant-design/ant-design/issues/1105)
|
||||
- 修正部分组件的样式。
|
||||
|
||||
## 0.12.5
|
||||
|
||||
`2016-02-25`
|
||||
|
||||
- Pagination 支持 `showTotal` 属性。[#1077](https://github.com/ant-design/ant-design/pull/1077)
|
||||
- Cascader 添加 `allowClear` 属性，允许隐藏清除按钮。
|
||||
- 补充了一个带图标的搜索建议框的例子。[#1067](https://github.com/ant-design/ant-design/issues/1067)
|
||||
- 修复 Transfer 在不支持 Object.assign 的浏览器上报错的问题。
|
||||
- 修复 Cascader 在 Safari 下错位的问题。[#1066](https://github.com/ant-design/ant-design/issues/1066)
|
||||
- 移除对 Button 圆角的降级方案。
|
||||
- 修复了部分组件样式的小问题。
|
||||
|
||||
## 0.12.4
|
||||
|
||||
`2016-02-22`
|
||||
|
||||
- Radio 的 value 支持更多类型。[#1043](https://github.com/ant-design/ant-design/pull/1043)
|
||||
- 修复 Spin 组件的大小、居中等样式问题。
|
||||
- FormItem 补充 extra 属性的文档。[#931](https://github.com/ant-design/ant-design/issues/931)
|
||||
- 修复的 Table 下树形数据和选择框配合时的样式问题。
|
||||
- 修复一个水平表单的错误提示的样式错位问题。[#1040](https://github.com/ant-design/ant-design/issues/1040)
|
||||
- 添加了一个轻微的 Button 点击动效。
|
||||
|
||||
## 0.12.3
|
||||
|
||||
`2016-02-19`
|
||||
|
||||
- DatePicker 补充 allowClear 属性，支持单选的清空。
|
||||
- 修复显示时间的 DatePicker 的清空按钮失效的问题。
|
||||
- 优化 DatePicker 的 `确定` 按钮失效样式。
|
||||
|
||||
## 0.12.2
|
||||
|
||||
`2016-02-19`
|
||||
|
||||
- DatePicker 如果有 `确定` 按钮，现在只有点击 `确定` 按钮才会触发 onChange 事件。
|
||||
- 修复带时间选择的 DatePicker 日期格式缺少时间部分的问题。[#1005](https://github.com/ant-design/ant-design/issues/1005)
|
||||
- 修复 DatePicker 内输入框多余的时间展示的问题。[#953](https://github.com/ant-design/ant-design/issues/953)
|
||||
- 升级依赖 react-slick 到 `0.10`。
|
||||
- 支持表单校验错误时自动滚动到第一个错误项。[#993](https://github.com/ant-design/ant-design/issues/993)
|
||||
- 优化了 Select 和 TreeSelect 多选禁用的样式。
|
||||
- Upload 列表项支持链接展现形式。[#1013](https://github.com/ant-design/ant-design/issues/1013)
|
||||
- 修复 Safari 下的样式警告信息。[#999](https://github.com/ant-design/ant-design/issues/999)
|
||||
- Cascader 支持 popupPlacement 位置配置。
|
||||
|
||||
## 0.12.1
|
||||
|
||||
`2016-02-03`
|
||||
|
||||
- 依赖升级到 `rc-pagination@1.4`、`rc-menu@4.10`、`rc-form@0.12`。
|
||||
- 修复 TreeSelect 的不可用样式。
|
||||
- DatePicker 补充 `getCalendarContainer` 属性，用于解决问题 [#991](https://github.com/ant-design/ant-design/issues/991)。
|
||||
- 修正 Modal `onCancel` 的参数为点击事件。[#980](https://github.com/ant-design/ant-design/issues/980)
|
||||
- 修复一个 Tooltip 内嵌套 Popconfirm 的问题。[#977](https://github.com/ant-design/ant-design/issues/977)
|
||||
- 修复 DatePicker 和 RangePicker 的 `onOk` 一直不可用的问题。
|
||||
- 修复一个 Badge 的 count 无法切换的问题。[#983](https://github.com/ant-design/ant-design/issues/983)
|
||||
|
||||
## 0.12.0
|
||||
|
||||
`2016-02-01`
|
||||
|
||||
- 新增 [级联选择(Cascader)](http://ant.design/components/cascader/) 组件。
|
||||
- 新增 [树选择控件(TreeSelect)](http://ant.design/components/tree-select/) 组件。
|
||||
- Form 自身支持校验功能，废弃 Validation。[演示](http://ant.design/components/form/#demo-validate-basic)
|
||||
- Tabs
|
||||
- `activeKey` 修正为受控属性。
|
||||
- 当前项现在会始终显示。[#815](https://github.com/ant-design/ant-design/issues/815)
|
||||
- Modal 可以配置右上关闭按钮是否显示。
|
||||
- Select
|
||||
- 打开选项菜单时，自动滚动到选中项。
|
||||
- `combobox` 模式时，可配置是否默认选中第一项。[rc-select#38](https://github.com/react-component/select/issues/38)
|
||||
- Table
|
||||
- filter 支持层级选择。
|
||||
- 支持行点击事件 `onRowClick`。
|
||||
- 支持多列的横向切换。[演示](http://ant.design/components/table/#demo-paging-columns)
|
||||
- 更换 `dataSource` 和变换页面时不再默认清除选择数据，你可以用 `selectedRowKeys` 手动控制。`原来默认清除的行为会触发一个数据更新的死循环，而且难以实现跨页选择。`
|
||||
- 支持固定表头。[演示](http://ant.design/components/table/#demo-fixed-header)
|
||||
- Tag 去除 `href` 属性，默认标签名从 `a` 改为 `span`。
|
||||
- Timeline 支持指定 pending 节点的内容。
|
||||
- Tree
|
||||
- 节点支持拖拽。
|
||||
- 支持动态控制节点展开与否。[演示](http://ant.design/components/tree/#demo-basic-controlled)
|
||||
- 可以监听节点展开/关闭事件 `onExpand`。
|
||||
- `onCheck` `onSelect` 参数调整。
|
||||
- `onDataLoaded` 改为 `loadData`。
|
||||
- 新增 drag&drop 相关属性：
|
||||
- `onDragStart`
|
||||
- `onDragEnter`
|
||||
- `onDragOver`
|
||||
- `onDragLeave`
|
||||
- `onDrop`
|
||||
- 新增 TreeNode 节点属性：
|
||||
- `disableCheckbox`
|
||||
- `isLeaf`
|
||||
- Transfer 给 `onChange` 增加参数。[#972](https://github.com/ant-design/ant-design/issues/972)
|
||||
- DatePicker
|
||||
- 修复 RangePicker 开始结束日期相同的 bug。[#822](https://github.com/ant-design/ant-design/issues/822)
|
||||
- 修复 `format` 对浮层不生效问题。[#917](https://github.com/ant-design/ant-design/issues/917)
|
||||
- TimePicker 修复一个 `value` 为 `null` 时没有进入受控模式的问题。
|
||||
- Upload
|
||||
- 可以用 `headers` 设置上传头部。
|
||||
- 新增上传图片卡片样式。[演示](http://ant.design/components/upload/#demo-picture-card)
|
||||
- Radio
|
||||
- 更换 Radio.Button 的展现样式。
|
||||
- 可以设置 Radio.Button 的大小。
|
||||
- Progress
|
||||
- `format` 属性现在支持自定义 function 的方式进行定义。[#893](https://github.com/ant-design/ant-design/issues/893)
|
||||
- `format` 指定 string 和 React.Node 的方式被废弃。
|
||||
- 支持 `style` 属性。[#895](https://github.com/ant-design/ant-design/issues/895)
|
||||
- message && notification 现在可以销毁。
|
||||
- Button
|
||||
- 小号 Button 的圆角调整为 `4px`。
|
||||
- 修复 Button.Group disabled 后的样式问题。[#926](https://github.com/ant-design/ant-design/issues/926)
|
||||
- BreadCrumb
|
||||
- 移除 `router` 属性，无需设置。
|
||||
- 修复一个链接参数不对的问题。
|
||||
|
||||
## 0.11.3
|
||||
|
||||
`2016-01-19`
|
||||
|
||||
- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
|
||||
- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
|
||||
- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
|
||||
- 修复 Transfer 搜索功能失效的问题。
|
||||
- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
|
||||
- 修复 RangePicker 时区无法设置的问题。[#837](https://github.com/ant-design/ant-design/issues/837)
|
||||
- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
|
||||
|
||||
## 0.11.2
|
||||
|
||||
`2015-01-03`
|
||||
|
||||
- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
|
||||
- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
|
||||
- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
|
||||
- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
|
||||
- Table
|
||||
- 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。
|
||||
- 更新 dataSource 时，选中项现在会被清空。
|
||||
- 修复一个全选框和禁用的选择项配合的问题。
|
||||
- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。
|
||||
- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。
|
||||
- 组件和文档的样式小调整。
|
||||
|
||||
## 0.11.1
|
||||
|
||||
`2015-12-29`
|
||||
|
||||
- 修复一个 Table 无法修改 pageSize 的问题。
|
||||
- 修复一个 Table 子表格展开的对齐问题。
|
||||
- 修复一个 Chrome 下部分图标左侧切边的问题。
|
||||
- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
|
||||
|
||||
## 0.11.0
|
||||
|
||||
`2015-12-28`
|
||||
|
||||
- **移除默认加载的样式文件，样式现在需要独立加载。**
|
||||
- 按钮圆角调整为 `6px`。
|
||||
- Modal、Popconfirm、Table、TimePicker 支持国际化配置。
|
||||
- 新增虚线型按钮。
|
||||
- 新增 [通用搜索框](http://ant.design/components/form/#demo-search-input) 样式。
|
||||
- 新增图片上传列表样式[演示](http://ant.design/components/upload/#demo-picture-style)。
|
||||
- **部分设计资源开放 [下载](http://ant.design/spec/tools)，包括 Axure 组件库和 Iconfont 字体打包文件。**
|
||||
- 新增 [吊顶规范](http://ant.design/spec/layout/#demo-ceiling)。
|
||||
- 组件演示页面增加锚点。
|
||||
- 新增穿梭框 [Transfer](http://ant.design/components/transfer/) 组件。
|
||||
- 新增小尺寸的 Switch 开关组件。
|
||||
- 增加更多的图标。[#](https://github.com/ant-design/ant-design/commit/087c64649d73206a4d62e52f9b3f6042c1d28608#diff-dc1a1f4794c1c4ee3b083381d4c50c47R180)
|
||||
- 全局微调了警告和错误状态色。
|
||||
- Select
|
||||
- 选中样式进行了调整。
|
||||
- 在标签/多选模式下，选中或删除选项增加了动画效果。
|
||||
- Alert
|
||||
- 默认样式不展示图标。
|
||||
- 带描述的警告框图标改为描线图标。
|
||||
- `type="warn"` 图标修改。
|
||||
- Dropdown 新增带菜单触发的按钮 `Dropdown.Button`。[演示](http://ant.design/components/dropdown/#demo-dropdown-button)
|
||||
- Menu
|
||||
- 新增 `Menu.ItemGroup` 用于把菜单项分组。
|
||||
- onOpen 和 onClose 函数的参数新增了 `keyPath` 数据，可用于制作手风琴类型的菜单。
|
||||
- Badge
|
||||
- 徽章可以独立使用。[演示](http://ant.design/components/badge/#demo-no-wrapper)
|
||||
- 支持设置封顶的 `99+` 的数字。[演示](http://ant.design/components/badge/#demo-overflow)
|
||||
- Slider
|
||||
- 增加 `onAfterChange` 事件。[演示](http://ant.design/components/slider/#demo-event)
|
||||
- 现在设置 `tipFormatter={null}` 可以隐藏 `Tooltip`。
|
||||
- 双滑块拖动体验优化，一个滑块在拖动时可以直接跨过另一滑块。
|
||||
- Breadcrumb 可以自定义分隔符。[演示](http://ant.design/components/breadcrumb/#demo-separator)
|
||||
- Popconfirm 添加 `visible` 属性，使其可以控制是否显示。[演示](http://ant.design/components/popconfirm/#demo-dynamic-trigger)
|
||||
- 修复 Icon `ref` 引起的报错。
|
||||
- 修复 Calendar 组件无法切换年/月的问题。[#757](https://github.com/ant-design/ant-design/issues/757)
|
||||
- Checkbox 新增 `Checkbox.Group`，现可以方便的 [生成一组选择框](http://ant.design/components/checkbox/#demo-group)
|
||||
- Tabs
|
||||
- 新增 [卡片式页签](http://ant.design/components/tabs/#demo-card)。
|
||||
- 调整 [新增和关闭页签](http://ant.design/components/tabs/#demo-editable-card) 的样式。
|
||||
- 现在支持页签的四个位置 `tabPosition="top|right|bottom|left"`。
|
||||
- 移除 `animation` 属性，并在 `tabPosition="top|bottom"` 时默认启用切换动画。
|
||||
- Timepicker
|
||||
- **重命名为 TimePicker。**
|
||||
- 国际化属性 `locale` 结构发生了 [变化](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384)。
|
||||
- 新增 `value` 属性。
|
||||
- 新增属性 `disabledHours` `disabledMinutes` `disabledSeconds`。[演示](http://ant.design/components/time-picker/#picker-demo-disable-options)
|
||||
- 移除 `hourOptions` `minuteOptions` `secondOptions`，新增 `hideDisabled` 属性用于替代。
|
||||
- Datepicker
|
||||
- **重命名为 DatePicker。**
|
||||
- 新增 [日期范围选择控件](http://ant.design/components/date-picker/#picker-demo-range)。
|
||||
- 修改 `showTime` 的交互。[演示](http://ant.design/components/date-picker/#picker-demo-time)
|
||||
- 修正为受控组件。
|
||||
- Table
|
||||
- **移除 `dataSource` 的远程模式。**
|
||||
- 新增 [紧凑型表格](http://ant.design/components/table/#demo-size)。
|
||||
- 允许监听分页的 `onShowSizeChange`。[演示](http://ant.design/components/table/#demo-paging)
|
||||
- 优化表格对树形数据的显示。[演示](http://ant.design/components/table/#demo-indent-size)
|
||||
- 优化了筛选菜单的样式，并添加了最大高度。[演示](http://ant.design/components/table/#demo-head)。
|
||||
- 修复 column.key 设置失效的问题。[#642](https://github.com/ant-design/ant-design/issues/642)
|
||||
- 修复设置时 rowKey 时单选会导致全部选中的问题。[#697](https://github.com/ant-design/ant-design/issues/697)
|
||||
- 修复一个列重新渲染导致选项错乱的问题。[#418](https://github.com/ant-design/ant-design/issues/418#issuecomment-163093580)
|
||||
- 修复选择列无法设置宽度的问题。[#649](https://github.com/ant-design/ant-design/issues/649)
|
||||
- Form
|
||||
- 修复了 Textarea 无法输入的问题。[#646](https://github.com/ant-design/ant-design/issues/646)
|
||||
- 修复了 Textarea 设置 `cols` 和 `rows` 属性失效的问题。[#694](https://github.com/ant-design/ant-design/issues/694)
|
||||
- 修复无法设置 `className` 的问题。[#711](https://github.com/ant-design/ant-design/issues/711)
|
||||
- 修复 Upload 组件在 `beforeUpload` 返回 `false` 后依然更新上传列表问题。[#757](https://github.com/ant-design/ant-design/issues/757)
|
||||
- 工具
|
||||
- 替换 `antd build` 为 [atool-build](https://github.com/ant-tool/atool-build)，重构并改善了 webpack 配置的自定义方式。
|
||||
- 替换 `antd server` 为 [dora](https://github.com/dora-js/dora)，一个完全插件化的开发服务器，支持[代理转发和数据 Mock](https://github.com/dora-js/dora-plugin-proxy)、[atool-build](https://github.com/dora-js/dora-plugin-atool-build)、[热替换](https://github.com/dora-js/dora-plugin-hmr)。
|
||||
- 新增 babel 插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)，转换 `import {Button} from 'antd'` 为 `import Button from 'antd/lib/button'`。
|
||||
- 发布了 `antd-init@0.6.x`，支持以上改动。
|
||||
|
||||
> [0.11 升级指南](http://ant.design/docs/react/upgrade-notes#0-10-gt-0-11)
|
||||
|
||||
## 0.10.5
|
||||
|
||||
`2016-01-04`
|
||||
|
||||
- 修复 Table 更新 dataSource 后，选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793)
|
||||
|
||||
## 0.10.4
|
||||
|
||||
`2015-11-30`
|
||||
|
||||
- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
|
||||
- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。
|
||||
- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
|
||||
- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
|
||||
|
||||
|
||||
## 0.10.3
|
||||
|
||||
`2015-11-26`
|
||||
|
||||
- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
|
||||
- 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
|
||||
- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
|
||||
- 对演示和样式代码增加了 lint 检查。
|
||||
|
||||
|
||||
## 0.10.2
|
||||
|
||||
`2015-11-25`
|
||||
|
||||
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
|
||||
- 优化 Badge 动画效果。
|
||||
- 修复以下问题：
|
||||
- 文本域的表单校验无法重置。
|
||||
- 设置 Upload 的 `multiple` 为 `true` 时，未显示每个文件的上传进度。
|
||||
- Breadcrumb 配合 Router 的时候如果没有 `breadcrumbName` 会抛错。
|
||||
- InputNumber 同时设置 `size` `className` 时会有冲突。
|
||||
|
||||
|
||||
## 0.10.1
|
||||
|
||||
`2015-11-20`
|
||||
|
||||
- 修改内部组件的引用结构，方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
|
||||
- 移除了演示中没有使用过的 `antd.ButtonGroup`，依然用 `const ButtonGroup = Button.Group` 来使用。
|
||||
- Form 和 Input 目录分离，`import { Form, Input } from 'ant/lib/form'` 的引用方式被废弃。
|
||||
|
||||
现在可以 `import Form from 'ant/lib/form'` 和 `import Input from 'ant/lib/input'`。
|
||||
|
||||
原有的 `import { Form, Input } from 'antd'` 则不受影响。
|
||||
|
||||
- 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题，并将 `calendarStyle` 更名为 `popupStyle`。
|
||||
|
||||
|
||||
## 0.10.0
|
||||
|
||||
`2015-11-20`
|
||||
|
||||
- 全面兼容 `react@0.14.x`。
|
||||
- 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。
|
||||
- [Button](http://ant.design/components/button/)、[Iconfont](http://ant.design/components/icon/)、[Layout](http://ant.design/components/layout/)、[Form](http://ant.design/components/form/)、[Input](http://ant.design/components/form/#demo-input) 等样式模块改造为 React 组件。
|
||||
- 新增 [Queue-anim](http://ant.design/components/queue-anim/) 组件，更换了原来的 enter-animation。
|
||||
- 全新的[字体图标](/components/icon)。
|
||||
- 全面更新视觉风格，补充更多图标。[#313](https://github.com/ant-design/ant-design/issues/313)
|
||||
- 调整字体基线，告别对图标位置的特殊调节。(感谢 [iconfont.cn](http://iconfont.cn) 的鼎力支持)
|
||||
- Datepicker、Dropdown、Select、Popover、Popconfirm 等浮层组件添加在空间不足的情况下自动调整位置功能。
|
||||
- Popover、Tooltip、Popconfirm 组件支持 12 个方向。[#312](https://github.com/ant-design/ant-design/issues/312)
|
||||
- 优先使用苹方字体。
|
||||
- 统一 size 属性的可选值为 `small` `default` `large`。
|
||||
- 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
|
||||
- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
|
||||
- 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
|
||||
- 添加布局和导航规范，以及[常用布局](http://ant.design/spec/layout/)。
|
||||
- 文档支持标题和演示的锚点，方便分享文档和演示代码。
|
||||
- 提供多版本的文档，在[主站](http://ant.design)的右下角提供切换按钮。
|
||||
- [antd-bin](https://github.com/ant-tool/xtool) 升级到 `0.10`。
|
||||
- 拆分出 [antd-init](https://github.com/ant-design/antd-init) 和 [antd-build](https://github.com/ant-design/antd-build)。
|
||||
- 提供代理功能。
|
||||
- 提供 UI 测试功能。
|
||||
|
||||
#### 组件变更
|
||||
|
||||
- Table
|
||||
- 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
|
||||
- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
|
||||
- 列支持了 `colSpan` 和 `rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
|
||||
- 新增 `loading` 属性。
|
||||
- 筛选增加 `filterMultiple` 属性，支持单选的配置。
|
||||
- Datepicker
|
||||
- 添加国际化支持。
|
||||
- 添加手动输入和清除功能。
|
||||
- 优化了视觉样式。
|
||||
- 修复不标准的日期格式导致显示错误的问题。
|
||||
- 用 `onChange` 属性代替 `onSelect` 属性。
|
||||
- Validation 修复了 对 Datepicker、Input-number、Select 的支持，并添加了相关演示。
|
||||
- Carousel 的依赖 react-slick 升级到 0.9.x，相关 API 也相应更新。
|
||||
- Tree 组件支持完全受控模式。[#397](https://github.com/ant-design/ant-design/issues/397)
|
||||
- Input Number
|
||||
- 组件输入体验优化，现在可以键入任意字符，失焦时格式化为合法值。
|
||||
- 修复不支持小数 step 的问题。[#530](https://github.com/ant-design/ant-design/issues/530)
|
||||
- Tabs 新增[垂直页签功能](http://ant.design/components/tabs/#demo-vertical-left)。
|
||||
- Upload 组件视觉优化，新增高级浏览器下的上传进度展示。[#311](https://github.com/ant-design/ant-design/issues/311)
|
||||
- Menu
|
||||
- 视觉效果大幅优化。
|
||||
- 新增 [dark 主题](http://ant.design/components/menu/#demo-theme) 的样式。
|
||||
- 修复一个链接点击区域的问题。[#535](https://github.com/ant-design/ant-design/issues/535)
|
||||
- Dropdown 用 onClick 代替 onSelect 作为推荐的使用方式，因为原有的 onSelect 只在变化时触发。
|
||||
- Slider
|
||||
- 新增[双滑块功能](http://ant.design/components/slider/#demo-range)。
|
||||
- 优化 marks 属性的使用逻辑，使其可以和具体数值进行绑定。[slider#26](https://github.com//react-component/slider/issues/26)
|
||||
- 属性命名优化，用 `dots` 代替了 `withDots` 属性，用 `included` 代替了 `isIncluded`。
|
||||
- Badge 当 `count` 为 0 时不展示。
|
||||
- Progress 新增 `format` 属性，能够自定义展示的进度文案。
|
||||
- Modal 新增 `confirmLoading` 属性。
|
||||
- 新增 Radio.Button 的失效样式。
|
||||
- 提供 IE8 下的圆角按钮[兼容方案](http://ant.design/components/button/#ie8-border-radius-support)。
|
||||
- `antd.Notification()` 修正为 `antd.notification()`。
|
||||
- 另有巨量样式的修复和优化。
|
||||
|
||||
> 备注：
|
||||
>
|
||||
> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
|
||||
> - [0.10 升级指南](http://010x.ant.design/docs/upgrade-to-0.10)
|
||||
|
||||
---
|
||||
|
||||
## 0.9.3 ~ 0.9.5
|
||||
|
||||
`2015-11-04`
|
||||
|
||||
* 增加对 React 版本的检测提示机制，0.9.x 序列只能使用 `react@~0.13.3`。
|
||||
|
||||
|
||||
## 0.9.2
|
||||
|
||||
`2015-10-26`
|
||||
|
||||
* Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76)
|
||||
* 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d)
|
||||
* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](https://github.com/ant-design/ant-design/commit/9ef14500f3abfcc7081f8dceab8187ec835e3918)
|
||||
* 修复一些小的样式问题。
|
||||
|
||||
|
||||
## 0.9.1
|
||||
|
||||
`2015-09-26`
|
||||
|
||||
* 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)
|
||||
* 升级依赖 rc-upload 到 1.6.x，修复 IE8/9 下的兼容性问题。
|
||||
* 升级依赖 rc-steps 到 1.3.x。
|
||||
* 新增 current 属性，方便配置当前的步骤。[#290](https://github.com/ant-design/ant-design/issues/290)
|
||||
* 修复因滚动条影响页面宽度导致的错位问题。
|
||||
* 升级依赖 rc-menu 到 1.5.x。
|
||||
* 新增 onSelect 回调中返回参数 keyPath，从而支持只展开当前父级菜单的交互方式。[demo](http://ant.design/components/menu/#demo-sider-current)
|
||||
* 修复 hover 类型的弹出菜单能响应点击事件的问题。[react-component/menu#14](https://github.com/react-component/menu/issues/14)
|
||||
* 修复一个 Table 的分页无法正确展示的问题。[#253](https://github.com/ant-design/ant-design/issues/253)
|
||||
* 修复一个 combobox 选择框无法选中的问题。[0435ca6](https://github.com/ant-design/ant-design/commit/0435ca60e3b574bac3808a10ba3db62f482335fd)
|
||||
* 修复 Radio.Button 在 IE 8 下不可用的问题。[#321](https://github.com/ant-design/ant-design/issues/321)
|
||||
* 适配 breadcrumb 面包屑组件和 `react-router@1.0.0-rc1`。
|
||||
* 修复只能同时弹出一个 Modal 通知框的问题。[d6a4094](https://github.com/ant-design/ant-design/commit/d6a4094bc4c72acd05be001c7e46dbd17092001a)
|
||||
* 升级依赖 rc-tooltip 到 2.8.0，增加 overlayClassName 属性。
|
||||
* 部分组件交互和视觉效果修正。
|
||||
|
||||
|
||||
## 0.9.0
|
||||
|
||||
`2015-09-14`
|
||||
|
||||
* 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
|
||||
* 优化弹出层类组件的动画效果，使其更加流畅。
|
||||
* 部分文案更新。
|
||||
* 优化主站在小分辨率屏幕下的样式。
|
||||
* 使用 instantclick 改造主站，加载速度有明显提升。
|
||||
* antd-bin 升级到 [0.6.x](https://github.com/ant-design/antd-bin/blob/master/HISTORY.md) 。
|
||||
* Upload **重构了 API 接口，不向下兼容**，支持自定义的功能扩展。
|
||||
* 新增 `onChange(file) {}` 接口，移出原来的 `onSuccess`、`onProgess`、`onError` 等接口。
|
||||
* 新增 `fileList` 和 `defaultFileList` 属性，以满足更多的自定义功能，具体见演示。
|
||||
* 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。
|
||||
* 移除内建的上传成功或失败的信息提示，业务可自行实现。
|
||||
* 修正多文件选择上传时文件列表只展示一个文件的问题。
|
||||
* Table
|
||||
* 新增可展开的 table。[#258](https://github.com/ant-design/ant-design/pull/258)
|
||||
* 新增无数据的展示样式。[4c54644](https://github.com/ant-design/ant-design/commit/4c54644116d46cb2510d2d475234529bad60e5d5)
|
||||
* 修复本地模式 `dataSource` 无法更新的问题。[6d2dcc4](https://github.com/ant-design/ant-design/commit/6d2dcc45393b6ec0ad1ba73caf8b1ec42353743f)
|
||||
* 修复远程模式 loading 失效的问题。[9b8abb2](https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf)
|
||||
* 用 [reqwest-without-xhr2](http://npmjs.com/reqwest-without-xhr2) 代替了 reqwest，解决某些开发环境下 xhr2 依赖的问题。
|
||||
* Select
|
||||
* 增加 label 属性，允许多选模式下展示标签（原来只能显示 value 值）。[演示](http://react-component.github.io/select/examples/mul-suggest.html)
|
||||
* 修复 combobox 模式下 value 失效的问题。
|
||||
* Notification 修复不会自动消失的问题。[23fce55](https://github.com/ant-design/ant-design/commit/23fce559b0b2faf4e0b686a92dbcdd045727a464)
|
||||
* Steps 新增竖版的步骤条。
|
||||
* Carousel 修复 fade 模式下可以拖拽的问题。#212
|
||||
* Collapse 修复动画不生效的问题。
|
||||
* Datepicker 修复无法设置为空值的问题。
|
||||
* Modal
|
||||
* 添加 [通知类型](http://ant.design/components/modal/#demo-info) 的对话框函数。
|
||||
* 用 `Modal.confirm()` 代替 `confirm()` 方法。
|
||||
* 修改为需要在 onCancel 手动设置 visible 属性来关闭。
|
||||
* Message 添加 [加载中类型](http://ant.design/components/message/#demo-loading)。
|
||||
* Radio 修改 Radio.Group 容器的盒模型属性为 inline-block 。
|
||||
* Enter Animation
|
||||
* 大幅度的重构，全新 API 的设计。
|
||||
* 支持和 react-router 结合使用。
|
||||
|
||||
|
||||
## 0.8.0
|
||||
|
||||
`2015-08-25`
|
||||
|
||||
这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。
|
||||
|
||||
* 新增九个组件 `menu`、`upload`、`carousel`、`tree`、`notification`、`validation`、`affix`、`alert`、`enterAnimation`。目前共有组件 34 个，基本能满足后台类项目的组件需求。
|
||||
* 新增设计文档部分，包括文字、色彩、动画。
|
||||
* 重新梳理了设计和 React 实现部分的关系，强调了 Ant Design 的设计属性，并更新了网站的信息结构。
|
||||
* 构建工具 `antd-bin` 升级到 `0.4.0` 版本，支持合并 webpack 配置，热替换（HMR）等特性，[详见](https://github.com/ant-design/antd-bin)。
|
||||
* 组件动画优化和补充，体验更加流畅动感。
|
||||
* 排查并修复 IE 和 safari 等浏览器的兼容问题。
|
||||
* 大量代码重构，演示代码补充，文档更新、以及样式上的优化。
|
||||
|
||||
## 0.7.3
|
||||
|
||||
`2015-07-30`
|
||||
|
||||
* 小幅重构了 Table 分页，修复了分页导致的数据不展示的问题。
|
||||
* 更新了部分文档。
|
||||
|
||||
## 0.7.2
|
||||
|
||||
`2015-07-27`
|
||||
|
||||
* 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
|
||||
* 重构了 message 组件。
|
||||
* 添加英文版说明文档 [README-en_US.md](https://github.com/ant-design/ant-design/blob/master/README-en_US.md)。
|
||||
* 部分代码切换至 ES6 模式。
|
||||
* 修正了部分组件的样式和演示，优化部分动画。
|
||||
|
||||
## 0.7.1
|
||||
|
||||
`2015-07-22`
|
||||
|
||||
* 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。
|
||||
* select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)（原来是显示 value）。
|
||||
* 修正了部分组件的样式和演示。
|
||||
* 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。
|
||||
|
||||
## 0.7.0
|
||||
|
||||
`2015-07-21`
|
||||
|
||||
* 第一个公开版本，发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。
|
||||
* 发布 [Ant Design 首页](http://ant.design/) 和入门文档。
|
||||
@@ -1,572 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title: 更新日志
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
如果需要查看 `0.12.x` 及之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0)。
|
||||
|
||||
---
|
||||
|
||||
## 2.0.0
|
||||
|
||||
`2016-09-x`
|
||||
|
||||
很高兴的通知各位，经过四个月时间的紧密开发，`antd@2.0.0` 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 [反馈给我们](https://github.com/ant-design/ant-design/issues)。
|
||||
|
||||
### 2.x 主要变化
|
||||
|
||||
* 开发语言改为 TypeScript，提供 **官方支持的 `.d.ts` 文件**，感谢 [#1846](https://github.com/ant-design/ant-design/issues/1846) 中所有参与到这次重构的人以及后期 @infeng 对其的完善。
|
||||
* **新增英文文档**， 以后将同时提供中英双语文档，感谢 [#1471](https://github.com/ant-design/ant-design/issues/1471) 里所有参与到翻译、review 中的人。
|
||||
* 时间类组件 DatePicker、TimePicker、Calendar 等的底层 **使用 [moment](http://momentjs.com/) 替换 [gregorian-calendar](github.com/yiminghe/gregorian-calendar)**。
|
||||
* 全新设计的 [图标](http://ant.design/components/icon/)。
|
||||
* 新增提及组件 [Mention](http://ant.design/components/mention/)。
|
||||
* 新增自动完成组件 [AutoComplete](http://ant.design/components/auto-complete/)。
|
||||
* Form 新增 `getFieldDecorator` 作为 `getFieldProps` 的替代，对于不正确的使用方式 `getFieldDecorator` 会给出提示，可以降低踩坑的概率。相关讨论见 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
|
||||
* Table 支持 [表头分组](http://ant.design/components/table/#components-table-demo-grouping-columns)。@yesmeck
|
||||
* 完全移除 `antd@1.x` 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。
|
||||
|
||||
### 2.x 不兼容改动
|
||||
|
||||
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
|
||||
|
||||
* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。
|
||||
```diff
|
||||
- <TimePicker defaultValue="12:08:23" />
|
||||
+ <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
|
||||
|
||||
- <DatePicker defaultValue="2015/01/01" />
|
||||
+ <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />
|
||||
|
||||
- <Calendar defaultValue={new Date('2010-10-10')} />
|
||||
+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
|
||||
```
|
||||
* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。由于 `JSON.stringy(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
|
||||
```js
|
||||
handleSubmit() {
|
||||
const values = this.props.form.getFieldsValue();
|
||||
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // 或其它格式
|
||||
const data = JSON.stringify(values);
|
||||
// 发送 data 到服务器
|
||||
}
|
||||
```
|
||||
* 时间类组件的 `format` 属性配置也调整为与 [moment](http://momentjs.com/docs/) 的一致。
|
||||
* Breadcrumb 移除 `linkRender` 和 `nameRender`，请使用 `itemRender`。
|
||||
* Menu 移除 `onClose` `onOpen`，请使用 `onOpenChange`。API 差异较大，请先研究 [demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current)。
|
||||
* Table 移除列分页功能，请使用 [固定列](http://ant.design/components/table/#components-table-demo-fixed-columns)。
|
||||
|
||||
以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。
|
||||
|
||||
* Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`：
|
||||
```diff
|
||||
+ getFieldDecorator('userName', { ... })(
|
||||
<Input placeholder="请输入账户名"
|
||||
- {...getFieldProps('userName', { ... })}
|
||||
/>
|
||||
+ )
|
||||
```
|
||||
* DatePicker 废弃 `toggleOpen`，请使用 `onOpenChange`：
|
||||
```diff
|
||||
- handleToggleOpen({ open }) {
|
||||
+ handleOpenChange(open) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 2.x Bug 修复
|
||||
|
||||
* 修复 Dropdown.Button `disabled` 属性无效的问题。[#3070](https://github.com/ant-design/ant-design/issues/3070)
|
||||
* 修复 Form.create `withRef` 选项失效的问题。[#2843](https://github.com/ant-design/ant-design/issues/2843)
|
||||
* 修复 Menu inline 模式下子菜单展开的问题。[#2701](https://github.com/ant-design/ant-design/issues/2701)
|
||||
* 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。[#2684](https://github.com/ant-design/ant-design/issues/2684)
|
||||
* 修复 DatePicker[showTime] 参数中的 `format` 失效的问题。[#3123](https://github.com/ant-design/ant-design/issues/3123)
|
||||
* 修复 Table[dataSource] 中的项的 key 为 `0` 时识别错误的问题。[#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
|
||||
* 修复 Tree.Node 无子节点时仍然显示箭头的问题。[#2616](https://github.com/ant-design/ant-design/issues/2616)
|
||||
* 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。[#2748](https://github.com/ant-design/ant-design/issues/2748)
|
||||
|
||||
### 2.x 其他改进
|
||||
|
||||
* Alert 新增 [`banner` 模式](http://ant.design/components/alert/#components-alert-demo-banner)。
|
||||
* BackTop 增加回到顶部的动画效果。
|
||||
* Badge 新增 [状态点模式](http://ant.design/components/badge/#components-badge-demo-status)。
|
||||
* Cascader 新增 [搜索功能](http://ant.design/components/cascader/#components-cascader-demo-search)。
|
||||
* Checkbox 新增 [indeterminate 状态](http://ant.design/components/checkbox/#components-checkbox-demo-check-all)。
|
||||
* Form 新增 [垂直布局](http://ant.design/components/form/#components-form-demo-validate-customized)。
|
||||
* InputNumber 现在支持长按。[#](http://ant.design/components/input-number/#components-input-number-demo-basic)
|
||||
* notification 支持 [自定义 icon](http://ant.design/components/notification/#components-notification-demo-custom-icon)。
|
||||
* Spin 现在允许 [自定义文案与动画共存](http://ant.design/components/spin/#components-spin-demo-tip)。@jerrybendy
|
||||
* Transfer 现在可以监听用户选择了哪些选项。[#](http://ant.design/components/transfer/#components-transfer-demo-basic)
|
||||
* Transfer 现在可以定义哪些选项是 [不可选择的](http://ant.design/components/transfer/#components-transfer-demo-basic)。
|
||||
* 优化 Alert 和 notification 的样式。
|
||||
* 优化 Modal.confirm 之类的弹窗的键盘交互。@Dafrok
|
||||
* 优化 [DatePicker 的时间选择](http://ant.design/components/date-picker/#components-date-picker-demo-time) 交互。
|
||||
* 优化 [Spin 状态切换](http://ant.design/components/spin/#components-spin-demo-nested ) 时的效果。
|
||||
* 更新 [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc)。
|
||||
|
||||
### 2.x 相关工具发布
|
||||
|
||||
* 新增配套网站 [AntD Library](http://library.ant.design/)，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。
|
||||
* `babel-plugin-antd` 更名为 [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import)，标志着该插件将作为一个通用的按需加载方案存在，而不再是 `antd` 专有。
|
||||
请更新 `package.json`：
|
||||
```diff
|
||||
{
|
||||
"devDependencies": {
|
||||
- "babel-plugin-antd": "^0.x.x",
|
||||
+ "babel-plugin-import": "^1.0.0",
|
||||
}
|
||||
}
|
||||
```
|
||||
同时更新 `.babelrc` 或你在其它地方对其的配置：
|
||||
```diff
|
||||
{
|
||||
- "plugins": [["antd", { style: "css" }]]
|
||||
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
}
|
||||
```
|
||||
* [`dva@1.0.0`](https://github.com/dvajs/dva) 也已经发布，并推荐 [在实战项目中使用](http://ant.design/docs/react/practical-projects)。
|
||||
* 脚手架工具推荐使用 [`dva-cli`](https://github.com/dvajs/dva-cli)，原来的 `antd-init` 以后仅会用于学习以及 demo。
|
||||
|
||||
## 1.11.2
|
||||
|
||||
`2016-09-26`
|
||||
|
||||
- 修复 Popover 内嵌 Badge 后失效的问题。[#3109](https://github.com/ant-design/ant-design/issues/3109)
|
||||
- 修复 Modal 内嵌的 Button 在某些情况下与 Modal 的滚动不同步的问题。[#3031](https://github.com/ant-design/ant-design/issues/3031)
|
||||
|
||||
## 1.11.1
|
||||
|
||||
`2016-09-14`
|
||||
|
||||
- 修复 Menu 设置成 `theme=dark` 后，链接点击无效的问题。[#2929](https://github.com/ant-design/ant-design/issues/2929)
|
||||
- 修复迷你型 Table 表头与内容不对齐的问题。[#2933](https://github.com/ant-design/ant-design/issues/2933)
|
||||
- 修复 Cascader hover 样式。[#3015](https://github.com/ant-design/ant-design/issues/3015)
|
||||
- 修复 Upload 上传多个文件时，`onChange` 调用不正确的问题。[#3001](https://github.com/ant-design/ant-design/issues/3001)
|
||||
- 修复 TimePicker 报错样式的问题。[#2973](https://github.com/ant-design/ant-design/issues/2973)
|
||||
- 修复 Calendar 控件的年度选择下拉内容截断的问题。[#2927](https://github.com/ant-design/ant-design/issues/2927)
|
||||
|
||||
## 1.11.0
|
||||
|
||||
`2016-09-01`
|
||||
|
||||
- `Tooltip` `Popover` `Popconfirm` 修正默认对齐方式为边缘对齐，增加 arrowPointAtCenter 属性用于箭头指向中心的行为。[commit 977e2e3](https://github.com/ant-design/ant-design/commit/977e2e32fc40968846c8201ed72bdc3818375d2f)
|
||||
- `Table`
|
||||
- 移除数据中添加的 `indexForSort`。[#2501](https://github.com/ant-design/ant-design/issues/2501)
|
||||
- 修复 `pagination` 属性中 `defaultPageSize` 不生效的问题。[#2874](https://github.com/ant-design/ant-design/issues/2874)
|
||||
- 修复数据为空时固定列出现重复提示的问题。[#2812](https://github.com/ant-design/ant-design/issues/2812)
|
||||
- 给树形子数据增加排序功能。[#2839](https://github.com/ant-design/ant-design/issues/2839)
|
||||
- `InputNumber` 样式问题修复。[#2876](https://github.com/ant-design/ant-design/issues/2876)
|
||||
- 修复手动导入 less 文件时 input error 样式被 focus 样式覆盖的问题。[#2916](https://github.com/ant-design/ant-design/issues/2916)
|
||||
- index.d.ts 中补充了一些缺失的声明，修复 `Form` 中 typescript 语法检查报错的问题。[#2885](https://github.com/ant-design/ant-design/issues/2885)
|
||||
- 升级 react-slick 依赖到 `0.13`。
|
||||
|
||||
## 1.10.0
|
||||
|
||||
`2016-08-20`
|
||||
|
||||
- Affix 和 BackTop 新增 `target` 属性，支持指定滚动容器。[#2718](https://github.com/ant-design/ant-design/issues/2718)
|
||||
- 文档页面加上编辑按钮，方便社区贡献。[#2325](https://github.com/ant-design/ant-design/issues/2325)
|
||||
- 升级 rc-cascader 依赖，修复一个 `loadData` 属性和表单结合使用的问题。[#2767](https://github.com/ant-design/ant-design/issues/2767)
|
||||
- 修复 `editable-card` 类型的 Tabs 没有关闭图标的问题。[#2747](https://github.com/ant-design/ant-design/issues/2747)
|
||||
- Menu 修正默认 `z-index`。[#2762](https://github.com/ant-design/ant-design/issues/2762)
|
||||
- 修正 Select 组件在 IE 下的一些样式问题。[#2741](https://github.com/ant-design/ant-design/issues/2741)
|
||||
|
||||
## 1.9.1
|
||||
|
||||
`2016-08-16`
|
||||
|
||||
- 修复 `editable-card` 类型的 Tabs 设置 `activeKey` 无效的问题。[#2725](https://github.com/ant-design/ant-design/issues/2725)
|
||||
- 修复一个 Table 的样式兼容性问题。[#2723](https://github.com/ant-design/ant-design/issues/2723)
|
||||
- 更新 axure 部件库。[#2714](https://github.com/ant-design/ant-design/issues/2714)
|
||||
|
||||
## 1.9.0
|
||||
|
||||
`2016-08-15`
|
||||
|
||||
- Transfer 修复在火狐下 item 文案过长时只显示省略号的问题。[#2674](https://github.com/ant-design/ant-design/issues/2674)
|
||||
- Input 修复 `autosize` 模式下特定场景中不能输入中文及光标定位不准的问题。[#2666](https://github.com/ant-design/ant-design/issues/2666) [#2239](https://github.com/ant-design/ant-design/issues/2239)
|
||||
- Tabs 修复 `type="editable-card"` 模式下的 `children` 解析问题。[#2658](https://github.com/ant-design/ant-design/issues/2658)
|
||||
- Radio 修复若干 less 硬编码问题。[#2424](https://github.com/ant-design/ant-design/issues/2424)
|
||||
- Upload 的 rc-upload 依赖升级至 2.x，引入的变化有：
|
||||
- 增加 `disabled` 属性。[#2645](https://github.com/ant-design/ant-design/issues/2645)
|
||||
- 取消上传时会自动 abort 上传请求。[#2571](https://github.com/ant-design/ant-design/issues/2571) [#2518](https://github.com/ant-design/ant-design/issues/2518)
|
||||
- Table
|
||||
- 修复 spin 在可滚动区域的定位问题。[#2652](https://github.com/ant-design/ant-design/issues/2652)
|
||||
- 修复无数据时 提示样式错位的问题。[#2663](https://github.com/ant-design/ant-design/issues/2663)
|
||||
- Popover 修复设定 `getTooltipContainer` 后会导致内嵌 DatePicker 样式失效的问题。[#2675](https://github.com/ant-design/ant-design/issues/2675)
|
||||
- Modal 修复重复卸载组件导致的报错。[#2688](https://github.com/ant-design/ant-design/issues/2688)
|
||||
- 升级 rc-slider 组件依赖。
|
||||
|
||||
## 1.8.0
|
||||
|
||||
`2016-08-08`
|
||||
|
||||
- 修复可关闭 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 支持自定义标签颜色。[#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)
|
||||
- 修复了 Row 组件在同一行闭合会报错的问题。[#2603](https://github.com/ant-design/ant-design/issues/2603)
|
||||
- Table 的 `rowSelection.onChange` 的参数 `selectedRows` 现在和 `selectedRowKeys` 保持一致。[#2566](https://github.com/ant-design/ant-design/issues/2603)
|
||||
- Checkbox 和 Radio 现在支持 `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`
|
||||
|
||||
- 修复全局模式下引用 antd，IE8 环境报错的问题。 [#1970](https://github.com/ant-design/ant-design/issues/1970)
|
||||
|
||||
## 1.3.1
|
||||
|
||||
`2016-06-06`
|
||||
|
||||
- 修复 `Message` `Notification` 找不到的问题。 [#1968](https://github.com/ant-design/ant-design/issues/1968)
|
||||
|
||||
## 1.3.0
|
||||
|
||||
`2016-06-02`
|
||||
|
||||
- Transfer 组件增加 `rowKey` 属性，可自定义数据源主键。 [#1900](https://github.com/ant-design/ant-design/issues/1900)
|
||||
- Tag 组件 `default` 类型的样式增加边框，防止淹没在背景中。 [#1910](https://github.com/ant-design/ant-design/issues/1910)
|
||||
- Table
|
||||
- 修复筛选为单选时仍旧展示多选框的问题。 [#1880](https://github.com/ant-design/ant-design/issues/1880)
|
||||
- 修复 fixed left 的固定列会覆盖 rowSelection 的 Checkbox 的问题。 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 升级 rc-table 依赖
|
||||
- 修复了 fixed 列中数据重复展示以及一些错位问题。 [#1898](https://github.com/ant-design/ant-design/issues/1898)
|
||||
- `dataIndex` 支持内嵌属性的写法。 [react-component/table#46](https://github.com/react-component/table/issues/46)
|
||||
- 修复了 v1.2.0 新增加的组件属性的 TypeScript 定义。 [#1933](https://github.com/ant-design/ant-design/issues/1933)
|
||||
- Form 修复 label中冒号的国际化问题，采用样式实现冒号，不再需要手动输入冒号。 [#1877](https://github.com/ant-design/ant-design/issues/1877)
|
||||
- 修复 DatePicker 组件点击『此刻』失效的问题，并进行了一些代码优化。 [#1902](https://github.com/ant-design/ant-design/issues/1902)
|
||||
- 升级 rc-upload 依赖，修复了 IE10 中第二次上传同一文件不触发 `onChange` 的问题。 [058af3c](https://github.com/ant-design/ant-design/commit/b15a4e3165be5e4db995d3fe75d4d557c7f21c61)
|
||||
- 文档使用 [bisheng](https://github.com/benjycui/bisheng) 重构。
|
||||
|
||||
## 1.2.1
|
||||
|
||||
`2016-05-27`
|
||||
|
||||
- 修复一个 Select 组件的文字重复问题。
|
||||
|
||||
## 1.2.0
|
||||
|
||||
`2016-05-26`
|
||||
|
||||
- Input 组件的文档现在和 Form 分离。 [3c98d3](https://github.com/ant-design/ant-design/commit/3c98d3f80f4ec80066756adc3b4108141d4383ca)
|
||||
- Affix
|
||||
- 新增了 `onChange` 属性。当固定状态改变时回调 [#1777](https://github.com/ant-design/ant-design/issues/1777)
|
||||
- 找回了从 affixStyle 中走失的 `width` 属性，修复固定后错位的问题。[#1820](https://github.com/ant-design/ant-design/issues/1820)
|
||||
- Table
|
||||
- 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
|
||||
- 修复了当有列固定在左边时，选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
|
||||
- 修复了当 Checkbox 的 label 为数字 0 时， label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
|
||||
- 修复 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)
|
||||
- 修复构建文件在 IE8 下报错的问题。[#1804](https://github.com/ant-design/ant-design/issues/1804)
|
||||
- 更新了第三方依赖。
|
||||
|
||||
## 1.1.0
|
||||
|
||||
`2016-05-18`
|
||||
|
||||
- Cascader 的选择框支持自定义渲染节点，并给 `displayRender` 方法增加了 `selectedOptions` 参数。[#1726](https://github.com/ant-design/ant-design/issues/1726)
|
||||
- Input.Group 新增 `size` 属性，可设置控件尺寸。[#1732](https://github.com/ant-design/ant-design/issues/1732)
|
||||
- Layout 新增常用布局：侧边导航展开收起模式。[#1643](https://github.com/ant-design/ant-design/issues/1643)
|
||||
- Transfer 支持自定义渲染行数据。[#1664](https://github.com/ant-design/ant-design/issues/1664)
|
||||
- Upload 的 children 为空时，不再显示上传按钮。[#1610](https://github.com/ant-design/ant-design/issues/1610)
|
||||
- Table
|
||||
- 修复 `filter` 过滤数据后显示错误分页的问题。[#1669](https://github.com/ant-design/ant-design/issues/1669)
|
||||
- 修复 `pagination` 不指定时显示错误分页的问题。[#1683](https://github.com/ant-design/ant-design/issues/1683)
|
||||
- Modal
|
||||
- 修复弹出时背景依然跟随滚动的问题。[#1751](https://github.com/ant-design/ant-design/issues/1751)
|
||||
- 修复关闭按钮获得焦点时的样式问题。[#1668](https://github.com/ant-design/ant-design/issues/1668)
|
||||
- 将搜索输入框相关样式移到 Input 组件下。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
|
||||
- 修复 Select 获得焦点时的样式问题。[#1684](https://github.com/ant-design/ant-design/issues/1684)
|
||||
- 修复 TreeSelect 占位符样式问题。[#1657](https://github.com/ant-design/ant-design/issues/1657)
|
||||
- 修复了类型定义以更好地支持 `TypeScript`。[#1696](https://github.com/ant-design/ant-design/pull/1696) [@xujihui1985](https://github.com/xujihui1985)
|
||||
- 优化了 LocaleProvider。[a3850a4](https://github.com/ant-design/ant-design/commit/a3850a4df84d7055a1a40600919f2f9ba1bbf2b2)
|
||||
- 其他组件的样式优化。
|
||||
|
||||
## 1.0.1
|
||||
|
||||
`2016-05-11`
|
||||
|
||||
- 修复当 Table 的 `rowSelection.type` 为 'radio' 时的报错。[#1627](https://github.com/ant-design/ant-design/issues/1627)
|
||||
- 修复 CheckboxGroup 与 `getFieldProps`共用时的问题。[#1631](https://github.com/ant-design/ant-design/issues/1631)
|
||||
- 修复 RangePicker 中 TimePicker 不会受 locale 控制的问题。[#1635](https://github.com/ant-design/ant-design/issues/1635)
|
||||
- 修复 Tag 组件缺失的问题。
|
||||
- 修复 Table 的 className 不在最外层容器上的问题。
|
||||
- 修复一个样式文件重复打包的问题。
|
||||
|
||||
## 1.0.0
|
||||
|
||||
`2016-05-09`
|
||||
|
||||
很高兴的通知各位，经过四个月时间的紧密开发，`antd@1.0.0` 终于发布了。从去年 5 月 7 日提交第一行代码以来，经过整整一年的开发迭代，antd 受到社区的大量关注，使用的公司和产品持续增加，已经日趋成熟。这个版本我们重构了底层代码和站点，持续完善现有组件功能和优化细节，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时反馈给我们。
|
||||
|
||||
### 主要变化
|
||||
|
||||
- **兼容 React@15.x**。
|
||||
- **全新单页站点**，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。
|
||||
- **样式支持按需加载**。可参考 [antd-init](https://github.com/ant-design/antd-init) 的模版代码, 需要配合 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd#usage) 插件和 `style` 配置进行使用。[#900](https://github.com/ant-design/ant-design/issues/900)
|
||||
- **提供独立的构建文件**。[文档](/docs/react/install#浏览器引入)
|
||||
- 新增卡片组件 [Card](/components/card)。
|
||||
- 新增评分组件 [Rate](/components/rate)。
|
||||
- 新增 [LocaleProvider](/components/locale-provider) 组件，提供组件文案的国际化支持，并新增了英语和俄语的语言配置。[#1411](https://github.com/ant-design/ant-design/issues/1411)
|
||||
- 更好的服务端渲染支持，修复了 Badge、Spin、Calendar、Upload 等组件服务端渲染的问题。
|
||||
- 新增 antd.d.ts 以更好的支持 TypeScript。[@bang88](https://github.com/bang88)
|
||||
- 布局组件支持响应式布局和栅格间隔设置。[#1082](https://github.com/ant-design/ant-design/issues/1082)
|
||||
- Table 支持固定列和横向滚动。[#1265](https://github.com/ant-design/ant-design/issues/1265)
|
||||
|
||||
### 不兼容改动
|
||||
|
||||
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
|
||||
|
||||
- 推荐使用样式按需加载。如果依然需要整体载入样式，**样式入口文件已变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
|
||||
|
||||
```diff
|
||||
- import 'antd/lib/index.css'; // import 'antd/style/index.less';
|
||||
+ import 'antd/dist/antd.css'; // import 'antd/dist/antd.less';
|
||||
```
|
||||
|
||||
- 完全移除了 `0.12` 中废弃的 Validation 组件，可以直接 import [rc-form-validation](https://github.com/react-component/form-validation) 用以代替。[#1096](https://github.com/ant-design/ant-design/issues/1096)
|
||||
- Breadcrumb.Item 的 `href` 属性被移除，请直接用 `a` 标签包裹可点击的内容。
|
||||
- Modal 移除了 `align` 属性，现在可以使用 `style` 属性调整位置。
|
||||
- `Modal.confirm` 等方法的配置项 `iconClassName` 重命名为 `iconType`。
|
||||
- Select 移除了 `onChange` 中的 `label` 参数，新增了 `labelInValue` 属性。[#1695](https://github.com/ant-design/ant-design/issues/1695)
|
||||
- 移除了 `import { Form } from 'antd/lib/form';` 的用法，应统一为 `import { Form } from 'antd';` 或 `import Form from 'antd/lib/form';`。
|
||||
|
||||
#### 有兼容提示的改动
|
||||
|
||||
这里的改动在升级后控制台会出现警告提示，请按提示进行修改。
|
||||
|
||||
- 废弃 QueueAnim，可以直接 import [rc-queue-anim](https://github.com/react-component/queue-anim) 用以代替。Ant Design 的动效方案已移至 [Ant Motion](http://motion.ant.design/components/queue-anim)，欢迎前往探索。
|
||||
- Affix 的 `offset` 属性重命名为 `offsetTop`。
|
||||
- Popover 的 `overlay` 属性重命名为 `content`。
|
||||
- Progress.Line 使用方式改为 `<Progress />` 或 `<Progress type="line" />`。
|
||||
- Progress.Circle 使用方式改为 `<Progress type="circle" />`。
|
||||
- Spin 的 `spining` 属性更正为 `spinning`。
|
||||
- Alert 的 type `warn` 重命名为 `warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225)
|
||||
- Tree 的 `onExpand` 参数从 `function(node, expanded, expandedKeys)` 调整为 `function(expandedKeys, {expanded, node})`。
|
||||
|
||||
### Bug 修复
|
||||
|
||||
- 修复 Table 的 `size` 为 `middle` 时，分页器大小无法控制的问题。[#1396](https://github.com/ant-design/ant-design/issues/1396)
|
||||
- 修复 Table 的 `pagination.defaultCurrent` 失效的问题。
|
||||
- 修复 Cascader 的 `defaultValue` 没有被 `value` 覆盖的问题。
|
||||
- 修复 Select 同时设置 `allowClear` `disabled` 时还是会出现清除按钮的问题。[#1480](https://github.com/ant-design/ant-design/issues/1480)
|
||||
- 修复 Transfer 的 `DataSource` 变化时已选中项没有同步的问题。[#1587](https://github.com/ant-design/ant-design/issues/1587)
|
||||
- 修复 DatePicker 日期格式与国际化配置不同步的问题。[#1509](https://github.com/ant-design/ant-design/issues/1509)
|
||||
- 修复 Button 禁用时事件仍然会冒泡的问题。[#1541](https://github.com/ant-design/ant-design/issues/1541)
|
||||
- 修复 Carousel 自动播放时的卡顿和报错问题。[#1397](https://github.com/ant-design/ant-design/issues/1397)
|
||||
- 修复 Tabs 的 card 类型内嵌标准 Tabs 时的样式问题。[#1617](https://github.com/ant-design/ant-design/issues/1617)
|
||||
- 修复 Menu `horizontal` 和 `vertical` 模式不支持受控 `openKeys` 的问题。
|
||||
|
||||
### 其他改进
|
||||
|
||||
- 样式变量梳理，去除了部分无用的变量，另外还有大量样式细节问题修复。
|
||||
- 依赖的 normalize.css 升级到 [4.x](https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md)。
|
||||
- 使用 ES2016 classes 重构了代码。[@waywardmonkeys](https://github.com/waywardmonkeys)
|
||||
- Popover、Popconfirm 和 Tooltip 组件根据不同的弹出位置有了更精准方向的弹出动画。
|
||||
- 补充 Select TreeSelect Switch Radio Checkbox 等组件的 `focus` 表现，增强表单组件的可用性。[#1358](https://github.com/ant-design/ant-design/issues/1358)
|
||||
- message 和 notification 现在可以全局配置 `duration`。[#1143](https://github.com/ant-design/ant-design/issues/1143)
|
||||
- DatePicker 和 TimePicker 的 `onChange(date, dateString)` 方法增加第二个参数用于获得格式化后的日期字符串。[#1104](https://github.com/ant-design/ant-design/issues/1104)
|
||||
- DatePicker 和 DatePicker.RangePicker 现在可以设置内部 TimePikcer 的属性。[#1415](https://github.com/ant-design/ant-design/issues/1415)
|
||||
- Checkbox
|
||||
- 支持类似 Radio 的使用方式 `<Checkbox>option</Checkbox>`。[#1029](https://github.com/ant-design/ant-design/issues/1029)
|
||||
- Checkbox.Group 现在允许 `label` 和 `value` 不同。[#1025](https://github.com/ant-design/ant-design/issues/1025)
|
||||
- Checkbox.Group 允许单独设置某个 Checkbox 为 `disabled`。[#1218](https://github.com/ant-design/ant-design/issues/1218)
|
||||
- Breadcrumb
|
||||
- 支持路由模式下自定义链接 `linkRender`。[#1026](https://github.com/ant-design/ant-design/issues/1026)
|
||||
- 支持路由模式下自定义最后一项内容 `nameRender`。[#1304](https://github.com/ant-design/ant-design/issues/1304)
|
||||
- Modal
|
||||
- 新增 `Modal.warning` 方法。
|
||||
- 弹出时背景不再跟随滚动。[#1195](https://github.com/ant-design/ant-design/issues/1195)
|
||||
- Select
|
||||
- 搜索框和单选选择框合并，以优化视觉和交互效果。
|
||||
- 优化多选框的选中效果。
|
||||
- Spin
|
||||
- 增加延时展示以优化体验。[#1273](https://github.com/ant-design/ant-design/issues/1273)
|
||||
- 增加 `tip` 属性用于定义加载文案。[#1046](https://github.com/ant-design/ant-design/issues/1046)
|
||||
- Steps
|
||||
- 重构布局方式，以支持更灵活的自适应布局和优化了性能，并移除了 `maxDescriptionWidth` 属性。[#1099](https://github.com/ant-design/ant-design/issues/1099)
|
||||
- 新增 `status` 属性以指定当前步骤状态，同时支持错误步骤的展示。[#1098](https://github.com/ant-design/ant-design/issues/1098)
|
||||
- Timeline
|
||||
- 新增 `dot` 属性，可自定义时间轴点。
|
||||
- 现在可以设置 `className` 和 `style` 的问题。
|
||||
- `color` 属性现在支持自定义色值。
|
||||
- Tree
|
||||
- 当子节点被选中时，自动展开父节点。
|
||||
- 新增 `checkStrictly` 属性，支持父子节点选中关系脱离。
|
||||
- Upload
|
||||
- 在上传文件列表中的文件被删除时，将触发 `onRemove` 事件。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- 增加 `onPreview` 支持文件的自定义预览方式。[#1240](https://github.com/ant-design/ant-design/issues/1240)
|
||||
- `data` 属性支持设为一个函数，用于动态修改上传参数。[react-component/upload#32](https://github.com/react-component/upload/pull/32)
|
||||
- Slider `marks` 现在支持 JSX 并可以单独设置某个标记的样式。
|
||||
- Tag 的 `onClose` 可以使用 `e.preventDefault()` 阻止默认事件。[#1267](https://github.com/ant-design/ant-design/issues/1267)
|
||||
- Form.Item 在有多个 child 时也可以自动生成错误信息与校验状态，但一个 Form.Item 内仍然只能有一个表单控件。[#1287](https://github.com/ant-design/ant-design/issues/1287)
|
||||
- Input 新增 `onPressEnter` 属性监听回车事件。
|
||||
- Table 现在可以通过 `filteredValue` `sortOrder` 控制筛选和排序的状态。[#971](https://github.com/ant-design/ant-design/issues/971)
|
||||
- Button 增加了 `icon` 属性。[#1199](https://github.com/ant-design/ant-design/issues/1199)
|
||||
- SubMenu 增加 `onTitleClick` 属性。
|
||||
- Affix 增加 `offsetBottm` 属性，支持固定在底部。[#1000](https://github.com/ant-design/ant-design/issues/1000)
|
||||
|
||||
### 相关工具发布
|
||||
|
||||
- [antd-init](http://github.com/ant-design/antd-init) 同步发布 `1.0.0` 版本，享受最新 [ant-tool](https://github.com/ant-tool/) 工具带来的流畅开发体验。
|
||||
- [Ant Motion](http://motion.ant.design) 全新的动效设计解决方案。
|
||||
- [Ant UX](http://ux.ant.design/) 发布 1.0 版本，提供多种平台的流程素材支持。
|
||||
|
||||
## 0.12.17
|
||||
|
||||
去 [GitHub](https://github.com/ant-design/ant-design/releases?after=1.0.0) 查看 `0.12.x` 及之前的更新日志。
|
||||
@@ -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。
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
@@ -33,12 +34,12 @@ ReactDOM.render(<DatePicker />, mountNode);
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
```
|
||||
|
||||
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
|
||||
按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。
|
||||
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
现代浏览器和 IE9 及以上。
|
||||
现代浏览器和 IE8 及以上。
|
||||
|
||||
> [IE8 issues](https://github.com/xcatliu/react-ie8)
|
||||
|
||||
@@ -56,17 +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/issues/129)
|
||||
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
|
||||
- [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001)
|
||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||
|
||||
- [版本发布手册](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)
|
||||
|
||||
## 如何贡献
|
||||
|
||||
|
||||
27
README.md
27
README.md
@@ -8,10 +8,14 @@
|
||||
|
||||
An enterprise-class UI design language and React-based implementation.
|
||||
|
||||
## :loudspeaker: Document Translation Recruitment
|
||||
|
||||
We are now working on translate components document to English, and we need some translator and reviewer. https://github.com/ant-design/ant-design/issues/1471
|
||||
|
||||
## Features
|
||||
|
||||
- An enterprise-class design language and high quality UI.
|
||||
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
|
||||
- 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
|
||||
@@ -37,22 +41,22 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
|
||||
### Use modularized antd
|
||||
|
||||
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
||||
- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended)
|
||||
|
||||
```js
|
||||
// .babelrc
|
||||
{
|
||||
"plugins": [["import", { libraryName: "antd", style: "css" }]]
|
||||
"plugins": [["antd", { style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from antd directly.
|
||||
|
||||
```jsx
|
||||
// import js and css modularly, parsed by babel-plugin-import
|
||||
import { DatePicker } from 'antd';
|
||||
// import js and css modularly, parsed by babel-plugin-antd
|
||||
import { DatePicker } from 'antd';
|
||||
```
|
||||
|
||||
|
||||
- Manually import
|
||||
|
||||
```jsx
|
||||
@@ -62,7 +66,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
|
||||
## Browser Support
|
||||
|
||||
Normal browsers and Internet Explorer 9+.
|
||||
Normal browsers and Internet Explorer 8+.
|
||||
|
||||
> [IE8 issues](https://github.com/xcatliu/react-ie8)
|
||||
|
||||
@@ -87,15 +91,12 @@ 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)
|
||||
- [Boilerplates](https://github.com/ant-design/ant-design/issues/129)
|
||||
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
|
||||
- [CodePen boilerplate](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
|
||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||
- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
export default function splitObject(obj, parts): Array<any> {
|
||||
let left = {};
|
||||
let right = {};
|
||||
Object.keys(obj).forEach((k) => {
|
||||
if (parts.indexOf(k) !== -1) {
|
||||
left[k] = obj[k];
|
||||
} else {
|
||||
right[k] = obj[k];
|
||||
}
|
||||
});
|
||||
return [left, right];
|
||||
}
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix>
|
||||
<Button type="primary">Affix top</Button>
|
||||
<Button type="primary">固定在顶部</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 下方固定
|
||||
en-US: Bottom
|
||||
title: 下方固定
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
固定在屏幕下方。
|
||||
|
||||
## en-US
|
||||
|
||||
Affix to bottom.
|
||||
固定在屏幕下方
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix offsetBottom={20}>
|
||||
<Button type="primary">20px to affix bottom</Button>
|
||||
<Button type="primary">固定在距离底部 20px 的位置</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 偏移
|
||||
en-US: Offset
|
||||
title: 偏移
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
达到一定的偏移量才触发。
|
||||
|
||||
## en-US
|
||||
|
||||
Affix element according to offset value.
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix offsetTop={75}>
|
||||
<Button type="primary">75px to affix top</Button>
|
||||
<Button type="primary">固定在距离顶部 75px 的位置</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 固定状态改变的回调
|
||||
en-US: Callback
|
||||
title: 固定状态改变的回调
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以获得是否固定的状态。
|
||||
|
||||
## en-US
|
||||
|
||||
Callback with affixed state.
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
|
||||
const onChange = function (affixed) {
|
||||
console.log(affixed); // true or false
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
|
||||
<Button>120px to affix top</Button>
|
||||
<Affix offsetTop={120} onChange={onChange}>
|
||||
<Button>固定在距离顶部 120px 的位置</Button>
|
||||
</Affix>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 滚动容器
|
||||
en-US: Container to scroll.
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
|
||||
|
||||
## en-US
|
||||
|
||||
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
|
||||
|
||||
````jsx
|
||||
import { Affix, Button } from 'antd';
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<div style={{ height: 100, overflow: 'hidden' }}>
|
||||
<div style={{ height: '100%', overflowY: 'scroll' }} id="affix-target">
|
||||
<div style={{ height: 300, backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg)' }}>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<Affix target={() => document.getElementById('affix-target')} offsetTop={20}>
|
||||
<Button type="primary">Fixed at the top of container</Button>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
title: Affix
|
||||
---
|
||||
|
||||
Make an element sticky to viewport.
|
||||
|
||||
## When To Use
|
||||
|
||||
When user browses a long web page, some content need to sticky to viewport. It is common for menus and actions.
|
||||
|
||||
Please note that Affix should not cover other content in page, especially when the size of viewport is small.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
||||
| onChange | Callback when affix state is changed | Function(affixed) | - |
|
||||
|
||||
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
|
||||
|
||||
```jsx
|
||||
<Affix style={{ position: 'absolute', top: y, left: x}}>
|
||||
...
|
||||
</Affix>
|
||||
```
|
||||
134
components/affix/index.jsx
Normal file
134
components/affix/index.jsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Dom } from 'rc-util';
|
||||
import classNames from 'classnames';
|
||||
import warning from 'warning';
|
||||
|
||||
function getScroll(w, top) {
|
||||
let ret = w[`page${top ? 'Y' : 'X'}Offset`];
|
||||
const method = `scroll${top ? 'Top' : 'Left'}`;
|
||||
if (typeof ret !== 'number') {
|
||||
const d = w.document;
|
||||
// ie6,7,8 standard mode
|
||||
ret = d.documentElement[method];
|
||||
if (typeof ret !== 'number') {
|
||||
// quirks mode
|
||||
ret = d.body[method];
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getOffset(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const body = document.body;
|
||||
const clientTop = element.clientTop || body.clientTop || 0;
|
||||
const clientLeft = element.clientLeft || body.clientLeft || 0;
|
||||
const scrollTop = getScroll(window, true);
|
||||
const scrollLeft = getScroll(window);
|
||||
|
||||
return {
|
||||
top: rect.top + scrollTop - clientTop,
|
||||
left: rect.left + scrollLeft - clientLeft,
|
||||
};
|
||||
}
|
||||
|
||||
export default class Affix extends React.Component {
|
||||
static propTypes = {
|
||||
offsetTop: React.PropTypes.number,
|
||||
offsetBottom: React.PropTypes.number,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
onChange() {},
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
affixStyle: null,
|
||||
};
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
let { offsetTop, offsetBottom, offset } = this.props;
|
||||
|
||||
// Backwards support
|
||||
offsetTop = offsetTop || offset;
|
||||
const scrollTop = getScroll(window, true);
|
||||
const elemOffset = getOffset(ReactDOM.findDOMNode(this));
|
||||
const elemSize = {
|
||||
width: ReactDOM.findDOMNode(this.refs.fixedNode).offsetWidth,
|
||||
height: ReactDOM.findDOMNode(this.refs.fixedNode).offsetHeight,
|
||||
};
|
||||
|
||||
const offsetMode = {};
|
||||
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
|
||||
offsetMode.top = true;
|
||||
offsetTop = 0;
|
||||
} else {
|
||||
offsetMode.top = typeof offsetTop === 'number';
|
||||
offsetMode.bottom = typeof offsetBottom === 'number';
|
||||
}
|
||||
|
||||
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
|
||||
// Fixed Top
|
||||
if (!this.state.affixStyle) {
|
||||
this.setState({
|
||||
affixStyle: {
|
||||
position: 'fixed',
|
||||
top: offsetTop,
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
|
||||
offsetMode.bottom) {
|
||||
// Fixed Bottom
|
||||
if (!this.state.affixStyle) {
|
||||
this.setState({
|
||||
affixStyle: {
|
||||
position: 'fixed',
|
||||
bottom: offsetBottom,
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
} else if (this.state.affixStyle) {
|
||||
this.setState({
|
||||
affixStyle: null,
|
||||
}, () => this.props.onChange(!!this.state.affixStyle));
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.');
|
||||
this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
|
||||
this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames({
|
||||
'ant-affix': this.state.affixStyle,
|
||||
});
|
||||
|
||||
return (
|
||||
<div {...this.props}>
|
||||
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 固钉
|
||||
chinese: 固钉
|
||||
type: Other
|
||||
title: Affix
|
||||
english: Affix
|
||||
---
|
||||
|
||||
将页面元素钉在可视范围。
|
||||
@@ -15,17 +15,9 @@ title: Affix
|
||||
|
||||
## API
|
||||
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
|
||||
|
||||
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
|
||||
|
||||
```jsx
|
||||
<Affix style={{ position: 'absolute', top: y, left: x}}>
|
||||
...
|
||||
</Affix>
|
||||
```
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function | 无 |
|
||||
@@ -1,236 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import classNames from 'classnames';
|
||||
import shallowequal from 'shallowequal';
|
||||
import omit from 'omit.js';
|
||||
|
||||
function getScroll(target, top) {
|
||||
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
||||
const isWindow = target === window;
|
||||
|
||||
let ret = isWindow ? target[prop] : target[method];
|
||||
// ie6,7,8 standard mode
|
||||
if (isWindow && typeof ret !== 'number') {
|
||||
ret = window.document.documentElement[method];
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getTargetRect(target): any {
|
||||
return target !== window ?
|
||||
target.getBoundingClientRect() :
|
||||
{ top: 0, left: 0, bottom: 0 };
|
||||
}
|
||||
|
||||
function getOffset(element, target) {
|
||||
const elemRect = element.getBoundingClientRect();
|
||||
const targetRect = getTargetRect(target);
|
||||
|
||||
const scrollTop = getScroll(target, true);
|
||||
const scrollLeft = getScroll(target, false);
|
||||
|
||||
const docElem = window.document.body;
|
||||
const clientTop = docElem.clientTop || 0;
|
||||
const clientLeft = docElem.clientLeft || 0;
|
||||
|
||||
return {
|
||||
top: elemRect.top - targetRect.top +
|
||||
scrollTop - clientTop,
|
||||
left: elemRect.left - targetRect.left +
|
||||
scrollLeft - clientLeft,
|
||||
};
|
||||
}
|
||||
|
||||
// Affix
|
||||
export interface AffixProps {
|
||||
/**
|
||||
* 距离窗口顶部达到指定偏移量后触发
|
||||
*/
|
||||
offsetTop?: number;
|
||||
offset?: number;
|
||||
/** 距离窗口底部达到指定偏移量后触发 */
|
||||
offsetBottom?: number;
|
||||
style?: React.CSSProperties;
|
||||
/** 固定状态改变时触发的回调函数 */
|
||||
onChange?: (affixed?: boolean) => any;
|
||||
/** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
|
||||
target?: () => Window | HTMLElement;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export default class Affix extends React.Component<AffixProps, any> {
|
||||
static propTypes = {
|
||||
offsetTop: React.PropTypes.number,
|
||||
offsetBottom: React.PropTypes.number,
|
||||
target: React.PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
target() {
|
||||
return window;
|
||||
},
|
||||
onChange() {},
|
||||
prefixCls: 'ant-affix',
|
||||
};
|
||||
|
||||
scrollEvent: any;
|
||||
resizeEvent: any;
|
||||
refs: {
|
||||
[key: string]: any;
|
||||
fixedNode: HTMLElement;
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
affixStyle: null,
|
||||
placeholderStyle: null,
|
||||
};
|
||||
}
|
||||
|
||||
setAffixStyle(e, affixStyle) {
|
||||
const { onChange, target } = this.props;
|
||||
const originalAffixStyle = this.state.affixStyle;
|
||||
const isWindow = target() === window;
|
||||
if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
|
||||
return;
|
||||
}
|
||||
if (shallowequal(affixStyle, originalAffixStyle)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ affixStyle }, () => {
|
||||
const affixed = !!this.state.affixStyle;
|
||||
if ((affixStyle && !originalAffixStyle) ||
|
||||
(!affixStyle && originalAffixStyle)) {
|
||||
onChange(affixed);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setPlaceholderStyle(e, placeholderStyle) {
|
||||
const originalPlaceholderStyle = this.state.placeholderStyle;
|
||||
if (e.type === 'resize') {
|
||||
return;
|
||||
}
|
||||
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ placeholderStyle });
|
||||
}
|
||||
|
||||
updatePosition = (e) => {
|
||||
let { offsetTop, offsetBottom, offset, target } = this.props;
|
||||
const targetNode = target();
|
||||
|
||||
// Backwards support
|
||||
offsetTop = offsetTop || offset;
|
||||
const scrollTop = getScroll(targetNode, true);
|
||||
const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
const elemOffset = getOffset(affixNode, targetNode);
|
||||
const elemSize = {
|
||||
width: this.refs.fixedNode.offsetWidth,
|
||||
height: this.refs.fixedNode.offsetHeight,
|
||||
};
|
||||
|
||||
const offsetMode = {
|
||||
top: null as boolean,
|
||||
bottom: null as boolean,
|
||||
};
|
||||
// Default to `offsetTop=0`.
|
||||
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
|
||||
offsetMode.top = true;
|
||||
offsetTop = 0;
|
||||
} else {
|
||||
offsetMode.top = typeof offsetTop === 'number';
|
||||
offsetMode.bottom = typeof offsetBottom === 'number';
|
||||
}
|
||||
|
||||
const targetRect = getTargetRect(targetNode);
|
||||
const targetInnerHeight =
|
||||
(targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
|
||||
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
|
||||
// Fixed Top
|
||||
this.setAffixStyle(e, {
|
||||
position: 'fixed',
|
||||
top: targetRect.top + offsetTop,
|
||||
left: targetRect.left + elemOffset.left,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle(e, {
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
} else if (
|
||||
scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
|
||||
offsetMode.bottom
|
||||
) {
|
||||
// Fixed Bottom
|
||||
const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
|
||||
this.setAffixStyle(e, {
|
||||
position: 'fixed',
|
||||
bottom: targetBottomOffet + offsetBottom,
|
||||
left: targetRect.left + elemOffset.left,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle(e, {
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
} else {
|
||||
this.setAffixStyle(e, null);
|
||||
this.setPlaceholderStyle(e, null);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const target = this.props.target;
|
||||
this.setTargetEventListeners(target);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.target !== nextProps.target) {
|
||||
this.clearScrollEventListeners();
|
||||
this.setTargetEventListeners(nextProps.target);
|
||||
|
||||
// Mock Event object.
|
||||
this.updatePosition({});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.clearScrollEventListeners();
|
||||
}
|
||||
|
||||
setTargetEventListeners(getTarget) {
|
||||
const target = getTarget();
|
||||
this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
|
||||
this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
|
||||
}
|
||||
|
||||
clearScrollEventListeners() {
|
||||
['scrollEvent', 'resizeEvent'].forEach((name) => {
|
||||
if (this[name]) {
|
||||
this[name].remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const className = classNames({
|
||||
[this.props.prefixCls]: this.state.affixStyle,
|
||||
});
|
||||
|
||||
const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
|
||||
|
||||
return (
|
||||
<div {...props} style={this.state.placeholderStyle}>
|
||||
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
.@{ant-prefix}-affix {
|
||||
.ant-affix {
|
||||
position: fixed;
|
||||
z-index: @zindex-affix;
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 顶部公告
|
||||
en-US: Banner
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。
|
||||
|
||||
## en-US
|
||||
|
||||
When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert message="Warning text" banner />
|
||||
<br />
|
||||
<Alert message="Very long warning text warning text text text text text text text" banner closable />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,22 +1,13 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法，适用于简短的警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage for short messages.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Alert message="Success Text" type="success" />
|
||||
ReactDOM.render(<Alert message="成功提示的文案" type="success" />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,36 +1,26 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 可关闭的警告提示
|
||||
en-US: Closable
|
||||
title: 可关闭的警告提示
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
显示关闭按钮，点击可关闭警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
To show close button.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const onClose = function (e) {
|
||||
console.log(e, 'I was closed.');
|
||||
console.log(e, '我要被关闭啦！');
|
||||
};
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
<Alert message="警告提示的文案"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
onClose={onClose} />
|
||||
<Alert message="错误提示的文案"
|
||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
onClose={onClose} />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,22 +1,14 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 自定义关闭
|
||||
en-US: Customized Close Text
|
||||
title: 自定义关闭
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
|
||||
|
||||
## en-US
|
||||
|
||||
Replace the default icon with customized text.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Alert message="Info Text" type="info" closeText="Close Now" />
|
||||
<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,41 +1,27 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 含有辅助性文字介绍
|
||||
en-US: Description
|
||||
title: 含有辅助性文字介绍
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
含有辅助性文字介绍的警告提示。
|
||||
|
||||
## en-US
|
||||
|
||||
Additional description for alert message.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="成功提示的文案"
|
||||
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
||||
type="success" />
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info" />
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
message="警告提示的文案"
|
||||
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
||||
type="warning" />
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
message="错误提示的文案"
|
||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||
type="error" />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,49 +1,35 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 图标
|
||||
en-US: Icon
|
||||
title: 图标
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可口的图标让信息类型更加醒目。
|
||||
|
||||
## en-US
|
||||
|
||||
Decent icon make information more clear and more friendly.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="success tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
<Alert message="成功提示的文案" type="success" showIcon />
|
||||
<Alert message="消息提示的文案" type="info" showIcon />
|
||||
<Alert message="警告提示的文案" type="warning" showIcon />
|
||||
<Alert message="错误提示的文案" type="error" showIcon />
|
||||
<Alert message="成功提示的文案"
|
||||
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
showIcon />
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
showIcon />
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
message="警告提示的文案"
|
||||
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
showIcon />
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
message="错误提示的文案"
|
||||
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
showIcon />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,25 +1,17 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 四种样式
|
||||
en-US: More types
|
||||
title: 四种样式
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
共有四种样式 `success`、`info`、`warning`、`error`。
|
||||
|
||||
## en-US
|
||||
|
||||
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
<Alert message="成功提示的文案" type="success" />
|
||||
<Alert message="消息提示的文案" type="info" />
|
||||
<Alert message="警告提示的文案" type="warning" />
|
||||
<Alert message="错误提示的文案" type="error" />
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Views
|
||||
title: Alert
|
||||
---
|
||||
|
||||
Alert component for feedback.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to show alert messages for users.
|
||||
- When you need a persist static container, and closable by user actions.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | String | `info` |
|
||||
| closable | Whether Alert can be closed | Boolean | - |
|
||||
| closeText | Close text to show | React.Node | - |
|
||||
| message | Content of Alert | React.Node | - |
|
||||
| description | Additional content of Alert | React.Node | - |
|
||||
| onClose | Callback when close Alert | Function | - |
|
||||
| showIcon | Whether to show icon | Boolean | false |
|
||||
| banner | Whether to show as banner | Boolean | false |
|
||||
@@ -4,35 +4,13 @@ import Animate from 'rc-animate';
|
||||
import Icon from '../icon';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export interface AlertProps {
|
||||
/**
|
||||
* Type of Alert styles, options:`success`, `info`, `warning`, `error`
|
||||
*/
|
||||
type?: 'success' | 'info' | 'warning' | 'error';
|
||||
/** Whether Alert can be closed */
|
||||
closable?: boolean;
|
||||
/** Close text to show */
|
||||
closeText?: React.ReactNode;
|
||||
/** Content of Alert */
|
||||
message: React.ReactNode;
|
||||
/** Additional content of Alert */
|
||||
description?: React.ReactNode;
|
||||
/** Callback when close Alert */
|
||||
onClose?: (event) => void;
|
||||
/** Whether to show icon */
|
||||
showIcon?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
banner?: boolean;
|
||||
}
|
||||
|
||||
export default class Alert extends React.Component<AlertProps, any> {
|
||||
export default class Alert extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-alert',
|
||||
showIcon: false,
|
||||
onClose() {},
|
||||
type: 'info',
|
||||
};
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@@ -42,7 +20,7 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
}
|
||||
handleClose = (e) => {
|
||||
e.preventDefault();
|
||||
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
|
||||
let dom = ReactDOM.findDOMNode(this);
|
||||
dom.style.height = `${dom.offsetHeight}px`;
|
||||
// Magic code
|
||||
// 重复一次后才能正确设置 height
|
||||
@@ -51,7 +29,7 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
this.setState({
|
||||
closing: false,
|
||||
});
|
||||
this.props.onClose(e);
|
||||
this.props.onClose.call(this, e);
|
||||
}
|
||||
animationEnd = () => {
|
||||
this.setState({
|
||||
@@ -61,14 +39,9 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
}
|
||||
render() {
|
||||
let {
|
||||
closable, description, type, prefixCls, message, closeText, showIcon, banner,
|
||||
closable, description, type, prefixCls, message, closeText, showIcon,
|
||||
} = this.props;
|
||||
|
||||
// banner模式默认有 Icon
|
||||
showIcon = showIcon || banner;
|
||||
// banner模式默认为警告
|
||||
type = banner ? 'warning' : type;
|
||||
|
||||
let iconType = '';
|
||||
switch (type) {
|
||||
case 'success':
|
||||
@@ -98,7 +71,6 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
[`${prefixCls}-close`]: !this.state.closing,
|
||||
[`${prefixCls}-with-description`]: !!description,
|
||||
[`${prefixCls}-no-icon`]: !showIcon,
|
||||
[`${prefixCls}-banner`]: !!banner,
|
||||
});
|
||||
|
||||
// closeable when closeText is assigned
|
||||
@@ -109,11 +81,10 @@ export default class Alert extends React.Component<AlertProps, any> {
|
||||
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={`${prefixCls}-icon`} type={iconType} /> : null}
|
||||
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
|
||||
<span className={`${prefixCls}-message`}>{message}</span>
|
||||
<span className={`${prefixCls}-description`}>{description}</span>
|
||||
{closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
|
||||
25
components/alert/index.md
Normal file
25
components/alert/index.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 警告提示
|
||||
type: Presentation
|
||||
english: Alert
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | 必选参数，指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` |
|
||||
| closable | 可选参数，默认不显示关闭按钮 | Boolean | 无 |
|
||||
| closeText | 可选参数，自定义关闭按钮 | React.Node | 无 |
|
||||
| message | 必选参数，警告提示内容 | React.Node | 无 |
|
||||
| description | 可选参数，警告提示的辅助性文字介绍 | React.Node | 无 |
|
||||
| onClose | 可选参数，关闭时触发的回调函数 | Function | 无 |
|
||||
| showIcon | 可选参数，是否显示辅助图标 | Boolean | false |
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 警告提示
|
||||
type: Views
|
||||
title: Alert
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` |
|
||||
| closable | 默认不显示关闭按钮 | Boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | React.Node | 无 |
|
||||
| message | 警告提示内容 | React.Node | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | React.Node | 无 |
|
||||
| onClose | 关闭时触发的回调函数 | Function | 无 |
|
||||
| showIcon | 是否显示辅助图标 | Boolean | false |
|
||||
| banner | 是否用作顶部公告 | Boolean | false |
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@alert-prefix-cls: ~"@{ant-prefix}-alert";
|
||||
@alert-prefix-cls: ant-alert;
|
||||
|
||||
.@{alert-prefix-cls} {
|
||||
position: relative;
|
||||
padding: 8px 48px 8px 38px;
|
||||
padding: 8px 8px 8px 16px;
|
||||
border-radius: @border-radius-base;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&&-no-icon {
|
||||
padding: 8px 48px 8px 16px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
top: 9px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
line-height: 21px;
|
||||
display: none;
|
||||
}
|
||||
@@ -61,20 +58,21 @@
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.@{iconfont-css-prefix}-cross {
|
||||
.anticon-cross {
|
||||
color: @legend-color;
|
||||
transition: color .3s ease;
|
||||
&:hover {
|
||||
color: #404040;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -85,7 +83,7 @@
|
||||
}
|
||||
|
||||
&-with-description {
|
||||
padding: 16px 16px 16px 60px;
|
||||
padding: 16px 16px 16px 69px;
|
||||
position: relative;
|
||||
border-radius: @border-radius-base;
|
||||
margin-bottom: 10px;
|
||||
@@ -99,73 +97,38 @@
|
||||
|
||||
&-with-description &-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 20px;
|
||||
font-size: 24px;
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
margin-top: -15px;
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
&-with-description &-close-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
top: 17px;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-with-description &-message {
|
||||
font-size: 14px;
|
||||
color: @heading-color;
|
||||
color: @text-color;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&-with-description &-description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&&-close {
|
||||
height: 0 !important;
|
||||
&-close {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: all .3s @ease-in-out-circ;
|
||||
transition: all .3s @ease-in-out;
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
animation: antAlertSlideUpOut .3s @ease-in-out-circ;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-banner {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antAlertSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antAlertSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
animation-timing-function: @ease-in-out !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本使用
|
||||
en-US: Basic Usage
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用。通过 dataSource 设置自动完成的数据源
|
||||
|
||||
## en-US
|
||||
|
||||
Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
|
||||
````jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const Complete = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
dataSource: [],
|
||||
};
|
||||
},
|
||||
handleChange(value) {
|
||||
this.setState({
|
||||
dataSource: !value ? [] : [
|
||||
value,
|
||||
value + value,
|
||||
value + value + value,
|
||||
],
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
return (
|
||||
<AutoComplete
|
||||
dataSource={dataSource}
|
||||
style={{ width: 200 }}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 自定义选项
|
||||
en-US: Customized
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `dataSource`。
|
||||
|
||||
## en-US
|
||||
|
||||
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
|
||||
|
||||
````jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
|
||||
const Complete = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
result: [],
|
||||
};
|
||||
},
|
||||
handleChange(value) {
|
||||
let result;
|
||||
if (!value || value.indexOf('@') >= 0) {
|
||||
result = [];
|
||||
} else {
|
||||
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
|
||||
}
|
||||
this.setState({ result });
|
||||
},
|
||||
render() {
|
||||
const { result } = this.state;
|
||||
const children = result.map((email) => {
|
||||
return <Option key={email}>{email}</Option>;
|
||||
});
|
||||
return (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{children}
|
||||
</AutoComplete>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<Complete />, mountNode);
|
||||
````
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Form Controls
|
||||
cols: 1
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
Autocomplete function of input field.
|
||||
|
||||
## When To Use
|
||||
|
||||
When need to use autocomplete function.
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />
|
||||
```
|
||||
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|----------------------------------|------------|--------|
|
||||
| dataSource | Data source for autocomplete | Array | |
|
||||
| value | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | - |
|
||||
| defaultValue | Initial selected option. | string/Array<String> | - |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
|
||||
| disabled | Whether disabled select | boolean | false |
|
||||
@@ -1,83 +0,0 @@
|
||||
import React from 'react';
|
||||
import Select, { Option, OptGroup } from '../select';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export interface SelectedValue {
|
||||
key: string;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface DataSourceItemObject { value: string; text: string; };
|
||||
export type DataSourceItemType = string | DataSourceItemObject;
|
||||
|
||||
export interface AutoCompleteProps {
|
||||
size?: 'large' | 'small' | 'default';
|
||||
className?: string;
|
||||
notFoundContent?: Element;
|
||||
dataSource: DataSourceItemType[];
|
||||
prefixCls?: string;
|
||||
transitionName?: string;
|
||||
optionLabelProp?: string;
|
||||
choiceTransitionName?: string;
|
||||
showSearch?: boolean;
|
||||
defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
||||
value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
||||
allowClear?: boolean;
|
||||
onChange?: (value) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
|
||||
static Option = Option;
|
||||
static OptGroup = OptGroup;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-select',
|
||||
transitionName: 'slide-up',
|
||||
optionLabelProp: 'children',
|
||||
choiceTransitionName: 'zoom',
|
||||
showSearch: false,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
antLocale: React.PropTypes.object,
|
||||
};
|
||||
|
||||
render() {
|
||||
let {
|
||||
size, className, notFoundContent, prefixCls, optionLabelProp, dataSource, children,
|
||||
} = this.props;
|
||||
|
||||
const cls = classNames({
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[className]: !!className,
|
||||
[`${prefixCls}-show-search`]: true,
|
||||
});
|
||||
|
||||
const options = children || (dataSource ? dataSource.map((item, index) => {
|
||||
switch (typeof item) {
|
||||
case 'string':
|
||||
return <Option key={item}>{item}</Option>;
|
||||
case 'object':
|
||||
return (
|
||||
<Option key={(item as DataSourceItemObject).value}>
|
||||
{(item as DataSourceItemObject).text}
|
||||
</Option>
|
||||
);
|
||||
default:
|
||||
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
|
||||
}
|
||||
}) : []);
|
||||
|
||||
return (
|
||||
<Select {...this.props}
|
||||
className={cls}
|
||||
optionLabelProp={optionLabelProp}
|
||||
combobox
|
||||
notFoundContent={notFoundContent} >
|
||||
{options}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 自动完成
|
||||
type: Form Controls
|
||||
cols: 1
|
||||
title: AutoComplete
|
||||
---
|
||||
|
||||
输入框自动完成功能。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要自动完成时。
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />
|
||||
```
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------------|----------------------------------|------------|---------|
|
||||
| dataSource | 自动完成的数据源 | Array | |
|
||||
| value | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false |
|
||||
| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | 无 |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../select/style/index";
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The most basic usage.
|
||||
|
||||
````jsx
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<BackTop />
|
||||
Scroll down to see the bottom right gray button.
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 自定义样式
|
||||
en-US: Custom style
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
|
||||
|
||||
## en-US
|
||||
|
||||
You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
|
||||
|
||||
|
||||
````jsx
|
||||
import { BackTop } from 'antd';
|
||||
|
||||
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>
|
||||
Scroll down to see the bottom right blue button.
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
title: BackTop
|
||||
---
|
||||
|
||||
`BackTop` makes it easy to go back to the top of the page.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When the page content is very long.
|
||||
- When you need to go back to the top very frequently in order to view the contents.
|
||||
|
||||
## API
|
||||
|
||||
> The distance to the bottom is set to `50px` by default, which is overridable.
|
||||
|
||||
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
|
||||
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | Number | 400
|
||||
onClick | a callback function, which can be executed when you click the button | Function | -
|
||||
|
||||
@@ -1,155 +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 'omit.js';
|
||||
|
||||
const reqAnimFrame = (() => {
|
||||
if (window.requestAnimationFrame) {
|
||||
return window.requestAnimationFrame;
|
||||
}
|
||||
const a = ['moz', 'ms', 'webkit'];
|
||||
const raf = a.filter(key => `${key}RequestAnimationFrame` in window);
|
||||
return raf[0] ? window[`${raf[0]}RequestAnimationFrame`] :
|
||||
((callback) => window.setTimeout(callback, 1000 / 60));
|
||||
})();
|
||||
|
||||
const currentScrollTop = () => {
|
||||
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
|
||||
};
|
||||
|
||||
const easeInOutCubic = (t, b, c, d) => {
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return cc / 2 * t * t * t + b;
|
||||
} else {
|
||||
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
||||
}
|
||||
};
|
||||
|
||||
function getScroll(target, top) {
|
||||
if (typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
||||
const isWindow = target === window;
|
||||
|
||||
let ret = isWindow ? target[prop] : target[method];
|
||||
// ie6,7,8 standard mode
|
||||
if (isWindow && typeof ret !== 'number') {
|
||||
ret = window.document.documentElement[method];
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
export interface BackTopProps {
|
||||
visibilityHeight?: number;
|
||||
onClick?: (event) => void;
|
||||
target?: () => HTMLElement | Window;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
static defaultProps = {
|
||||
onClick() {},
|
||||
visibilityHeight: 400,
|
||||
target() {
|
||||
return window;
|
||||
},
|
||||
prefixCls: 'ant-back-top',
|
||||
};
|
||||
|
||||
scrollEvent: any;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const scrollTop = getScroll(props.target(), true);
|
||||
this.state = {
|
||||
visible: scrollTop > props.visibilityHeight,
|
||||
};
|
||||
}
|
||||
|
||||
scrollToTop = (e) => {
|
||||
const scrollTop = currentScrollTop();
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
const time = timestamp - startTime;
|
||||
this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450));
|
||||
if (time < 450) {
|
||||
reqAnimFrame(frameFunc);
|
||||
}
|
||||
};
|
||||
reqAnimFrame(frameFunc);
|
||||
this.props.onClick(e);
|
||||
}
|
||||
|
||||
setScrollTop(value) {
|
||||
const targetNode = this.props.target();
|
||||
if (targetNode === window) {
|
||||
document.body.scrollTop = value;
|
||||
document.documentElement.scrollTop = value;
|
||||
} else {
|
||||
(targetNode as HTMLElement).scrollTop = value;
|
||||
}
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
const { visibilityHeight, target } = this.props;
|
||||
const scrollTop = getScroll(target(), true);
|
||||
this.setState({
|
||||
visible: scrollTop > visibilityHeight,
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.scrollEvent = addEventListener(this.props.target(), 'scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.scrollEvent) {
|
||||
this.scrollEvent.remove();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls, className, children } = this.props;
|
||||
const classString = classNames({
|
||||
[prefixCls]: true,
|
||||
[className]: !!className,
|
||||
});
|
||||
|
||||
const defaultElement = (
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<Icon className={`${prefixCls}-icon`} type="to-top" />
|
||||
</div>
|
||||
);
|
||||
|
||||
// fix https://fb.me/react-unknown-prop
|
||||
const divProps = omit(this.props, [
|
||||
'prefixCls',
|
||||
'className',
|
||||
'children',
|
||||
'visibilityHeight',
|
||||
]);
|
||||
|
||||
return (
|
||||
<Animate component="" transitionName="fade">
|
||||
{
|
||||
this.state.visible ?
|
||||
<div {...divProps} className={classString} onClick={this.scrollToTop}>
|
||||
{children || defaultElement}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</Animate>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
subtitle: 回到顶部
|
||||
title: BackTop
|
||||
---
|
||||
|
||||
返回页面顶部的操作按钮。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当页面内容区域比较长时；
|
||||
- 当用户需要频繁返回顶部查看相关内容时。
|
||||
|
||||
## API
|
||||
|
||||
> 有默认样式，距离底部 `50px`，可覆盖。
|
||||
|
||||
> 自定义样式宽高不大于 40px * 40px。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 |
|
||||
| onClick | 点击按钮的回调函数 | Function | - |
|
||||
@@ -1,33 +0,0 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@backtop-prefix-cls: ~"@{ant-prefix}-back-top";
|
||||
|
||||
.@{backtop-prefix-cls} {
|
||||
z-index: @zindex-back-top;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 50px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
&-content {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(64, 64, 64, 0.4);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
transition: all .3s @ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(64, 64, 64, 0.6);
|
||||
transition: all .3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,6 @@
|
||||
import React from 'react';
|
||||
import { createElement, Component } from 'react';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import React, { createElement } from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
|
||||
import assign from 'object-assign';
|
||||
import omit from 'omit.js';
|
||||
|
||||
function getNumberArray(num) {
|
||||
return num ?
|
||||
@@ -13,15 +10,14 @@ function getNumberArray(num) {
|
||||
.map(i => Number(i)) : [];
|
||||
}
|
||||
|
||||
export default class ScrollNumber extends Component<any, any> {
|
||||
export default class ScrollNumber extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-scroll-number',
|
||||
count: null,
|
||||
component: 'sup',
|
||||
onAnimated() {
|
||||
},
|
||||
onAnimated() {},
|
||||
height: 18,
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
count: React.PropTypes.oneOfType([
|
||||
@@ -31,9 +27,7 @@ export default class ScrollNumber extends Component<any, any> {
|
||||
component: React.PropTypes.string,
|
||||
onAnimated: React.PropTypes.func,
|
||||
height: React.PropTypes.number,
|
||||
};
|
||||
|
||||
lastCount: any;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -110,8 +104,8 @@ export default class ScrollNumber extends Component<any, any> {
|
||||
className: `${this.props.prefixCls}-only`,
|
||||
style: {
|
||||
transition: removeTransition && 'none',
|
||||
WebkitTransform: `translateY(${-position * height}px)`,
|
||||
transform: `translateY(${-position * height}px)`,
|
||||
WebkitTransform: `translate3d(0, ${-position * height}px, 0)`,
|
||||
transform: `translate3d(0, ${-position * height}px, 0)`,
|
||||
height,
|
||||
},
|
||||
key: i,
|
||||
@@ -128,15 +122,10 @@ export default class ScrollNumber extends Component<any, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
// fix https://fb.me/react-unknown-prop
|
||||
const props = assign({}, omit(this.props, [
|
||||
'count',
|
||||
'onAnimated',
|
||||
'component',
|
||||
'prefixCls',
|
||||
]), {
|
||||
const props = {
|
||||
...this.props,
|
||||
className: `${this.props.prefixCls} ${this.props.className}`,
|
||||
});
|
||||
};
|
||||
return createElement(
|
||||
this.props.component,
|
||||
props,
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 大数字
|
||||
en-US: Overflowed count
|
||||
title: 大数字
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
超过 99 的会显示为 `99+`。
|
||||
|
||||
## en-US
|
||||
|
||||
`99+` is displayed when count is larger than `99`.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Badge count={99}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<Badge count={200}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
简单的徽章展示。
|
||||
|
||||
## en-US
|
||||
|
||||
Simplest Usage.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 动态
|
||||
en-US: Dynamic
|
||||
title: 动态
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
展示动态变化的效果。
|
||||
|
||||
## en-US
|
||||
|
||||
The count will be animated as it changes.
|
||||
|
||||
````jsx
|
||||
import { Badge, Button, Icon } from 'antd';
|
||||
const ButtonGroup = Button.Group;
|
||||
@@ -44,10 +36,10 @@ const Test = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<Badge count={this.state.count}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<Badge dot={this.state.show}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<ButtonGroup>
|
||||
@@ -59,7 +51,7 @@ const Test = React.createClass({
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Button type="ghost" onClick={this.onClick} style={{ marginLeft: 8 }}>
|
||||
Switch state
|
||||
切换红点显隐
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 讨嫌的小红点
|
||||
en-US: Red badge
|
||||
title: 讨嫌的小红点
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
没有具体的数字。
|
||||
|
||||
## en-US
|
||||
|
||||
This will simply display a red badge, without a specific count.
|
||||
|
||||
````jsx
|
||||
import { Badge, Icon } from 'antd';
|
||||
|
||||
@@ -21,7 +13,7 @@ ReactDOM.render(<div>
|
||||
<Icon type="notification" />
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#">Link something</a>
|
||||
<a href="#">一个链接</a>
|
||||
</Badge>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,25 +1,17 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 可点击
|
||||
en-US: Clickable
|
||||
title: 可点击
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 a 标签进行包裹即可。
|
||||
|
||||
## en-US
|
||||
|
||||
The badge can be wrapped with `a` tag to make it linkable.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<a href="#">
|
||||
<Badge count={5}>
|
||||
<span className="head-example" />
|
||||
<span className="head-example"></span>
|
||||
</Badge>
|
||||
</a>
|
||||
, mountNode);
|
||||
|
||||
@@ -1,20 +1,12 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 独立使用
|
||||
en-US: Standalone
|
||||
title: 独立使用
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不包裹任何元素即是独立使用，可自定样式展现。
|
||||
|
||||
> 在右上角的 badge 则限定为红色。
|
||||
|
||||
## en-US
|
||||
|
||||
Used in standalone when children is empty.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 封顶数字
|
||||
en-US: Customized overflow count
|
||||
title: 封顶数字
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
超过 `overflowCount` 的会显示为 `${overflowCount}+`。
|
||||
|
||||
## en-US
|
||||
|
||||
`${overflowCount}+` is displayed when count is larger than `overflowCount`.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Badge count={99} overflowCount={10}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
<Badge count={1000} overflowCount={999}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 状态点
|
||||
en-US: Status
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用于表示状态的小圆点。
|
||||
|
||||
## en-US
|
||||
|
||||
Standalone badge with status.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<span>Status: </span>
|
||||
<Badge status="success" />
|
||||
<Badge status="error" />
|
||||
<Badge status="default" />
|
||||
<Badge status="processing" />
|
||||
<Badge status="warning" />
|
||||
<br />
|
||||
<Badge status="success" text="Success" /><br />
|
||||
<Badge status="error" text="Error" /><br />
|
||||
<Badge status="default" text="Default" /><br />
|
||||
<Badge status="processing" text="Processing" /><br />
|
||||
<Badge status="warning" text="Warning" />
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
category: Components
|
||||
type: Views
|
||||
title: Badge
|
||||
---
|
||||
|
||||
Small numerical value or status descriptors for UI elements.
|
||||
|
||||
## When To Use
|
||||
|
||||
Badge normally appears in proximity to notification or head picture with eye-catching appeal, typically displaying unread messages count.
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
```
|
||||
|
||||
|
||||
```jsx
|
||||
<Badge count={5} />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|-------------------------|------------|---------|
|
||||
| count | Number to show in badge | Number | |
|
||||
| overflowCount | Max count to show | Number | 99 |
|
||||
| dot | whether to show red dot without number | Boolean | false |
|
||||
| status | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
|
||||
| text | If `status` is set, `text` is to set the text of status dot | String | '' |
|
||||
59
components/badge/index.jsx
Normal file
59
components/badge/index.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import ScrollNumber from './ScrollNumber';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default class Badge extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-badge',
|
||||
count: null,
|
||||
dot: false,
|
||||
overflowCount: 99,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
count: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
]),
|
||||
dot: React.PropTypes.bool,
|
||||
overflowCount: React.PropTypes.number,
|
||||
}
|
||||
|
||||
render() {
|
||||
let { count, prefixCls, overflowCount, className, style, children } = this.props;
|
||||
const dot = this.props.dot;
|
||||
|
||||
count = count > overflowCount ? `${overflowCount}+` : count;
|
||||
|
||||
// dot mode don't need count
|
||||
if (dot) {
|
||||
count = '';
|
||||
}
|
||||
|
||||
// null undefined "" "0" 0
|
||||
const hidden = (!count || count === '0') && !dot;
|
||||
const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
|
||||
const badgeCls = classNames({
|
||||
[className]: !!className,
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children,
|
||||
});
|
||||
|
||||
return (
|
||||
<span className={badgeCls} title={count} {...this.props} style={null}>
|
||||
{children}
|
||||
<Animate component=""
|
||||
showProp="data-show"
|
||||
transitionName={`${prefixCls}-zoom`}
|
||||
transitionAppear>
|
||||
{
|
||||
hidden ? null :
|
||||
<ScrollNumber data-show={!hidden} className={scrollNumberCls}
|
||||
count={count} style={style} />
|
||||
}
|
||||
</Animate>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 徽标数
|
||||
type: Views
|
||||
title: Badge
|
||||
chinese: 徽标数
|
||||
type: Presentation
|
||||
english: Badge
|
||||
---
|
||||
|
||||
图标右上角的圆形徽标数字。
|
||||
@@ -15,7 +15,7 @@ title: Badge
|
||||
|
||||
```jsx
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
<a href="#" className="head-example"></a>
|
||||
</Badge>
|
||||
```
|
||||
|
||||
@@ -28,6 +28,4 @@ title: Badge
|
||||
|----------------|----------------------------------|------------|---------|--------|
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number | | |
|
||||
| overflowCount | 展示封顶的数字值 | Number | | 99 |
|
||||
| dot | 不展示数字，只有一个小红点 | Boolean | | false |
|
||||
| status | 设置 Badge 为状态点 | Enum | 'success'、'processing'、'default'、'error'、'warning' | '' |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | String | | '' |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | | false |
|
||||
@@ -1,96 +0,0 @@
|
||||
import React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import ScrollNumber from './ScrollNumber';
|
||||
import classNames from 'classnames';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
export interface BadgeProps {
|
||||
/** Number to show in badge */
|
||||
count: number | string;
|
||||
/** Max count to show */
|
||||
overflowCount?: number;
|
||||
/** whether to show red dot without number */
|
||||
dot?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export default class Badge extends React.Component<BadgeProps, any> {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-badge',
|
||||
count: null,
|
||||
dot: false,
|
||||
overflowCount: 99,
|
||||
// status: 'default',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
count: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
]),
|
||||
dot: React.PropTypes.bool,
|
||||
overflowCount: React.PropTypes.number,
|
||||
};
|
||||
|
||||
render() {
|
||||
let [{
|
||||
count, prefixCls, overflowCount, className, style, children, dot, status, text,
|
||||
}, restProps] = splitObject(
|
||||
this.props,
|
||||
['count', 'prefixCls', 'overflowCount', 'className', 'style', 'children', 'dot', 'status', 'text']
|
||||
);
|
||||
const isDot = dot || status;
|
||||
|
||||
count = count > overflowCount ? `${overflowCount}+` : count;
|
||||
|
||||
// dot mode don't need count
|
||||
if (isDot) {
|
||||
count = '';
|
||||
}
|
||||
|
||||
// null undefined "" "0" 0
|
||||
const hidden = (!count || count === '0') && !isDot;
|
||||
const scrollNumberCls = classNames({
|
||||
[`${prefixCls}-dot`]: isDot,
|
||||
[`${prefixCls}-count`]: !isDot,
|
||||
[`${prefixCls}-status`]: status,
|
||||
[`${prefixCls}-status-${status}`]: status,
|
||||
[`${prefixCls}-status-with-text`]: text,
|
||||
});
|
||||
const badgeCls = classNames({
|
||||
[className]: !!className,
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-not-a-wrapper`]: !children,
|
||||
});
|
||||
|
||||
return (
|
||||
<span className={badgeCls} title={count} style={null} {...restProps}>
|
||||
{children}
|
||||
<Animate
|
||||
component=""
|
||||
showProp="data-show"
|
||||
transitionName={`${prefixCls}-zoom`}
|
||||
transitionAppear
|
||||
>
|
||||
{
|
||||
hidden ? null :
|
||||
<ScrollNumber
|
||||
data-show={!hidden}
|
||||
className={scrollNumberCls}
|
||||
count={count}
|
||||
style={style}
|
||||
/>
|
||||
}
|
||||
</Animate>
|
||||
{
|
||||
hidden || !text ? null :
|
||||
<span className={`${prefixCls}-status-text`}>{text}</span>
|
||||
}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@badge-prefix-cls: ~"@{ant-prefix}-badge";
|
||||
@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
|
||||
@badge-prefix-cls: ant-badge;
|
||||
@number-prefix-cls: ant-scroll-number;
|
||||
|
||||
.@{badge-prefix-cls} {
|
||||
position: relative;
|
||||
@@ -47,38 +47,6 @@
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
}
|
||||
|
||||
&-status {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
&-success {
|
||||
background-color: @success-color;
|
||||
}
|
||||
&-processing {
|
||||
background-color: @primary-color;
|
||||
animation: antStatusProcessing 1.2s infinite ease-in-out;
|
||||
}
|
||||
&-default {
|
||||
background-color: @normal-color;
|
||||
}
|
||||
&-error {
|
||||
background-color: @error-color;
|
||||
}
|
||||
&-warning {
|
||||
background-color: @warning-color;
|
||||
}
|
||||
|
||||
&-with-text {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
margin-left: 8px; // 8 - (6 / 2) === 5
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-appear,
|
||||
&-zoom-enter {
|
||||
animation: antZoomBadgeIn .3s @ease-out-back;
|
||||
@@ -98,16 +66,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antStatusProcessing {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a & {
|
||||
&-count:hover {
|
||||
background: tint(@error-color, 20%);
|
||||
|
||||
68
components/breadcrumb/Breadcrumb.jsx
Normal file
68
components/breadcrumb/Breadcrumb.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import React, { cloneElement } from 'react';
|
||||
import BreadcrumbItem from './BreadcrumbItem';
|
||||
|
||||
export default class Breadcrumb extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
linkRender: (href, name) => <a href={`#${href}`}>{name}</a>,
|
||||
nameRender: (name) => <span>{name}</span>,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
separator: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.element,
|
||||
]),
|
||||
routes: React.PropTypes.array,
|
||||
params: React.PropTypes.object,
|
||||
linkRender: React.PropTypes.func,
|
||||
nameRender: React.PropTypes.func,
|
||||
}
|
||||
|
||||
render() {
|
||||
let crumbs;
|
||||
const { separator, prefixCls, routes, params, children, linkRender, nameRender } = this.props;
|
||||
if (routes && routes.length > 0) {
|
||||
const paths = [];
|
||||
crumbs = routes.map((route, i) => {
|
||||
route.path = route.path || '';
|
||||
let path = route.path.replace(/^\//, '');
|
||||
Object.keys(params).forEach(key => {
|
||||
path = path.replace(`:${key}`, params[key]);
|
||||
});
|
||||
if (path) {
|
||||
paths.push(path);
|
||||
}
|
||||
|
||||
if (!route.breadcrumbName) {
|
||||
return null;
|
||||
}
|
||||
const name = route.breadcrumbName.replace(/:(.*)/g, (replacement, key) => {
|
||||
return params[key] || replacement;
|
||||
});
|
||||
|
||||
let link;
|
||||
if (i === routes.length - 1) {
|
||||
link = nameRender(name);
|
||||
} else {
|
||||
link = linkRender(`/${paths.join('/')}`, name);
|
||||
}
|
||||
return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
|
||||
});
|
||||
} else {
|
||||
crumbs = React.Children.map(children, (element, index) => {
|
||||
return cloneElement(element, {
|
||||
separator,
|
||||
key: index,
|
||||
});
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
{crumbs}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import React from 'react';
|
||||
import { cloneElement } from 'react';
|
||||
import warning from 'warning';
|
||||
import BreadcrumbItem from './BreadcrumbItem';
|
||||
|
||||
export interface BreadcrumbProps {
|
||||
prefixCls?: string;
|
||||
routes?: Array<any>;
|
||||
params?: Object;
|
||||
separator?: string | React.ReactNode;
|
||||
itemRender?: (route, params, routes, paths) => React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function getBreadcrumbName(route, params, routes) {
|
||||
if (!route.breadcrumbName) {
|
||||
return null;
|
||||
}
|
||||
const paramsKeys = Object.keys(params).join('|');
|
||||
const name = route.breadcrumbName.replace(
|
||||
new RegExp(`:(${paramsKeys})`, 'g'),
|
||||
(replacement, key) => params[key] || replacement
|
||||
);
|
||||
return name;
|
||||
}
|
||||
|
||||
export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
|
||||
static Item: any;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
itemRender: (route, params, routes, paths) => {
|
||||
const isLastItem = routes.indexOf(route) === routes.length - 1;
|
||||
const name = getBreadcrumbName(route, params, routes);
|
||||
return isLastItem
|
||||
? <span>{name}</span>
|
||||
: <a href={`#/${paths.join('/')}`}>{name}</a>;
|
||||
},
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
separator: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.element,
|
||||
]),
|
||||
routes: React.PropTypes.array,
|
||||
params: React.PropTypes.object,
|
||||
linkRender: React.PropTypes.func,
|
||||
nameRender: React.PropTypes.func,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super();
|
||||
|
||||
warning(
|
||||
!('linkRender' in props || 'nameRender' in props),
|
||||
'`linkRender` and `nameRender` are removed, please use `itemRender` instead.'
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let crumbs;
|
||||
const { separator, prefixCls, routes, params, children, itemRender } = this.props;
|
||||
if (routes && routes.length > 0) {
|
||||
const paths = [];
|
||||
crumbs = routes.map((route, i) => {
|
||||
route.path = route.path || '';
|
||||
let path = route.path.replace(/^\//, '');
|
||||
Object.keys(params).forEach(key => {
|
||||
path = path.replace(`:${key}`, params[key]);
|
||||
});
|
||||
if (path) {
|
||||
paths.push(path);
|
||||
}
|
||||
if (route.breadcrumbName) {
|
||||
return (
|
||||
<BreadcrumbItem separator={separator} key={route.breadcrumbName}>
|
||||
{itemRender(route, params, routes, paths)}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
} else {
|
||||
crumbs = React.Children.map(children, (element: any, index) => {
|
||||
return cloneElement(element, {
|
||||
separator,
|
||||
key: index,
|
||||
});
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
{crumbs}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,10 @@
|
||||
import React from 'react';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
export interface BreadcrumbItemProps {
|
||||
separator?: React.ReactNode;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
|
||||
export default class BreadcrumbItem extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
@@ -19,12 +13,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
|
||||
React.PropTypes.element,
|
||||
]),
|
||||
href: React.PropTypes.string,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const [{ prefixCls, separator, children }, restProps] = splitObject(
|
||||
this.props, ['prefixCls', 'separator', 'children']
|
||||
);
|
||||
const { prefixCls, separator, children, ...restProps } = this.props;
|
||||
let link;
|
||||
if ('href' in this.props) {
|
||||
link = <a className={`${prefixCls}-link`} {...restProps}>{children}</a>;
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic Usage
|
||||
title: 基本
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest use
|
||||
|
||||
````jsx
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">应用中心</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item><a href="">应用列表</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,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>
|
||||
|
||||
@@ -1,27 +1,19 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 分隔符
|
||||
en-US: Configuring the Separator
|
||||
title: 分隔符
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `separator=">"` 可以自定义分隔符。
|
||||
|
||||
## en-US
|
||||
|
||||
The separator can be customized by setting the separator property: separator=">"
|
||||
|
||||
````jsx
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Breadcrumb separator=">">
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 带有图标的
|
||||
en-US: With an Icon
|
||||
title: 带有图标的
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
图标放在文字前面。
|
||||
|
||||
## en-US
|
||||
|
||||
The icon should be placed in front of the text.
|
||||
|
||||
````jsx
|
||||
import { Breadcrumb, Icon } from 'antd';
|
||||
|
||||
@@ -23,11 +15,12 @@ ReactDOM.render(
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item href="">
|
||||
<Icon type="user" />
|
||||
<span>Application List</span>
|
||||
应用列表
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
Application
|
||||
应用
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
|
||||
@@ -1,33 +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 | | '/' |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => React.ReactNode | | - |
|
||||
|
||||
> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 面包屑
|
||||
chinese: 面包屑
|
||||
type: Navigation
|
||||
title: Breadcrumb
|
||||
english: Breadcrumb
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
@@ -29,6 +29,5 @@ title: Breadcrumb
|
||||
| routes | router 的路由栈信息 | Array | | - |
|
||||
| params | 路由的参数 | Object | | - |
|
||||
| separator | 分隔符自定义 | String or Element | | '/' |
|
||||
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => React.ReactNode | | - |
|
||||
|
||||
> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
|
||||
| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name) | | - |
|
||||
| nameRender | 自定义链接函数，和 react-router 配置使用 | Function(name) | | - |
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";
|
||||
@breadcrumb-prefix-cls: ant-breadcrumb;
|
||||
|
||||
.@{breadcrumb-prefix-cls} {
|
||||
color: #999;
|
||||
@@ -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 {
|
||||
> .@{iconfont-css-prefix} + span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.anticon + span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
27
components/button/button-group.jsx
Normal file
27
components/button/button-group.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const prefix = 'ant-btn-group-';
|
||||
|
||||
export default function ButtonGroup(props) {
|
||||
const { size, className, ...others } = props;
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
const sizeCls = ({
|
||||
large: 'lg',
|
||||
small: 'sm',
|
||||
})[size] || '';
|
||||
|
||||
const classes = classNames({
|
||||
'ant-btn-group': true,
|
||||
[prefix + sizeCls]: sizeCls,
|
||||
[className]: className,
|
||||
});
|
||||
|
||||
return <div {...others} className={classes} />;
|
||||
}
|
||||
|
||||
ButtonGroup.propTypes = {
|
||||
size: React.PropTypes.oneOf(['large', 'small']),
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
export type ButtonSize = 'small' | 'large'
|
||||
|
||||
export interface ButtonGroupProps {
|
||||
size?: ButtonSize;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export default function ButtonGroup(props: ButtonGroupProps) {
|
||||
const [{ prefixCls = 'ant-btn-group', size, className }, others] =
|
||||
splitObject(props, ['prefixCls', 'size', 'className']);
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
const sizeCls = ({
|
||||
large: 'lg',
|
||||
small: 'sm',
|
||||
})[size] || '';
|
||||
|
||||
const classes = classNames({
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
||||
[className]: className,
|
||||
});
|
||||
|
||||
return <div {...others} className={classes} />;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import Icon from '../icon';
|
||||
import splitObject from '../_util/splitObject';
|
||||
|
||||
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
|
||||
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
|
||||
function isString(str) {
|
||||
@@ -24,33 +24,12 @@ function insertSpace(child) {
|
||||
return child;
|
||||
}
|
||||
|
||||
export type ButtonType = 'primary' | 'ghost' | 'dashed'
|
||||
export type ButtonShape = 'circle' | 'circle-outline'
|
||||
export type ButtonSize = 'small' | 'large'
|
||||
|
||||
export interface ButtonProps {
|
||||
type?: ButtonType;
|
||||
htmlType?: string;
|
||||
icon?: string;
|
||||
shape?: ButtonShape;
|
||||
size?: ButtonSize;
|
||||
onClick?: React.FormEventHandler;
|
||||
onMouseUp?: React.FormEventHandler;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default class Button extends React.Component<ButtonProps, any> {
|
||||
static Group: any;
|
||||
|
||||
export default class Button extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-btn',
|
||||
onClick() {},
|
||||
loading: false,
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string,
|
||||
@@ -61,10 +40,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
loading: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
};
|
||||
|
||||
timeout: any;
|
||||
clickedTimeout: any;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.clickedTimeout) {
|
||||
@@ -79,7 +55,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, '');
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
handleClick = (...args) => {
|
||||
// Add click effect
|
||||
const buttonNode = findDOMNode(this);
|
||||
this.clearButton(buttonNode);
|
||||
@@ -87,12 +63,12 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
|
||||
|
||||
this.props.onClick(e);
|
||||
this.props.onClick(...args);
|
||||
}
|
||||
|
||||
// Handle auto focus when click button in Chrome
|
||||
handleMouseUp = (e) => {
|
||||
(findDOMNode(this) as HTMLElement).blur();
|
||||
findDOMNode(this).blur();
|
||||
if (this.props.onMouseUp) {
|
||||
this.props.onMouseUp(e);
|
||||
}
|
||||
@@ -100,8 +76,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const [{ type, shape, size, className, htmlType, children, icon, loading, prefixCls }, others] = splitObject(props,
|
||||
['type', 'shape', 'size', 'className', 'htmlType', 'children', 'icon', 'loading', 'prefixCls']);
|
||||
const { type, shape, size, className, htmlType, children, icon, loading, prefixCls, ...others } = props;
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
@@ -129,8 +104,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
type={htmlType || 'button'}
|
||||
className={classes}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
onClick={this.handleClick}>
|
||||
{iconType ? <Icon type={iconType} /> : null}{kids}
|
||||
</button>
|
||||
);
|
||||
@@ -23,7 +23,7 @@ import { Button } from 'antd';
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Button type="primary" shape="circle" icon="search" />
|
||||
<Button type="primary" icon="search">Search</Button>
|
||||
<Button type="primary" icon="search">搜索</Button>
|
||||
<br />
|
||||
<Button type="ghost" shape="circle-outline" icon="search" />
|
||||
<Button type="ghost" icon="search">Search</Button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@import "../../style/mixins/index";
|
||||
@import "./mixin";
|
||||
|
||||
@btn-prefix-cls: ~"@{ant-prefix}-btn";
|
||||
@btn-prefix-cls: ant-btn;
|
||||
|
||||
// Button styles
|
||||
// -----------------------------
|
||||
@@ -69,7 +69,7 @@
|
||||
padding-left: 29px;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
.@{iconfont-css-prefix} {
|
||||
.anticon {
|
||||
margin-left: -14px;
|
||||
transition: all .3s @ease-in-out;
|
||||
}
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
&-sm&-loading {
|
||||
padding-left: 24px;
|
||||
.@{iconfont-css-prefix} {
|
||||
.anticon {
|
||||
margin-left: -17px;
|
||||
}
|
||||
}
|
||||
@@ -110,7 +110,7 @@
|
||||
border-radius: inherit;
|
||||
border: 0 solid @primary-color;
|
||||
opacity: 0.4;
|
||||
animation: buttonEffect 0.36s ease-out forwards;
|
||||
animation: buttonEffect 0.32s ease forwards;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -118,10 +118,10 @@
|
||||
@keyframes buttonEffect {
|
||||
to {
|
||||
opacity: 0;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
border-width: 6px;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,11 +68,11 @@
|
||||
|
||||
// size
|
||||
&-lg > .@{btnClassName} {
|
||||
.button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
|
||||
.button-size(@btn-padding-lg; @btn-font-size-lg; @border-radius-base);
|
||||
}
|
||||
|
||||
&-sm > .@{btnClassName} {
|
||||
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
|
||||
.button-size(@btn-padding-sm; @font-size-base; @border-radius-sm);
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
@@ -94,10 +94,10 @@
|
||||
// outline: none;
|
||||
white-space: nowrap;
|
||||
line-height: @line-height-base;
|
||||
.button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
|
||||
.button-size(@btn-padding-base; @font-size-base; @border-radius-base);
|
||||
user-select: none;
|
||||
transition: all .3s @ease-in-out;
|
||||
position: relative;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
line-height: 1;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import { PREFIX_CLS } from './Constants';
|
||||
import Select from '../select';
|
||||
import { Group, Button } from '../radio';
|
||||
@@ -7,26 +6,14 @@ const Option = Select.Option;
|
||||
|
||||
function noop() {}
|
||||
|
||||
export interface HeaderProps {
|
||||
prefixCls?: string;
|
||||
locale?: any;
|
||||
fullscreen?: boolean;
|
||||
yearSelectOffset?: number;
|
||||
yearSelectTotal?: number;
|
||||
type?: string;
|
||||
onValueChange?: (value) => void;
|
||||
onTypeChange?: (type: string) => void;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export default class Header extends React.Component<HeaderProps, any> {
|
||||
export default class Header extends React.Component {
|
||||
static defaultProps = {
|
||||
prefixCls: `${PREFIX_CLS}-header`,
|
||||
yearSelectOffset: 10,
|
||||
yearSelectTotal: 20,
|
||||
onValueChange: noop,
|
||||
onTypeChange: noop,
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
value: PropTypes.object,
|
||||
@@ -38,8 +25,7 @@ export default class Header extends React.Component<HeaderProps, any> {
|
||||
prefixCls: PropTypes.string,
|
||||
selectPrefixCls: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
fullscreen: PropTypes.bool,
|
||||
};
|
||||
}
|
||||
|
||||
getYearSelectElement(year) {
|
||||
const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props;
|
||||
@@ -53,30 +39,21 @@ export default class Header extends React.Component<HeaderProps, any> {
|
||||
}
|
||||
return (
|
||||
<Select
|
||||
style={{ width: 75 }}
|
||||
size={fullscreen ? null : 'small'}
|
||||
dropdownMatchSelectWidth={false}
|
||||
dropdownMenuStyle={{ minWidth: 103 }}
|
||||
className={`${prefixCls}-year-select`}
|
||||
onChange={this.onYearChange}
|
||||
value={String(year)}
|
||||
>
|
||||
value={String(year)}>
|
||||
{options}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
getMonthsLocale(value) {
|
||||
const current = value.clone();
|
||||
const localeData = value.localeData();
|
||||
const months = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
current.month(i);
|
||||
months.push(localeData.monthsShort(current));
|
||||
}
|
||||
return months;
|
||||
}
|
||||
|
||||
getMonthSelectElement(month, months) {
|
||||
getMonthSelectElement(month) {
|
||||
const props = this.props;
|
||||
const months = props.locale.format.months;
|
||||
const { prefixCls, fullscreen } = props;
|
||||
const options = [];
|
||||
|
||||
@@ -86,12 +63,13 @@ export default class Header extends React.Component<HeaderProps, any> {
|
||||
|
||||
return (
|
||||
<Select
|
||||
style={{ minWidth: 70 }}
|
||||
dropdownMenuStyle={{ minWidth: 125 }}
|
||||
size={fullscreen ? null : 'small'}
|
||||
dropdownMatchSelectWidth={false}
|
||||
className={`${prefixCls}-month-select`}
|
||||
value={String(month)}
|
||||
onChange={this.onMonthChange}
|
||||
>
|
||||
onChange={this.onMonthChange}>
|
||||
{options}
|
||||
</Select>
|
||||
);
|
||||
@@ -99,13 +77,13 @@ export default class Header extends React.Component<HeaderProps, any> {
|
||||
|
||||
onYearChange = (year) => {
|
||||
const newValue = this.props.value.clone();
|
||||
newValue.year(parseInt(year, 10));
|
||||
newValue.setYear(parseInt(year, 10));
|
||||
this.props.onValueChange(newValue);
|
||||
}
|
||||
|
||||
onMonthChange = (month) => {
|
||||
const newValue = this.props.value.clone();
|
||||
newValue.month(parseInt(month, 10));
|
||||
newValue.setMonth(parseInt(month, 10));
|
||||
this.props.onValueChange(newValue);
|
||||
}
|
||||
|
||||
@@ -114,13 +92,11 @@ export default class Header extends React.Component<HeaderProps, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { type, value, prefixCls, locale, fullscreen } = this.props;
|
||||
const yearSelect = this.getYearSelectElement(value.year());
|
||||
const monthSelect = type === 'date' ?
|
||||
this.getMonthSelectElement(value.month(), this.getMonthsLocale(value)) : null;
|
||||
const size = (fullscreen ? 'default' : 'small') as any;
|
||||
const { type, value, prefixCls, locale } = this.props;
|
||||
const yearSelect = this.getYearSelectElement(value.getYear());
|
||||
const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
|
||||
const typeSwitch = (
|
||||
<Group onChange={this.onTypeChange} value={type} size={size}>
|
||||
<Group onChange={this.onTypeChange} value={type}>
|
||||
<Button value="date">{locale.month}</Button>
|
||||
<Button value="month">{locale.year}</Button>
|
||||
</Group>
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
title:
|
||||
zh-CN: 自定义渲染
|
||||
en-US: Custom Render
|
||||
---
|
||||
@@ -15,19 +15,17 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
|
||||
|
||||
````jsx
|
||||
import { Calendar } from 'antd';
|
||||
import moment from 'moment';
|
||||
|
||||
function dateCellRender(value) {
|
||||
return <div>自定义日数据 {value.date()}</div>;
|
||||
return <div>自定义日数据 {value.getDayOfMonth()}</div>;
|
||||
}
|
||||
|
||||
function monthCellRender(value) {
|
||||
return <div>自定义月数据 {value.month()}</div>;
|
||||
return <div>自定义月数据 {value.getMonth()}</div>;
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')}
|
||||
dateCellRender={dateCellRender} monthCellRender={monthCellRender}
|
||||
/>
|
||||
<Calendar defaultValue={new Date('2010-10-10')}
|
||||
dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -7,24 +7,21 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 `locale` 配置语言, 默认支持 en_US, zh_CN
|
||||
通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
|
||||
|
||||
## en-US
|
||||
## en_US
|
||||
|
||||
To set the language. en_US, zh_CN are supported by default.
|
||||
To set the properties like time zone, language and etc. en_US, zh_CN are supported by default.
|
||||
|
||||
````jsx
|
||||
import { Calendar } from 'antd';
|
||||
import enUS from 'antd/lib/calendar/locale/en_US';
|
||||
import moment from 'moment';
|
||||
// It's recommended to set moment locale globally, otherwise, you need to set it by `value` or `defaultValue`
|
||||
// moment.locale('en');
|
||||
|
||||
function onPanelChange(value, mode) {
|
||||
console.log(value, mode);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Calendar defaultValue={moment().locale('en')} onPanelChange={onPanelChange} locale={enUS} />
|
||||
<Calendar onPanelChange={onPanelChange} locale={enUS} />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -9,7 +9,7 @@ title:
|
||||
|
||||
一个复杂的应用示例。
|
||||
|
||||
## en-US
|
||||
## en_US
|
||||
|
||||
A complex application.
|
||||
|
||||
@@ -18,7 +18,7 @@ import { Calendar } from 'antd';
|
||||
|
||||
function getListData(value) {
|
||||
let listData;
|
||||
switch (value.date()) {
|
||||
switch (value.getDayOfMonth()) {
|
||||
case 8:
|
||||
listData = [
|
||||
{ type: 'warning', content: '这里是警告事项.' },
|
||||
@@ -45,7 +45,7 @@ function getListData(value) {
|
||||
}
|
||||
|
||||
function dateCellRender(value) {
|
||||
const listData = getListData(value);
|
||||
let listData = getListData(value);
|
||||
return (
|
||||
<ul className="events">
|
||||
{
|
||||
@@ -61,13 +61,13 @@ function dateCellRender(value) {
|
||||
}
|
||||
|
||||
function getMonthData(value) {
|
||||
if (value.month() === 8) {
|
||||
if (value.getMonth() === 8) {
|
||||
return 1394;
|
||||
}
|
||||
}
|
||||
|
||||
function monthCellRender(value) {
|
||||
const num = getMonthData(value);
|
||||
let num = getMonthData(value);
|
||||
return num ? <div className="notes-month">
|
||||
<section>{num}</section>
|
||||
<span>待办事项数</span>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
category: Components
|
||||
type: Views
|
||||
type: Presentation
|
||||
cols: 1
|
||||
title: Calendar
|
||||
---
|
||||
|
||||
When To Use container for displaying data in calendar form.
|
||||
When to use container for displaying data in calendar form.
|
||||
|
||||
## When To Use
|
||||
## When to use
|
||||
|
||||
When data is in the form of date, such as schedule, timetable, prices calendar, Lunar calendar. This component also supports Year/Month switch.
|
||||
|
||||
@@ -23,11 +23,11 @@ When data is in the form of date, such as schedule, timetable, prices calendar,
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| value | set date | [moment](http://momentjs.com/) | current date |
|
||||
| defaultValue | set default date | [moment](http://momentjs.com/) | default date |
|
||||
| value | set date | Date | current date |
|
||||
| defaultValue | set default date | Date | current date |
|
||||
| mode | can be set to month or year | string | month |
|
||||
| fullscreen | to set whether full-screen display | boolean | true |
|
||||
| dateCellRender | to set the way of renderer the date cell | function(date: moment): ReactNode | - |
|
||||
| monthCellRender | to set the way of renderer the month cell | function(date: moment): ReactNode | - |
|
||||
| locale | set locale | Object | [defualt](https://github.com/ant-design/ant-design/issues/424) |
|
||||
| onPanelChange| the callback when panel change | function(date: moment, mode: string) | - |
|
||||
| fullscreen | to set whether full-screen display | bool | true |
|
||||
| dateCellRender | to set the way of renderer the date cell| function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| - |
|
||||
| monthCellRender | to set the way of renderer the month cell | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/)) | - |
|
||||
| locale | set locale | object | [defualt](https://github.com/ant-design/ant-design/issues/424) |
|
||||
| onPanelChange| the callback when panel change | function(date, mode) | - |
|
||||
|
||||
@@ -1,42 +1,18 @@
|
||||
import React from 'react';
|
||||
import { PropTypes } from 'react';
|
||||
import moment from 'moment';
|
||||
import FullCalendar from 'rc-calendar/lib/FullCalendar';
|
||||
import React, { PropTypes } from 'react';
|
||||
import GregorianCalendar from 'gregorian-calendar';
|
||||
import defaultLocale from './locale/zh_CN';
|
||||
import FullCalendar from 'rc-calendar/lib/FullCalendar';
|
||||
import { PREFIX_CLS } from './Constants';
|
||||
import Header from './Header';
|
||||
import assign from 'object-assign';
|
||||
|
||||
function noop() { return null; }
|
||||
|
||||
function zerofixed(v) {
|
||||
if (v < 10) {
|
||||
return `0${v}`;
|
||||
}
|
||||
if (v < 10) return `0${v}`;
|
||||
return `${v}`;
|
||||
}
|
||||
|
||||
export interface CalendarContext {
|
||||
antLocale?: {
|
||||
Calendar?: any
|
||||
};
|
||||
}
|
||||
|
||||
export interface CalendarProps {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
value?: moment.Moment;
|
||||
defaultValue?: moment.Moment;
|
||||
mode?: 'month' | 'year';
|
||||
fullscreen?: boolean;
|
||||
dateCellRender?: (date: moment.Moment) => React.ReactNode;
|
||||
monthCellRender?: (date: moment.Moment) => React.ReactNode;
|
||||
locale?: any;
|
||||
style?: React.CSSProperties;
|
||||
onPanelChange?: (date: moment.Moment, mode: string) => void;
|
||||
}
|
||||
|
||||
export default class Calendar extends React.Component<CalendarProps, any> {
|
||||
export default class Calendar extends React.Component {
|
||||
static defaultProps = {
|
||||
monthCellRender: noop,
|
||||
dateCellRender: noop,
|
||||
@@ -45,7 +21,7 @@ export default class Calendar extends React.Component<CalendarProps, any> {
|
||||
prefixCls: PREFIX_CLS,
|
||||
onPanelChange: noop,
|
||||
mode: 'month',
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
monthCellRender: PropTypes.func,
|
||||
@@ -56,50 +32,55 @@ export default class Calendar extends React.Component<CalendarProps, any> {
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
onPanelChange: PropTypes.func,
|
||||
value: PropTypes.object,
|
||||
};
|
||||
value: PropTypes.instanceOf(Date),
|
||||
}
|
||||
|
||||
static contextTypes = {
|
||||
antLocale: PropTypes.object,
|
||||
};
|
||||
|
||||
context: CalendarContext;
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value || props.defaultValue || moment(),
|
||||
value: this.parseDateFromValue(props.value || new Date()),
|
||||
mode: props.mode,
|
||||
};
|
||||
}
|
||||
|
||||
parseDateFromValue(value) {
|
||||
const date = new GregorianCalendar(this.getLocale());
|
||||
date.setTime(+value);
|
||||
return date;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if ('value' in nextProps) {
|
||||
this.setState({
|
||||
value: nextProps.value,
|
||||
value: this.parseDateFromValue(nextProps.value),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getLocale = () => {
|
||||
const props = this.props;
|
||||
const context = this.context;
|
||||
let locale = defaultLocale;
|
||||
const context = this.context;
|
||||
if (context && context.antLocale && context.antLocale.Calendar) {
|
||||
locale = context.antLocale.Calendar;
|
||||
}
|
||||
// 统一合并为完整的 Locale
|
||||
const result = assign({}, locale, props.locale);
|
||||
result.lang = assign({}, locale.lang, props.locale.lang);
|
||||
const result = { ...locale, ...props.locale };
|
||||
result.lang = { ...locale.lang, ...props.locale.lang };
|
||||
return result;
|
||||
}
|
||||
|
||||
monthCellRender = (value) => {
|
||||
monthCellRender = (value, locale) => {
|
||||
const prefixCls = this.props.prefixCls;
|
||||
const month = value.getMonth();
|
||||
return (
|
||||
<div className={`${prefixCls}-month`}>
|
||||
<div className={`${prefixCls}-value`}>
|
||||
{value.localeData().monthsShort(value)}
|
||||
{locale.format.shortMonths[month]}
|
||||
</div>
|
||||
<div className={`${prefixCls}-content`}>
|
||||
{this.props.monthCellRender(value)}
|
||||
@@ -113,7 +94,7 @@ export default class Calendar extends React.Component<CalendarProps, any> {
|
||||
return (
|
||||
<div className={`${prefixCls}-date`}>
|
||||
<div className={`${prefixCls}-value`}>
|
||||
{zerofixed(value.date())}
|
||||
{zerofixed(value.getDayOfMonth())}
|
||||
</div>
|
||||
<div className={`${prefixCls}-content`}>
|
||||
{this.props.dateCellRender(value)}
|
||||
@@ -158,8 +139,7 @@ export default class Calendar extends React.Component<CalendarProps, any> {
|
||||
locale={locale.lang}
|
||||
prefixCls={prefixCls}
|
||||
onTypeChange={this.setType}
|
||||
onValueChange={this.setValue}
|
||||
/>
|
||||
onValueChange={this.setValue} />
|
||||
<FullCalendar
|
||||
{...props}
|
||||
Select={noop}
|
||||
@@ -169,8 +149,7 @@ export default class Calendar extends React.Component<CalendarProps, any> {
|
||||
showHeader={false}
|
||||
value={value}
|
||||
monthCellRender={this.monthCellRender}
|
||||
dateCellRender={this.dateCellRender}
|
||||
/>
|
||||
dateCellRender={this.dateCellRender} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
category: Components
|
||||
type: Views
|
||||
subtitle: 日历
|
||||
type: Presentation
|
||||
chinese: 日历
|
||||
cols: 1
|
||||
title: Calendar
|
||||
english: Calendar
|
||||
---
|
||||
|
||||
按照日历形式展示数据的容器。
|
||||
@@ -25,11 +25,11 @@ title: Calendar
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
|
||||
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
|
||||
| value | 展示日期 | Date | 当前日期 |
|
||||
| defaultValue | 默认展示日期 | Date | 当前日期 |
|
||||
| mode | 初始模式，`month/year` | string | month |
|
||||
| fullscreen | 是否全屏显示 | boolean | true |
|
||||
| dateCellRender | 自定义渲染日期单元格| function(date: moment): ReactNode | 无 |
|
||||
| monthCellRender | 自定义渲染月单元格 | function(date: moment): ReactNode | 无 |
|
||||
| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
|
||||
| onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
|
||||
| fullscreen | 是否全屏显示 | bool | true |
|
||||
| dateCellRender | 自定义渲染日期单元格| function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/))| 无 |
|
||||
| monthCellRender | 自定义渲染月单元格 | function([GregorianCalendar](https://github.com/yiminghe/gregorian-calendar/)) | 无 |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
|
||||
| onPanelChange| 日期面板变化回调 | function(date, mode) | 无 |
|
||||
|
||||
1
components/calendar/locale/en_US.js
Normal file
1
components/calendar/locale/en_US.js
Normal file
@@ -0,0 +1 @@
|
||||
module.exports = require('../../date-picker/locale/en_US');
|
||||
@@ -1,2 +0,0 @@
|
||||
import en_US from '../../date-picker/locale/en_US';
|
||||
export default en_US;
|
||||
1
components/calendar/locale/ru_RU.js
Normal file
1
components/calendar/locale/ru_RU.js
Normal file
@@ -0,0 +1 @@
|
||||
module.exports = require('../../date-picker/locale/ru_RU');
|
||||
@@ -1,2 +0,0 @@
|
||||
import ru_RU from '../../date-picker/locale/ru_RU';
|
||||
export default ru_RU;
|
||||
1
components/calendar/locale/zh_CN.js
Normal file
1
components/calendar/locale/zh_CN.js
Normal file
@@ -0,0 +1 @@
|
||||
module.exports = require('../../date-picker/locale/zh_CN');
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user