diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md
index b0647f35060e1d7ed7dcfa560a23b14916530e33..bf6281ac8d1b23f361deb5909ad6cbaa5131d522 100644
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -19,10 +19,10 @@ if(!Notification.notification){
});
}
-function openNotification() {
+var openNotification = function() {
var args = {
- title: '这是标题',
- message: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
+ message: "这是标题",
+ description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
};
Notification.show(args);
}
@@ -30,5 +30,6 @@ function openNotification() {
React.render(
-
, document.getElementById('components-notification-demo-basic'));
+ ,
+document.getElementById('components-notification-demo-basic'));
````
\ No newline at end of file
diff --git a/components/notification/demo/onclose.md b/components/notification/demo/onclose.md
new file mode 100644
index 0000000000000000000000000000000000000000..8436404601c546d8bec182c7a0b178fe569e9c5b
--- /dev/null
+++ b/components/notification/demo/onclose.md
@@ -0,0 +1,40 @@
+# 回调函数
+
+- order: 2
+
+点击关闭按钮时触发回调函数。
+
+---
+
+````jsx
+var Notification = require('antd/lib/notification');
+
+if(!Notification.notification){
+ Notification.notification = Notification.newInstance({
+ prefixCls: 'ant-notification',
+ style: {
+ top: 0,
+ right: 0
+ }
+ });
+}
+
+var close = function() {
+ console.log("我被默认的关闭按钮关闭了!");
+}
+
+var openNotification = function() {
+ var args = {
+ message: "这是标题",
+ description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+ defaultClose: close
+ };
+ Notification.show(args);
+}
+
+React.render(
+
+
+
,
+document.getElementById('components-notification-demo-onclose'));
+````
\ No newline at end of file
diff --git a/components/notification/demo/with-btn-onclose.md b/components/notification/demo/with-btn-onclose.md
new file mode 100644
index 0000000000000000000000000000000000000000..13e72ea1cdb242cac49d88ae0242b2f85b57abb1
--- /dev/null
+++ b/components/notification/demo/with-btn-onclose.md
@@ -0,0 +1,48 @@
+# 自定义关闭按钮同时触发回调函数
+
+- order: 4
+
+关闭自定义的关闭按钮时触发回调函数,同时还可以在默认关闭按钮上添加另一个回调函数。
+
+---
+
+````jsx
+var Notification = require('antd/lib/notification');
+
+if(!Notification.notification){
+ Notification.notification = Notification.newInstance({
+ prefixCls: 'ant-notification',
+ style: {
+ top: 0,
+ right: 0
+ }
+ });
+}
+
+var customClose = function() {
+ console.log("我被自定义的关闭按钮关闭了!");
+}
+
+var close = function() {
+ console.log("我被默认的关闭按钮关闭了!");
+}
+
+var btn = ;
+
+var openNotification = function() {
+ var args = {
+ message: "这是标题",
+ description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+ btn: btn,
+ customClose: customClose,
+ defaultClose: close
+ };
+ Notification.show(args);
+}
+
+React.render(
+
+
+
,
+document.getElementById('components-notification-demo-with-btn-onclose'));
+````
\ No newline at end of file
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index c442babe2fc3ef7cb091f6d5f8c534c537502385..0e1cde950b2b2a25d2f9db97fa70546411637eac 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -1,8 +1,8 @@
-# 关闭触发回调函数
+# 自定义关闭按钮
-- order: 2
+- order: 3
-点击关闭按钮触发回调函数。
+自定义关闭按钮的样式和文字。
---
@@ -19,22 +19,20 @@ if(!Notification.notification){
});
}
-function callback() {
- alert('我要关闭了!');
-}
+var btn = ;
-function openNotification() {
+var openNotification = function() {
var args = {
- title: '这是标题',
- message: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
- btn: true,
- callback: callback
+ message: "这是标题",
+ description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+ btn: btn
};
Notification.show(args);
}
React.render(
-
-
, document.getElementById('components-notification-demo-with-btn'));
+
+ ,
+document.getElementById('components-notification-demo-with-btn'));
````
\ No newline at end of file
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index a0137c417a0d86e070502df60cdc2952e2151958..736a201801422a7f5ba8d457ad260bc9c13877de 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -19,10 +19,10 @@ if(!Notification.notification){
});
}
-function openNotification() {
+var openNotification = function() {
var args = {
- title: '这是标题',
- message: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
+ message: "这是标题",
+ description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
icon: true
};
Notification.show(args);
@@ -30,6 +30,7 @@ function openNotification() {
React.render(
-
-
, document.getElementById('components-notification-demo-with-icon'));
+
+ ,
+document.getElementById('components-notification-demo-with-icon'));
````
\ No newline at end of file
diff --git a/components/notification/index.jsx b/components/notification/index.jsx
index e603c8bf93eead5f1ac85dbb0724e03db7ca2a93..282e9f3b5e11695bb64a4ce3c49a63790016fb5e 100644
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@@ -1,9 +1,9 @@
import Notification from 'rc-notification';
-function close(key, callback) {
+function close(key, customCallback) {
Notification.notification.removeNotice(key);
- if (callback) {
- callback();
+ if (customCallback) {
+ customCallback();
}
}
@@ -13,12 +13,12 @@ Notification.show = function (args) {
Notification.notification.notice({
content:
-
{args.title}
{args.message}
+
{args.description}
,
duration: null,
closable: true,
- onClose: args.callback,
+ onClose: args.defaultClose,
style: {}
});
} else {
@@ -26,12 +26,12 @@ Notification.show = function (args) {
let prefixCls = 'ant-notification-notice-content-';
Notification.notification.notice({
content:
-
{args.title}
{args.message}
+
{args.description}
,
duration: null,
closable: true,
- onClose: args.callback,
+ onClose: args.defaultClose,
style: {}
});
} else {
@@ -39,14 +39,15 @@ Notification.show = function (args) {
let key = 'manual' + new Date().getTime();
Notification.notification.notice({
content:
-
{args.title}
{args.message}
-
+
{args.description}
+
+ {args.btn}
+
,
duration: null,
closable: true,
- onClose: args.callback,
+ onClose: args.defaultClose,
key: key,
style: {}
});
diff --git a/components/notification/index.md b/components/notification/index.md
index 8fe2154720ecfb265bf2454ded2c7da736ec3b01..8a600c9442997a19d45433cbde62da3bb47df3df 100644
--- a/components/notification/index.md
+++ b/components/notification/index.md
@@ -15,8 +15,9 @@
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------- | ----------- |--------|
-| title | 通知提醒内容,必选 | String | 无 |
-| message | 通知提醒内容,必选 | String | 无 |
-| callback | 关闭时触发的回调函数 | Function | 无 |
-| icon | 框的左侧有Icon | Boolean | false |
-| btn | 自定义关闭按钮 | Boolean | false |
+| message | 通知提醒标题,必选 | String | 无 |
+| description | 通知提醒内容,必选 | String | 无 |
+| icon | 框的左侧有Icon | Boolean | false |
+| btn | 自定义关闭按钮的文字 | String | 无 |
+| defaultClose | 默认关闭按钮关闭时触发的回调函数 | Function | 无 |
+| customClose | 自定义关闭按钮关闭时触发的回调函数 | Function | 无 |
diff --git a/style/components/notification.less b/style/components/notification.less
index f2c8744896924ea6718abf260e2fe66673652e93..b8fbbcd1e7580bfbf163bf335e29c8b7a7230a8e 100644
--- a/style/components/notification.less
+++ b/style/components/notification.less
@@ -23,32 +23,32 @@
margin-top: @noticeMarginTop;
overflow: hidden;
- &-content{
- &-title{
+ &-content {
+ &-message {
font-size: 14px;
color: @text-color;
margin-bottom: 4px;
}
- &-message{
+ &-description {
font-size: @font-size-base;
color: @legend-color;
}
}
- &-content-icon{
+ &-content-icon {
position: relative;
- &-title{
+ &-message {
font-size: 14px;
color: @text-color;
margin-left: 51px;
margin-bottom: 4px;
}
- &-message{
+ &-description {
margin-left: 51px;
font-size: @font-size-base;
color: @legend-color;
}
- &-icon{
+ &-icon {
position: absolute;
left: 16px;
top: 50%;
@@ -58,7 +58,7 @@
}
}
- &-close-x:after{
+ &-close-x:after {
content: "\e61e";
font-family: "anticon";
cursor: pointer;
@@ -72,9 +72,8 @@
color: #999;
outline: none;
}
-
-
- &-content-btn{
+
+ &-content-btn {
float: right;
margin-top: 16px;
}
@@ -96,7 +95,7 @@
margin-top: @noticeMarginTop;
padding-top: @noticePadding;
padding-bottom: @noticePadding;
- max-height: 100px;
+ max-height: 150px;
transition: all .3s ease-in-out;
}