From 8ae46a9282f8cd3fb78f5b3bdb666c6ed8d80ff7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 11 Jul 2015 18:00:58 +0800 Subject: [PATCH] improve message component --- components/message/demo/costomTime.md | 12 +++++------ components/message/demo/error.md | 14 ++++++------- components/message/demo/info.md | 14 ++++++------- components/message/demo/success.md | 13 +++++------- components/message/index.jsx | 29 +++++++++------------------ components/message/index.md | 14 ++++++++++++- style/components/message.less | 27 ++++++++++--------------- 7 files changed, 55 insertions(+), 68 deletions(-) diff --git a/components/message/demo/costomTime.md b/components/message/demo/costomTime.md index 3bb76d9e08..184cb3de0b 100644 --- a/components/message/demo/costomTime.md +++ b/components/message/demo/costomTime.md @@ -2,20 +2,18 @@ - order: 4 -全局提示 - 操作成功提示,并自定义时长10s，默认时长2.5s +全局提示 - 操作成功提示,并自定义时长`10s`，默认时长`2.5s`。 --- ````jsx var message = antd.message; -var success = function(){ +var success = function() { message.success('这是一条成功的提示,并将于10秒后消失',10); -} - -React.render( - , document.getElementById('components-message-demo-costomtime') -); +}; +React.render( +, document.getElementById('components-message-demo-duration')); ```` diff --git a/components/message/demo/error.md b/components/message/demo/error.md index 3a8f1348c7..f2dd7767c9 100644 --- a/components/message/demo/error.md +++ b/components/message/demo/error.md @@ -2,19 +2,17 @@ - order: 1 -全局提示 - 操作失败 +全局提示 - 操作失败反馈。 --- ````jsx var message = antd.message; -var error = function(){ +var error = function() { message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示'); -} +}; -React.render( - , document.getElementById('components-message-demo-error') -); - -```` \ No newline at end of file +React.render( +, document.getElementById('components-message-demo-error')); +```` diff --git a/components/message/demo/info.md b/components/message/demo/info.md index 429e467efd..fa315b77b1 100644 --- a/components/message/demo/info.md +++ b/components/message/demo/info.md @@ -2,19 +2,17 @@ - order: 2 -全局提示 - 提醒 +全局提示 - 提醒反馈。 --- ````jsx var message = antd.message; -var info = function(){ +var info = function() { message.info('这是一条普通的提醒'); -} +}; -React.render( - , document.getElementById('components-message-demo-info') -); - -```` \ No newline at end of file +React.render( +, document.getElementById('components-message-demo-info')); +```` diff --git a/components/message/demo/success.md b/components/message/demo/success.md index 27423ec013..4df02f5153 100644 --- a/components/message/demo/success.md +++ b/components/message/demo/success.md @@ -2,20 +2,17 @@ - order: 0 -全局提示 - 操作成功提示 +全局提示 - 操作成功提示。 --- ````jsx - var message = antd.message; -var success = function(){ +var success = function() { message.success('这是一条成功的提示'); -} - -React.render( - , document.getElementById('components-message-demo-success') -); +}; +React.render( +, document.getElementById('components-message-demo-success')); ```` diff --git a/components/message/index.jsx b/components/message/index.jsx index 39182d8ff7..b6cac73139 100644 --- a/components/message/index.jsx +++ b/components/message/index.jsx @@ -3,27 +3,22 @@ //import React from 'react'; import Notification from 'rc-notification'; -var message; +var defaultDuration = 2.5; var getMessageInstance = function(){ - message = Notification.newInstance({ + return Notification.newInstance({ prefixCls: 'ant-message', transitionName: 'move-up', style: { top: '16px' } }); - return message; }; - -module.exports = { - +export default { info: function(m, t) { - if (!message) { - message = getMessageInstance(); - } - t = t || 2.5; + var message = getMessageInstance(); + t = t || defaultDuration; message.notice({ key: 'simpleMessage', duration: t, @@ -37,11 +32,8 @@ module.exports = { }); }, success: function(m, t) { - - if (!message) { - message = getMessageInstance(); - } - t = t || 2.5; + var message = getMessageInstance(); + t = t || defaultDuration; message.notice({ key: 'simpleMessage1', transitionName: 'move-up', @@ -56,11 +48,8 @@ module.exports = { }); }, error: function(m, t) { - - if (!message) { - message = getMessageInstance(); - } - t = t || 2.5; + var message = getMessageInstance(); + t = t || defaultDuration; message.notice({ key: 'simpleMessage2', transitionName: 'move-up', diff --git a/components/message/index.md b/components/message/index.md index 503dc1b175..764ad3117d 100644 --- a/components/message/index.md +++ b/components/message/index.md @@ -2,7 +2,6 @@ - category: Components - chinese: 全局提示 - - order: 4 --- @@ -13,3 +12,16 @@ - 可提供成功、警告和错误等反馈信息。 - 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。 + +## API + +- `message.success(content, duration)` +- `message.error(content, duration)` +- `message.info(content, duration)` + +组件提供了三个静态方法，参数如下： + +| 参数 | 说明 | 类型 | 默认值 | +|------------|----------------|----------------------------|--------------| +| content | 提示内容 | React.Element or String | 无 | +| duration | 自动关闭的延时 | number | 2.5 | diff --git a/style/components/message.less b/style/components/message.less index 395c6f49bb..89fd6bc6bc 100644 --- a/style/components/message.less +++ b/style/components/message.less @@ -7,45 +7,40 @@ width: 100%; &-notice { - width: auto; vertical-align: middle; position: absolute; } - &-notice-content{ + &-notice-content { position: relative; right: 50%; padding: 8px 16px; - border-radius: 6px; - border: 1px solid #e9e9e9;; - box-shadow: 0 0 4px #d9d9d9; + 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{ - height: 12px; - position: relative; - top: -8px; + &-custom-content { } &-success { - color: #87d068; + color: @success-color; } &-error { - color: #ff6600; + color: @error-color; } &-info { - color: #2db7f5; + color: @primary-color; } - .anticon{ - width: 16px; - height: 16px; - font-size: 16px; + .anticon { margin-right: 8px; + position: relative; + top: -1px; } }