mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
chore: adjust coding style, delete useless less, modify md files.
This commit is contained in:
parent
41244d83de
commit
69c2a4c277
22
components/message/demo/costomTime.md
Normal file
22
components/message/demo/costomTime.md
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
# 基本
|
||||
|
||||
- order: 4
|
||||
|
||||
全局提示 - 操作成功提示,并自定义时长10s,默认时长2.5s
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
|
||||
var message = antd.message;
|
||||
var success = function(){
|
||||
message.success('这是一条成功的提示,并将于10秒后消失',10);
|
||||
}
|
||||
|
||||
React.render(
|
||||
<button className="ant-btn ant-btn-primary" onClick={success} >(自定义时长)显示成功提示</button>, document.getElementById('components-message-demo-costomtime')
|
||||
);
|
||||
|
||||
````
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
- order: 1
|
||||
|
||||
全局提示 - 操作警告
|
||||
全局提示 - 操作失败
|
||||
|
||||
---
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
- order: 2
|
||||
|
||||
全局提示 - 需求帮助
|
||||
全局提示 - 提醒
|
||||
|
||||
---
|
||||
|
||||
@ -10,11 +10,11 @@
|
||||
|
||||
var message = antd.message;
|
||||
var info = function(){
|
||||
message.info('这是一条普通的提示');
|
||||
message.info('这是一条普通的提醒');
|
||||
}
|
||||
|
||||
React.render(
|
||||
<button className="ant-btn ant-btn-primary" onClick={info} >显示普通提示</button>, document.getElementById('components-message-demo-info')
|
||||
<button className="ant-btn ant-btn-primary" onClick={info} >显示普通提醒</button>, document.getElementById('components-message-demo-info')
|
||||
);
|
||||
|
||||
````
|
@ -19,50 +19,59 @@ var getMessageInstance = function(){
|
||||
|
||||
module.exports = {
|
||||
|
||||
info: function(m) {
|
||||
info: function(m, t) {
|
||||
if (!message) {
|
||||
message = getMessageInstance();
|
||||
}
|
||||
|
||||
t = t || 2.5;
|
||||
message.notice({
|
||||
key: 'simpleMessage',
|
||||
duration: 2.5,
|
||||
duration: t,
|
||||
style: {
|
||||
left: '50%'
|
||||
},
|
||||
content: <div className='ant-message-custom-content'><i className='anticon anticon-info-circle ant-message-info'></i><span>{m}</span></div>
|
||||
content: <div className='ant-message-custom-content'>
|
||||
<i className='anticon anticon-info-circle ant-message-info'></i>
|
||||
<span>{m}</span>
|
||||
</div>
|
||||
});
|
||||
},
|
||||
success: function(m) {
|
||||
success: function(m, t) {
|
||||
|
||||
if (!message) {
|
||||
message = getMessageInstance();
|
||||
}
|
||||
|
||||
t = t || 2.5;
|
||||
message.notice({
|
||||
key: 'simpleMessage1',
|
||||
transitionName: 'move-up',
|
||||
duration: 2.5,
|
||||
duration: t,
|
||||
style: {
|
||||
left: '50%'
|
||||
},
|
||||
content: <div className='ant-message-custom-content'><i className='anticon anticon-check-circle ant-message-success'></i><span>{m}</span></div>
|
||||
content: <div className='ant-message-custom-content'>
|
||||
<i className='anticon anticon-check-circle ant-message-success'></i>
|
||||
<span>{m}</span>
|
||||
</div>
|
||||
});
|
||||
},
|
||||
error: function(m) {
|
||||
error: function(m, t) {
|
||||
|
||||
if (!message) {
|
||||
message = getMessageInstance();
|
||||
}
|
||||
|
||||
t = t || 2.5;
|
||||
message.notice({
|
||||
key: 'simpleMessage2',
|
||||
transitionName: 'move-up',
|
||||
duration: 2.5,
|
||||
duration: t,
|
||||
style: {
|
||||
left: '50%'
|
||||
},
|
||||
content: <div className='ant-message-custom-content'><i className='anticon anticon-exclamation-circle ant-message-error'></i><span>{m}</span></div>
|
||||
content: <div className='ant-message-custom-content'>
|
||||
<i className='anticon anticon-exclamation-circle ant-message-error'></i>
|
||||
<span>{m}</span>
|
||||
</div>
|
||||
});
|
||||
}
|
||||
};
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
- category: Components
|
||||
- chinese: 全局提示
|
||||
- order: 3
|
||||
- order: 4
|
||||
|
||||
---
|
||||
|
||||
|
@ -49,48 +49,4 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.fade-effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
}
|
||||
|
||||
&-fade-enter {
|
||||
opacity: 0;
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-leave {
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-enter&-fade-enter-active {
|
||||
animation-name: rcNotificationFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-fade-leave&-fade-leave-active {
|
||||
animation-name: rcDialogFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcNotificationFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcDialogFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user