mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
move message style to less file
This commit is contained in:
parent
8ae46a9282
commit
5eb7ed9ff2
@ -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>
|
@ -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>
|
||||||
|
@ -24,4 +24,4 @@
|
|||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|------------|----------------|----------------------------|--------------|
|
|------------|----------------|----------------------------|--------------|
|
||||||
| content | 提示内容 | React.Element or String | 无 |
|
| content | 提示内容 | React.Element or String | 无 |
|
||||||
| duration | 自动关闭的延时 | number | 2.5 |
|
| duration | 自动关闭的延时 | number | 1.5 |
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user