SimaQ
9 years ago
13 changed files with 442 additions and 4 deletions
@ -0,0 +1,25 @@ |
|||
# 基本 |
|||
|
|||
- order: 0 |
|||
|
|||
最简单的用法。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var notification = require('antd/lib/notification'); |
|||
|
|||
var openNotification = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案" |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
React.render( |
|||
<div> |
|||
<button className='ant-btn ant-btn-primary' onClick={openNotification}>基本</button> |
|||
</div>, |
|||
document.getElementById('components-notification-demo-basic')); |
|||
```` |
|||
@ -0,0 +1,30 @@ |
|||
# 回调函数 |
|||
|
|||
- order: 3 |
|||
|
|||
点击关闭按钮时触发回调函数。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var notification = require('antd/lib/notification'); |
|||
|
|||
var close = function() { |
|||
console.log("我被默认的关闭按钮关闭了！"); |
|||
} |
|||
|
|||
var openNotification = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", |
|||
onClose: close |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
React.render( |
|||
<div> |
|||
<button className='ant-btn ant-btn-primary' onClick={openNotification}>关闭按钮触发回调函数</button> |
|||
</div>, |
|||
document.getElementById('components-notification-demo-onclose')); |
|||
```` |
|||
@ -0,0 +1,26 @@ |
|||
# 距离顶部距离 |
|||
|
|||
- order: 1 |
|||
|
|||
自定义通知框距离顶部的距离，在`config`方法里设置`top`的值， **只在初始化时设置有效** ，默认距离顶部`24px`。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var notification = require('antd/lib/notification'); |
|||
|
|||
var openNotification = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案", |
|||
}; |
|||
notification.config({ |
|||
top:100 |
|||
}); |
|||
notification.open(args); |
|||
}; |
|||
|
|||
React.render( |
|||
<button className='ant-btn ant-btn-primary' onClick={openNotification}>距离顶部100px</button> |
|||
, document.getElementById('components-notification-demo-top')); |
|||
```` |
|||
@ -0,0 +1,41 @@ |
|||
# 自定义关闭按钮同时触发回调函数 |
|||
|
|||
- order: 5 |
|||
|
|||
关闭自定义的关闭按钮时触发回调函数，同时还可以在默认关闭按钮上添加另一个回调函数。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var notification = require('antd/lib/notification'); |
|||
|
|||
var close = function() { |
|||
// 自定义按钮关闭时的业务处理 |
|||
console.log("我被自定义的关闭按钮关闭了！"); |
|||
// 隐藏提醒框 |
|||
notification.close('singleKey1'); |
|||
}; |
|||
|
|||
var onClose = function() { |
|||
// 默认按钮关闭时的业务处理 |
|||
console.log("我被默认的关闭按钮关闭了！"); |
|||
} |
|||
|
|||
var btn = <button onClick={close} className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮并触发回调函数</button>; |
|||
|
|||
var openNotification = function() { |
|||
var key = 'manual' + new Date().getTime(); |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", |
|||
btn: btn, |
|||
key: 'singleKey1', |
|||
onClose: onClose |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
React.render( |
|||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>点击自定义的按钮触发回调函数</button> |
|||
, document.getElementById('components-notification-demo-with-btn-onclose')); |
|||
```` |
|||
@ -0,0 +1,33 @@ |
|||
# 自定义关闭按钮 |
|||
|
|||
- order: 4 |
|||
|
|||
自定义关闭按钮的样式和文字。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var notification = require('antd/lib/notification'); |
|||
|
|||
var close = function() { |
|||
notification.close('singleKey2'); |
|||
}; |
|||
|
|||
var btn = <button onClick={close} className="ant-btn ant-btn-primary ant-btn-sm">自定义关闭按钮</button>; |
|||
|
|||
var openNotification = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", |
|||
btn: btn, |
|||
key: 'singleKey2' |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
React.render( |
|||
<div> |
|||
<button className="ant-btn ant-btn-primary" onClick={openNotification}>自定义关闭按钮</button> |
|||
</div>, |
|||
document.getElementById('components-notification-demo-with-btn')); |
|||
```` |
|||
@ -0,0 +1,55 @@ |
|||
# 带有Icon的通知提醒框 |
|||
|
|||
- order: 2 |
|||
|
|||
通知提醒框左侧有Icon图标。 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var notification = require('antd/lib/notification'); |
|||
|
|||
var openNotificationSuccess = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", |
|||
icon: "success" |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
var openNotificationInfo = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", |
|||
icon: "info" |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
var openNotificationWarn = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", |
|||
icon: "warn" |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
var openNotificationError = function() { |
|||
var args = { |
|||
message: "这是标题", |
|||
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", |
|||
icon: "error" |
|||
}; |
|||
notification.open(args); |
|||
}; |
|||
|
|||
React.render(<div> |
|||
<button className="ant-btn ant-btn-primary" onClick={openNotificationSuccess}>Success</button> |
|||
<button className="ant-btn ant-btn-primary" onClick={openNotificationInfo}>Info</button> |
|||
<button className="ant-btn ant-btn-primary" onClick={openNotificationWarn}>Warn</button> |
|||
<button className="ant-btn ant-btn-primary" onClick={openNotificationError}>Error</button> |
|||
</div> |
|||
, document.getElementById('components-notification-demo-with-icon')); |
|||
```` |
|||
@ -0,0 +1,92 @@ |
|||
import Notification from 'rc-notification'; |
|||
|
|||
let top = 24; |
|||
|
|||
var notificationInstance; |
|||
|
|||
function getNotificationInstance() { |
|||
notificationInstance = notificationInstance || Notification.newInstance({ |
|||
prefixCls: 'ant-notification', |
|||
style: { |
|||
top: top, |
|||
right: 0 |
|||
} |
|||
}); |
|||
return notificationInstance; |
|||
} |
|||
|
|||
function notice(args) { |
|||
if (args.icon) { |
|||
let prefixCls = ' ant-notification-notice-content-icon-'; |
|||
let iconClass = 'anticon anticon-'; |
|||
switch (args.icon) { |
|||
case 'success': |
|||
iconClass += 'check-circle-o'; |
|||
break; |
|||
case 'info': |
|||
iconClass += 'info-circle-o'; |
|||
break; |
|||
case 'error': |
|||
iconClass += 'exclamation-circle-o'; |
|||
break; |
|||
case 'warn': |
|||
iconClass += 'question-circle-o'; |
|||
break; |
|||
default: |
|||
iconClass += 'info-circle'; |
|||
} |
|||
|
|||
getNotificationInstance().notice({ |
|||
content: <div> |
|||
<i className={iconClass + prefixCls + 'icon-' + args.icon + prefixCls + 'icon'}></i> |
|||
<p className={prefixCls + 'message'}>{args.message}</p> |
|||
<p className={prefixCls + 'description'}>{args.description}</p> |
|||
</div>, |
|||
duration: null, |
|||
closable: true, |
|||
onClose: args.onClose, |
|||
style: {} |
|||
}); |
|||
} else { |
|||
let prefixCls = 'ant-notification-notice-content-'; |
|||
if (!args.btn) { |
|||
getNotificationInstance().notice({ |
|||
content: <div> |
|||
<p className={prefixCls + 'message'}>{args.message}</p> |
|||
<p className={prefixCls + 'description'}>{args.description}</p> |
|||
</div>, |
|||
duration: null, |
|||
closable: true, |
|||
onClose: args.onClose, |
|||
style: {} |
|||
}); |
|||
} else { |
|||
getNotificationInstance().notice({ |
|||
content: <div> |
|||
<p className={prefixCls + 'message'}>{args.message}</p> |
|||
<p className={prefixCls + 'description'}>{args.description}</p> |
|||
<span className={prefixCls + 'btn'}> |
|||
{args.btn} |
|||
</span> |
|||
</div>, |
|||
duration: null, |
|||
closable: true, |
|||
onClose: args.onClose, |
|||
key: args.key, |
|||
style: {} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
open(args){ |
|||
notice(args); |
|||
}, |
|||
close(key){ |
|||
notificationInstance.removeNotice(key); |
|||
}, |
|||
config(options) { |
|||
top = isNaN(options.top) ? 24 : options.top; |
|||
} |
|||
}; |
|||
@ -1,8 +1,23 @@ |
|||
# Notification |
|||
|
|||
- category: Components |
|||
- chinese: 系统通知框 |
|||
- chinese: 通知提醒框 |
|||
|
|||
--- |
|||
|
|||
全局展示通知提醒信息。 |
|||
|
|||
## 何时使用 |
|||
|
|||
- 当系统需要在窗口右上角显示通知提醒信息时。 |
|||
|
|||
## API |
|||
|
|||
| 参数 | 说明 | 类型 | 默认值 | |
|||
|----------- |--------------------------------------------- | ----------- |--------| |
|||
| message | 通知提醒标题，必选 | String | 无 | |
|||
| description | 通知提醒内容，必选 | String | 无 | |
|||
| icon | 通知提醒框的左侧Icon，默认没有，有四种选择`success`、`info`、`warn`、`error` | String | 无 | |
|||
| btn | 自定义关闭按钮 | String | 无 | |
|||
| top | 通知提醒框距离顶部的距离，只在初始化时设置有效，默认`24` | Number | 24 | |
|||
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | 无 | |
|||
|
|||
@ -0,0 +1,120 @@ |
|||
@import "../mixins/index"; |
|||
|
|||
@notificationPrefixCls: ~"@{css-prefix}notification"; |
|||
|
|||
@noticeWidth: 335px; |
|||
@noticePadding: 16px; |
|||
@noticeMarginBottom: 10px; |
|||
|
|||
.@{notificationPrefixCls} { |
|||
position: fixed; |
|||
z-index: 1000; |
|||
width: @noticeWidth; |
|||
margin-right: 24px; |
|||
|
|||
&-notice { |
|||
padding: @noticePadding; |
|||
border-radius: @border-radius-base; |
|||
box-shadow: 0 0 4px @legend-border-color; |
|||
background: @body-background; |
|||
line-height: 1.5; |
|||
position: relative; |
|||
margin-bottom: @noticeMarginBottom; |
|||
overflow: hidden; |
|||
|
|||
&-content { |
|||
&-message { |
|||
font-size: 14px; |
|||
color: @text-color; |
|||
margin-bottom: 4px; |
|||
} |
|||
&-description { |
|||
font-size: @font-size-base; |
|||
color: @legend-color; |
|||
} |
|||
} |
|||
|
|||
&-content-icon { |
|||
position: relative; |
|||
&-message { |
|||
font-size: 14px; |
|||
color: @text-color; |
|||
margin-left: 51px; |
|||
margin-bottom: 4px; |
|||
} |
|||
&-description { |
|||
margin-left: 51px; |
|||
font-size: @font-size-base; |
|||
color: @legend-color; |
|||
} |
|||
&-icon { |
|||
position: absolute; |
|||
left: 16px; |
|||
top: 50%; |
|||
margin-top: -26px; |
|||
font-size: 35px; |
|||
|
|||
&-success{ |
|||
color: @success-color; |
|||
} |
|||
&-info{ |
|||
color: @primary-color; |
|||
} |
|||
&-warn{ |
|||
color: @warning-color; |
|||
} |
|||
&-error{ |
|||
color: @error-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-close-x:after { |
|||
content: "\e61e"; |
|||
font-family: "anticon"; |
|||
cursor: pointer; |
|||
.iconfont-size-under-12px(10px); |
|||
} |
|||
|
|||
&-close { |
|||
position: absolute; |
|||
right: 16px; |
|||
top: 10px; |
|||
color: #999; |
|||
outline: none; |
|||
} |
|||
|
|||
&-content-btn { |
|||
float: right; |
|||
margin-top: 16px; |
|||
} |
|||
} |
|||
|
|||
&-fade-enter { |
|||
left: @noticeWidth; |
|||
opacity: 0; |
|||
transition: all .3s ease-in-out; |
|||
} |
|||
|
|||
&-fade-enter&-fade-enter-active { |
|||
opacity: 1; |
|||
left: 0; |
|||
} |
|||
|
|||
&-fade-leave { |
|||
opacity: 1; |
|||
margin-bottom: @noticeMarginBottom; |
|||
padding-top: @noticePadding; |
|||
padding-bottom: @noticePadding; |
|||
max-height: 150px; |
|||
transition: all .3s ease-in-out; |
|||
} |
|||
|
|||
&-fade-leave&-fade-leave-active { |
|||
opacity: 0; |
|||
max-height: 0; |
|||
margin-bottom: 0; |
|||
padding-top: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue