mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
modify notification #88
This commit is contained in:
zhujun24
parent
9667b49701
commit
3c05b56a2d
@ -7,29 +7,17 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Notification = require('antd/lib/notification');
|
||||
|
||||
if(!Notification.notification){
|
||||
Notification.notification = Notification.newInstance({
|
||||
prefixCls: 'ant-notification',
|
||||
style: {
|
||||
top: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
var notification = require('antd/lib/notification');
|
||||
|
||||
var openNotification = function() {
|
||||
var args = {
|
||||
message: "这是标题",
|
||||
description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
|
||||
};
|
||||
Notification.show(args);
|
||||
}
|
||||
};
|
||||
notification.show(args);
|
||||
};
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<button className='ant-btn ant-btn-primary' onClick={openNotification}>基本</button>
|
||||
</div>,
|
||||
document.getElementById('components-notification-demo-basic'));
|
||||
<button className='ant-btn ant-btn-primary' onClick={openNotification}>基本</button>
|
||||
, document.getElementById('components-notification-demo-basic'));
|
||||
````
|
||||
@ -7,34 +7,22 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Notification = require('antd/lib/notification');
|
||||
|
||||
if(!Notification.notification){
|
||||
Notification.notification = Notification.newInstance({
|
||||
prefixCls: 'ant-notification',
|
||||
style: {
|
||||
top: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
var notification = require('antd/lib/notification');
|
||||
|
||||
var close = function() {
|
||||
console.log("我被默认的关闭按钮关闭了！");
|
||||
}
|
||||
};
|
||||
|
||||
var openNotification = function() {
|
||||
var args = {
|
||||
message: "这是标题",
|
||||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
|
||||
defaultClose: close
|
||||
onClose: close
|
||||
};
|
||||
Notification.show(args);
|
||||
}
|
||||
notification.show(args);
|
||||
};
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<button className='ant-btn ant-btn-primary' onClick={openNotification}>关闭按钮触发回调函数</button>
|
||||
</div>,
|
||||
document.getElementById('components-notification-demo-onclose'));
|
||||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>关闭按钮触发回调函数</button>
|
||||
, document.getElementById('components-notification-demo-onclose'));
|
||||
````
|
||||
@ -7,25 +7,19 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Notification = require('antd/lib/notification');
|
||||
var notification = require('antd/lib/notification');
|
||||
|
||||
if(!Notification.notification){
|
||||
Notification.notification = Notification.newInstance({
|
||||
prefixCls: 'ant-notification',
|
||||
style: {
|
||||
top: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var customClose = function() {
|
||||
var customClose = function(key) {
|
||||
// 自定义按钮关闭时的业务处理
|
||||
console.log("我被自定义的关闭按钮关闭了！");
|
||||
}
|
||||
// 隐藏提醒框
|
||||
notification.notification.removeNotice(key);
|
||||
};
|
||||
|
||||
var close = function() {
|
||||
// 默认按钮关闭时的业务处理
|
||||
console.log("我被默认的关闭按钮关闭了！");
|
||||
}
|
||||
};
|
||||
|
||||
var btn = <button className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮并触发回调函数</button>;
|
||||
|
||||
@ -35,14 +29,12 @@ var openNotification = function() {
|
||||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
|
||||
btn: btn,
|
||||
customClose: customClose,
|
||||
defaultClose: close
|
||||
onClose: close
|
||||
};
|
||||
Notification.show(args);
|
||||
}
|
||||
notification.show(args);
|
||||
};
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>关闭自定义的按钮触发回调函数</button>
|
||||
</div>,
|
||||
document.getElementById('components-notification-demo-with-btn-onclose'));
|
||||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>点击自定义的按钮触发回调函数</button>
|
||||
, document.getElementById('components-notification-demo-with-btn-onclose'));
|
||||
````
|
||||
@ -7,17 +7,7 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Notification = require('antd/lib/notification');
|
||||
|
||||
if(!Notification.notification){
|
||||
Notification.notification = Notification.newInstance({
|
||||
prefixCls: 'ant-notification',
|
||||
style: {
|
||||
top: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
var notification = require('antd/lib/notification');
|
||||
|
||||
var btn = <button className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮</button>;
|
||||
|
||||
@ -27,12 +17,10 @@ var openNotification = function() {
|
||||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
|
||||
btn: btn
|
||||
};
|
||||
Notification.show(args);
|
||||
}
|
||||
notification.show(args);
|
||||
};
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>自定义关闭按钮</button>
|
||||
</div>,
|
||||
document.getElementById('components-notification-demo-with-btn'));
|
||||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>自定义关闭按钮</button>
|
||||
, document.getElementById('components-notification-demo-with-btn'));
|
||||
````
|
||||
@ -7,17 +7,7 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Notification = require('antd/lib/notification');
|
||||
|
||||
if(!Notification.notification){
|
||||
Notification.notification = Notification.newInstance({
|
||||
prefixCls: 'ant-notification',
|
||||
style: {
|
||||
top: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
var notification = require('antd/lib/notification');
|
||||
|
||||
var openNotification = function() {
|
||||
var args = {
|
||||
@ -25,12 +15,10 @@ var openNotification = function() {
|
||||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
|
||||
icon: true
|
||||
};
|
||||
Notification.show(args);
|
||||
}
|
||||
notification.show(args);
|
||||
};
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>带有Icon的通知提醒框</button>
|
||||
</div>,
|
||||
document.getElementById('components-notification-demo-with-icon'));
|
||||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>带有Icon的通知提醒框</button>
|
||||
, document.getElementById('components-notification-demo-with-icon'));
|
||||
````
|
||||
@ -1,13 +1,16 @@
|
||||
import Notification from 'rc-notification';
|
||||
|
||||
function close(key, customCallback) {
|
||||
Notification.notification.removeNotice(key);
|
||||
if (customCallback) {
|
||||
customCallback();
|
||||
}
|
||||
}
|
||||
|
||||
Notification.show = function (args) {
|
||||
if (!Notification.notification) {
|
||||
Notification.notification = Notification.newInstance({
|
||||
prefixCls: 'ant-notification',
|
||||
style: {
|
||||
top: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (args.icon) {
|
||||
let prefixCls = 'ant-notification-notice-content-icon-';
|
||||
Notification.notification.notice({
|
||||
@ -18,7 +21,7 @@ Notification.show = function (args) {
|
||||
</div>,
|
||||
duration: null,
|
||||
closable: true,
|
||||
onClose: args.defaultClose,
|
||||
onClose: args.onClose,
|
||||
style: {}
|
||||
});
|
||||
} else {
|
||||
@ -26,12 +29,12 @@ Notification.show = function (args) {
|
||||
let prefixCls = 'ant-notification-notice-content-';
|
||||
Notification.notification.notice({
|
||||
content: <div>
|
||||
<p className={prefixCls + 'message'}>{args.message}</p>
|
||||
<p className={prefixCls + 'description'}>{args.description}</p>
|
||||
</div>,
|
||||
<p className={prefixCls + 'message'}>{args.message}</p>
|
||||
<p className={prefixCls + 'description'}>{args.description}</p>
|
||||
</div>,
|
||||
duration: null,
|
||||
closable: true,
|
||||
onClose: args.defaultClose,
|
||||
onClose: args.onClose,
|
||||
style: {}
|
||||
});
|
||||
} else {
|
||||
@ -41,13 +44,13 @@ Notification.show = function (args) {
|
||||
content: <div>
|
||||
<p className={prefixCls + 'message'}>{args.message}</p>
|
||||
<p className={prefixCls + 'description'}>{args.description}</p>
|
||||
<span onClick={close.bind(null, key, args.customClose)} className={prefixCls + 'btn'}>
|
||||
<span onClick={args.customClose ? args.customClose.bind(null, key) : Notification.notification.removeNotice.bind(null, key)} className={prefixCls + 'btn'}>
|
||||
{args.btn}
|
||||
</span>
|
||||
</div>,
|
||||
duration: null,
|
||||
closable: true,
|
||||
onClose: args.defaultClose,
|
||||
onClose: args.onClose,
|
||||
key: key,
|
||||
style: {}
|
||||
});
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|----------- |--------------------------------------------- | ----------- |--------|
|
||||
| message | 通知提醒标题，必选 | String | 无 |
|
||||
| description | 通知提醒内容，必选 | String | 无 |
|
||||
| icon | 框的左侧有Icon | Boolean | false |
|
||||
| btn | 自定义关闭按钮的文字 | String | 无 |
|
||||
| defaultClose | 默认关闭按钮关闭时触发的回调函数 | Function | 无 |
|
||||
| customClose | 自定义关闭按钮关闭时触发的回调函数 | Function | 无 |
|
||||
| icon | 通知提醒框的左侧有Icon | Boolean | false |
|
||||
| btn | 自定义关闭按钮 | String | 无 |
|
||||
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | 无 |
|
||||
| customClose | 点击自定义按钮时触发的回调函数 | Function | 无 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user