diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
new file mode 100644
index 0000000000..1aa15540e4
--- /dev/null
+++ b/components/collapse/demo/accordion.md
@@ -0,0 +1,32 @@
+# 手风琴
+
+- order: 1
+
+手风琴,每次只打开一个tab。默认打开第一个
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+var text = `
+ A dog is a type of domesticated animal.
+ Known for its loyalty and faithfulness,
+ it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+
+
+ {text}
+
+
+ {text}
+
+
+ {text}
+
+
+, document.getElementById('components-collapse-demo-accordion'));
+````
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
new file mode 100644
index 0000000000..c54a3b408a
--- /dev/null
+++ b/components/collapse/demo/basic.md
@@ -0,0 +1,36 @@
+# 折叠面板
+
+- order: 0
+
+默认打开第二个面板。
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+function callback(key) {
+ console.log(key);
+}
+
+var text = `
+ A dog is a type of domesticated animal.
+ Known for its loyalty and faithfulness,
+ it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+
+
+ {text}
+
+
+ {text}
+
+
+ {text}
+
+
+, document.getElementById('components-collapse-demo-basic'));
+````
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
new file mode 100644
index 0000000000..45054ebb16
--- /dev/null
+++ b/components/collapse/demo/mix.md
@@ -0,0 +1,40 @@
+# 面板嵌套
+
+- order: 2
+
+手风琴嵌套折叠面板
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+function callback(key) {
+ console.log(key);
+}
+
+var text = `
+ A dog is a type of domesticated animal.
+ Known for its loyalty and faithfulness,
+ it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+
+
+
+
+ {text}
+
+
+
+
+ {text}
+
+
+ {text}
+
+
+, document.getElementById('components-collapse-demo-mix'));
+````
diff --git a/components/collapse/index.jsx b/components/collapse/index.jsx
index e69de29bb2..44c6c472b4 100644
--- a/components/collapse/index.jsx
+++ b/components/collapse/index.jsx
@@ -0,0 +1,19 @@
+'use strict';
+
+var Collapse = require('rc-collapse');
+var React = require('react');
+var prefixCls = 'ant-collapse';
+
+class AntCollapse extends React.Component {
+ render() {
+ return ;
+ }
+}
+
+AntCollapse.defaultProps = {
+ prefixCls: prefixCls
+};
+
+AntCollapse.Panel = Collapse.Panel;
+
+module.exports = AntCollapse;
diff --git a/components/collapse/index.md b/components/collapse/index.md
index 62f17a27c1..4be652d261 100644
--- a/components/collapse/index.md
+++ b/components/collapse/index.md
@@ -11,3 +11,21 @@
- 对复杂区域进行分组和隐藏,保持页面的整洁。
- `手风琴` 是一种特殊的折叠面板,只允许单个内容区域展开。
+
+## API
+
+### Collapse
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------------------|----------------------------------------------|----------|---------------------------------|
+| activeKey | 当前激活 tab 面板的 key| Array or String | 默认无,accordion模式下默认第一个元素|
+| defaultActiveKey | 初始化选中面板的 key | String | 无 |
+| onChange | 切换面板的回调 | Function | 无 |
+
+
+### Collapse.Panel
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------------------|-------------------------|--------|
+| key | 对应 activeKey | String | 无 |
+| header | 面板头内容 | React.Element or String | 无 |
diff --git a/components/iconfont/index.md b/components/iconfont/index.md
index 4e4e61f97d..97b15a0bf1 100644
--- a/components/iconfont/index.md
+++ b/components/iconfont/index.md
@@ -13,11 +13,11 @@
我们为每个图标赋予了语义化的命名。我们的命名规范如:
-- 1. 使用 `-` 来连接单词;
+- 使用 `-` 来连接单词;
-- 2. 实心和描线图标保持同名,用 `-o` 来区分,比如 `question-circle`(实心) 和 `question-circle-o`(描线);
+- 实心和描线图标保持同名,用 `-o` 来区分,比如 `question-circle`(实心) 和 `question-circle-o`(描线);
-- 3. 命名顺序:`[icon名]-[描线与否]-[方向]`。
+- 命名顺序:`[icon名]-[描线与否]-[方向]`。
每个图标的类名需要在图标名称前加上 `anticon-` 前缀,如 `.anticon-question-circle`。
diff --git a/components/message/demo/duration.md b/components/message/demo/duration.md
new file mode 100644
index 0000000000..b230a0bf41
--- /dev/null
+++ b/components/message/demo/duration.md
@@ -0,0 +1,19 @@
+# 基本
+
+- order: 4
+
+全局提示 - 操作成功提示,并自定义时长`10s`,默认时长`1.5s`。
+
+---
+
+````jsx
+
+var message = antd.message;
+var success = function() {
+ message.success('这是一条成功的提示,并将于10秒后消失', 10);
+};
+
+React.render(自定义时长提示
+, document.getElementById('components-message-demo-duration'));
+````
+
diff --git a/components/message/demo/error.md b/components/message/demo/error.md
new file mode 100644
index 0000000000..f2dd7767c9
--- /dev/null
+++ b/components/message/demo/error.md
@@ -0,0 +1,18 @@
+# 基本
+
+- order: 1
+
+全局提示 - 操作失败反馈。
+
+---
+
+````jsx
+
+var message = antd.message;
+var error = function() {
+ message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
+};
+
+React.render(显示失败提示
+, document.getElementById('components-message-demo-error'));
+````
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
new file mode 100644
index 0000000000..fa315b77b1
--- /dev/null
+++ b/components/message/demo/info.md
@@ -0,0 +1,18 @@
+# 基本
+
+- order: 2
+
+全局提示 - 提醒反馈。
+
+---
+
+````jsx
+
+var message = antd.message;
+var info = function() {
+ message.info('这是一条普通的提醒');
+};
+
+React.render(显示普通提醒
+, document.getElementById('components-message-demo-info'));
+````
diff --git a/components/message/demo/success.md b/components/message/demo/success.md
new file mode 100644
index 0000000000..4df02f5153
--- /dev/null
+++ b/components/message/demo/success.md
@@ -0,0 +1,18 @@
+# 基本
+
+- order: 0
+
+全局提示 - 操作成功提示。
+
+---
+
+````jsx
+var message = antd.message;
+var success = function() {
+ message.success('这是一条成功的提示');
+};
+
+React.render(显示成功提示
+, document.getElementById('components-message-demo-success'));
+````
+
diff --git a/components/message/index.jsx b/components/message/index.jsx
index e69de29bb2..dbef951ba1 100644
--- a/components/message/index.jsx
+++ b/components/message/index.jsx
@@ -0,0 +1,58 @@
+'use strict';
+
+//import React from 'react';
+import Notification from 'rc-notification';
+
+var defaultDuration = 1.5;
+
+var getMessageInstance = function(){
+ return Notification.newInstance({
+ prefixCls: 'ant-message',
+ transitionName: 'move-up',
+ style: {} // 覆盖原来的样式
+ });
+};
+
+export default {
+ info: function(m, t) {
+ var message = getMessageInstance();
+ t = t || defaultDuration;
+ message.notice({
+ key: 'simpleMessage',
+ duration: t,
+ style: {},
+ content:
+
+ {m}
+
+ });
+ },
+ success: function(m, t) {
+ var message = getMessageInstance();
+ t = t || defaultDuration;
+ message.notice({
+ key: 'simpleMessage1',
+ transitionName: 'move-up',
+ duration: t,
+ style: {},
+ content:
+
+ {m}
+
+ });
+ },
+ error: function(m, t) {
+ var message = getMessageInstance();
+ t = t || defaultDuration;
+ message.notice({
+ key: 'simpleMessage2',
+ transitionName: 'move-up',
+ duration: t,
+ style: {},
+ content:
+
+ {m}
+
+ });
+ }
+};
diff --git a/components/message/index.md b/components/message/index.md
index d97fc43b0c..7ada812017 100644
--- a/components/message/index.md
+++ b/components/message/index.md
@@ -2,6 +2,7 @@
- category: Components
- chinese: 全局提示
+- order: 4
---
@@ -11,3 +12,16 @@
- 可提供成功、警告和错误等反馈信息。
- 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。
+
+## API
+
+- `message.success(content, duration)`
+- `message.error(content, duration)`
+- `message.info(content, duration)`
+
+组件提供了三个静态方法,参数如下:
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------------|----------------|----------------------------|--------------|
+| content | 提示内容 | React.Element or String | 无 |
+| duration | 自动关闭的延时 | number | 1.5 |
diff --git a/index.js b/index.js
index d96fae4aae..2096982890 100644
--- a/index.js
+++ b/index.js
@@ -16,7 +16,9 @@ var antd = {
Steps: require('./components/steps'),
InputNumber: require('./components/input-number'),
Table: require('./components/table'),
- Switch: require('./components/switch')
+ Switch: require('./components/switch'),
+ Collapse: require('./components/Collapse'),
+ message: require('./components/message')
};
module.exports = antd;
diff --git a/package.json b/package.json
index 9fa88cf4fb..572176ab66 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"gregorian-calendar-format": "~3.0.1",
"object-assign": "~3.0.0",
"rc-calendar": "~3.10.0",
+ "rc-collapse": "~1.2.0",
"rc-dialog": "~4.4.0",
"rc-dropdown": "~1.1.1",
"rc-input-number": "~2.0.1",
@@ -27,7 +28,8 @@
"rc-table": "~3.0.1",
"rc-switch": "~1.2.0",
"rc-tabs": "~5.2.0",
- "rc-tooltip": "~2.4.0"
+ "rc-tooltip": "~2.4.0",
+ "rc-notification": "~1.0.1"
},
"devDependencies": {
"css-animation": "~1.0.3",
@@ -49,7 +51,6 @@
"webpack": "^1.10.1",
"webpack-dev-middleware": "^1.2.0"
},
-
"scripts": {
"babel": "babel components --out-dir lib",
"build": "npm run clean && webpack && nico build",
diff --git a/style/components/collapse.less b/style/components/collapse.less
new file mode 100644
index 0000000000..2736618ddb
--- /dev/null
+++ b/style/components/collapse.less
@@ -0,0 +1,74 @@
+@prefixCls: ant-collapse;
+@borderStyle: 1px solid #d9d9d9;
+
+#arrow {
+ .common(){
+ width: 0;
+ height: 0;
+ font-size: 0;
+ line-height: 0;
+ }
+ .right(@w, @h, @color) {
+ border-top: @w solid transparent;
+ border-bottom: @w solid transparent;
+ border-left: @h solid @color;
+ }
+
+ .bottom(@w, @h, @color) {
+ border-left: @w solid transparent;
+ border-right: @w solid transparent;
+ border-top: @h solid @color;
+ }
+}
+
+.@{prefixCls} {
+ background-color: #f3f5f7;
+ border-radius: 3px;
+ border-top: @borderStyle;
+ border-left: @borderStyle;
+ border-right: @borderStyle;
+
+ &-content {
+ height: 0;
+ opacity: 0;
+ transition-property: all;
+ transition-duration: .2s;
+ transition-timing-function: ease-in;
+ overflow: hidden;
+ color: #999;
+ padding: 0 16px;
+ background-color: #fbfbfb;
+ > p, > div {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ }
+
+ &-content-active {
+ opacity: 1;
+ height: auto;
+ border-bottom: @borderStyle;
+ }
+
+ &-header {
+ height: 38px;
+ line-height: 38px;
+ text-indent: 16px;
+ color: #666;
+ border-bottom: @borderStyle;
+ &:before {
+ display: inline-block;
+ content: '\20';
+ #arrow > .common();
+ #arrow > .right(3px, 4px, #666);
+ vertical-align: middle;
+ margin-right: 8px;
+ }
+ }
+
+ &-item-active {
+ .@{prefixCls}-header::before {
+ #arrow > .bottom(3px, 4px, #666);
+ }
+ }
+}
diff --git a/style/components/index.less b/style/components/index.less
index d86b02ee24..088121e08a 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -17,3 +17,5 @@
@import "breadcrumb";
@import "inputNumber";
@import "typography";
+@import "collapse";
+@import "message";
diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less
index 77c76cb4f8..de9e6f8b7c 100644
--- a/style/components/inputNumber.less
+++ b/style/components/inputNumber.less
@@ -90,11 +90,10 @@
cursor: pointer;
&-inner {
top: 2px;
- left: 4px;
- transform: rotate(270deg);
- filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
&:before {
- content: "\e611";
+ content: "\e600";
+ .ie-rotate(2);
+ transform: rotate(180deg);
}
}
}
@@ -103,10 +102,8 @@
cursor: pointer;
&-inner {
bottom: 2px;
- transform: rotate(90deg);
- filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
&:before {
- content: "\e611";
+ content: "\e600";
}
}
}
diff --git a/style/components/message.less b/style/components/message.less
new file mode 100644
index 0000000000..be2bd0d651
--- /dev/null
+++ b/style/components/message.less
@@ -0,0 +1,47 @@
+@prefixMessageClass: ant-message;
+
+.@{prefixMessageClass} {
+ font-size: 12px;
+ position: fixed;
+ z-index: 1000;
+ width: 100%;
+ top: 16px;
+
+ &-notice {
+ width: auto;
+ vertical-align: middle;
+ position: absolute;
+ left: 50%;
+ }
+
+ &-notice-content {
+ position: relative;
+ right: 50%;
+ padding: 8px 16px;
+ border-radius: @border-radius-base;
+ border: 1px solid #e9e9e9;
+ box-shadow: 0 0 4px rgba(0,0,0,0.16);
+ background: #fff;
+ display: block;
+ }
+
+ &-custom-content {
+ }
+
+ &-success {
+ color: @success-color;
+ }
+
+ &-error {
+ color: @error-color;
+ }
+
+ &-info {
+ color: @primary-color;
+ }
+
+ .anticon {
+ margin-right: 8px;
+ font-size: 14px;
+ }
+}
diff --git a/style/core/iconfont.less b/style/core/iconfont.less
index 9be47d2ede..ae30d71664 100644
--- a/style/core/iconfont.less
+++ b/style/core/iconfont.less
@@ -55,12 +55,11 @@
.@{iconfont-css-prefix}-retweet:before {content:"\e659";}
.@{iconfont-css-prefix}-right:before {content:"\e611";}
-.@{iconfont-css-prefix}-down {.ie-rotate(1);}
-.@{iconfont-css-prefix}-down:before {content:"\e611";.rotate(90deg);}
+.@{iconfont-css-prefix}-down:before {content:"\e600";}
.@{iconfont-css-prefix}-left {.ie-rotate(2);}
.@{iconfont-css-prefix}-left:before {content:"\e611";.rotate(180deg);}
-.@{iconfont-css-prefix}-up {.ie-rotate(3);}
-.@{iconfont-css-prefix}-up:before {content:"\e611";.rotate(270deg);}
+.@{iconfont-css-prefix}-up {.ie-rotate(2);}
+.@{iconfont-css-prefix}-up:before {content:"\e600";.rotate(180deg);}
// 提示性图标
.@{iconfont-css-prefix}-question:before {content:"\e655";}
@@ -125,6 +124,7 @@
.@{iconfont-css-prefix}-link:before {content:"\e640";}
.@{iconfont-css-prefix}-logout:before {content:"\e642";}
.@{iconfont-css-prefix}-mail:before {content:"\e643";}
+.@{iconfont-css-prefix}-menu-fold {.ie-rotate(2);}
.@{iconfont-css-prefix}-menu-fold:before {content:"\e645";.rotate(180deg);}
.@{iconfont-css-prefix}-menu-unfold:before {content:"\e645";}
.@{iconfont-css-prefix}-mobile:before {content:"\e649";}
@@ -172,7 +172,8 @@
.@{iconfont-css-prefix}-circle-o-left,
.@{iconfont-css-prefix}-double-left,
.@{iconfont-css-prefix}-verticle-left,
- .@{iconfont-css-prefix}-backward {
+ .@{iconfont-css-prefix}-backward,
+ .@{iconfont-css-prefix}-menu-fold {
filter: none;
}
}
diff --git a/style/core/motion.less b/style/core/motion.less
index 4d676b6ab3..0dd042b19e 100644
--- a/style/core/motion.less
+++ b/style/core/motion.less
@@ -1,5 +1,5 @@
.motion-common() {
- animation-duration: .22s;
+ animation-duration: .35s;
animation-fill-mode: both;
display: block !important;
}
@@ -28,4 +28,4 @@
@import "motion/other";
@import "motion/slide";
@import "motion/swing";
-@import "motion/zoom";
+@import "motion/zoom";
\ No newline at end of file
diff --git a/style/core/motion/fade.less b/style/core/motion/fade.less
index 22b10a991b..e4be80d825 100644
--- a/style/core/motion/fade.less
+++ b/style/core/motion/fade.less
@@ -1,7 +1,7 @@
.fade-enter {
opacity: 0;
.motion-common();
- animation-timing-function: @ease-in;
+ animation-timing-function: @ease-out;
animation-play-state: paused;
}
diff --git a/style/core/motion/zoom.less b/style/core/motion/zoom.less
index 142df88d5f..e362da93bd 100644
--- a/style/core/motion/zoom.less
+++ b/style/core/motion/zoom.less
@@ -2,11 +2,11 @@
.make-motion(@className, @keyframeName);
.@{className}-enter {
opacity: 0;
- transform: scale(0, 0);
- animation-timing-function: @ease-out-back;
+ animation-timing-function: @ease-out-circ;
}
.@{className}-leave {
- animation-timing-function: @ease-in-back;
+ animation-timing-function: @ease-in-circ;
+ transform: scale(0, 0);
}
}
diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less
index 7c330fbb79..e2ef6d7094 100644
--- a/style/themes/default/custom.less
+++ b/style/themes/default/custom.less
@@ -20,7 +20,7 @@
// ICONFONT
@iconfont-css-prefix : anticon;
-@icon-url : "//at.alicdn.com/t/font_1436443521_8072257";
+@icon-url : "//at.alicdn.com/t/font_1436496908_974446";
// LINK
@link-color : @primary-color;