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;