From 42024530d03c3d8630747fed57945d8df0a797eb Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Wed, 29 Jul 2015 20:08:16 +0800 Subject: [PATCH] notification --- components/notification/demo/basic.md | 9 ++-- components/notification/demo/onclose.md | 40 ++++++++++++++++ .../notification/demo/with-btn-onclose.md | 48 +++++++++++++++++++ components/notification/demo/with-btn.md | 24 +++++----- components/notification/demo/with-icon.md | 11 +++-- components/notification/index.jsx | 23 ++++----- components/notification/index.md | 11 +++-- style/components/notification.less | 23 +++++---- 8 files changed, 139 insertions(+), 50 deletions(-) create mode 100644 components/notification/demo/onclose.md create mode 100644 components/notification/demo/with-btn-onclose.md diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md index b0647f3506..bf6281ac8d 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 0000000000..8436404601 --- /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 0000000000..13e72ea1cd --- /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 c442babe2f..0e1cde950b 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 a0137c417a..736a201801 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 e603c8bf93..282e9f3b5e 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 8fe2154720..8a600c9442 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 f2c8744896..b8fbbcd1e7 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; } -- GitLab