move message style to less file

This commit is contained in:
afc163 2015-07-11 18:19:48 +08:00
parent 8ae46a9282
commit 5eb7ed9ff2
4 changed files with 11 additions and 18 deletions

View File

@ -2,7 +2,7 @@
- order: 4 - order: 4
全局提示 - 操作成功提示,并自定义时长`10s`,默认时长`2.5s`。 全局提示 - 操作成功提示,并自定义时长`10s`,默认时长`1.5s`。
--- ---
@ -10,7 +10,7 @@
var message = antd.message; var message = antd.message;
var success = function() { var success = function() {
message.success('这是一条成功的提示,并将于10秒后消失',10); message.success('这是一条成功的提示,并将于10秒后消失', 10);
}; };
React.render(<button className="ant-btn ant-btn-primary" onClick={success}>自定义时长提示</button> React.render(<button className="ant-btn ant-btn-primary" onClick={success}>自定义时长提示</button>

View File

@ -3,15 +3,13 @@
//import React from 'react'; //import React from 'react';
import Notification from 'rc-notification'; import Notification from 'rc-notification';
var defaultDuration = 2.5; var defaultDuration = 1.5;
var getMessageInstance = function(){ var getMessageInstance = function(){
return Notification.newInstance({ return Notification.newInstance({
prefixCls: 'ant-message', prefixCls: 'ant-message',
transitionName: 'move-up', transitionName: 'move-up',
style: { style: {} //
top: '16px'
}
}); });
}; };
@ -22,9 +20,7 @@ export default {
message.notice({ message.notice({
key: 'simpleMessage', key: 'simpleMessage',
duration: t, duration: t,
style: { style: {},
left: '50%'
},
content: <div className='ant-message-custom-content'> content: <div className='ant-message-custom-content'>
<i className='anticon anticon-info-circle ant-message-info'></i> <i className='anticon anticon-info-circle ant-message-info'></i>
<span>{m}</span> <span>{m}</span>
@ -38,9 +34,7 @@ export default {
key: 'simpleMessage1', key: 'simpleMessage1',
transitionName: 'move-up', transitionName: 'move-up',
duration: t, duration: t,
style: { style: {},
left: '50%'
},
content: <div className='ant-message-custom-content'> content: <div className='ant-message-custom-content'>
<i className='anticon anticon-check-circle ant-message-success'></i> <i className='anticon anticon-check-circle ant-message-success'></i>
<span>{m}</span> <span>{m}</span>
@ -54,9 +48,7 @@ export default {
key: 'simpleMessage2', key: 'simpleMessage2',
transitionName: 'move-up', transitionName: 'move-up',
duration: t, duration: t,
style: { style: {},
left: '50%'
},
content: <div className='ant-message-custom-content'> content: <div className='ant-message-custom-content'>
<i className='anticon anticon-exclamation-circle ant-message-error'></i> <i className='anticon anticon-exclamation-circle ant-message-error'></i>
<span>{m}</span> <span>{m}</span>

View File

@ -24,4 +24,4 @@
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|----------------------------|--------------| |------------|----------------|----------------------------|--------------|
| content | 提示内容 | React.Element or String | 无 | | content | 提示内容 | React.Element or String | 无 |
| duration | 自动关闭的延时 | number | 2.5 | | duration | 自动关闭的延时 | number | 1.5 |

View File

@ -5,11 +5,13 @@
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
top: 60px;
&-notice { &-notice {
width: auto; width: auto;
vertical-align: middle; vertical-align: middle;
position: absolute; position: absolute;
left: 50%;
} }
&-notice-content { &-notice-content {
@ -40,7 +42,6 @@
.anticon { .anticon {
margin-right: 8px; margin-right: 8px;
position: relative; font-size: 14px;
top: -1px;
} }
} }