mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 13:47:02 +08:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Merge branch '0.8.0' of https://github.com/ant-design/ant-design into 0.8.0

Browse Source
This commit is contained in:
SimaQ 2015-08-04 14:42:05 +08:00
commit 5c9fdbaeb6
13 changed files with 442 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/alert/demo/closable.md
View File

@ -24,5 +24,4 @@ React.render(<div>
closable
onClose={onClose} />
</div>, document.getElementById('components-alert-demo-closable'));
````
````

25
components/notification/demo/basic.md Normal file
View File

@ -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'));
````

30
components/notification/demo/onclose.md Normal file
View File

@ -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'));
````

26
components/notification/demo/top.md Normal file
View File

@ -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'));
````

41
components/notification/demo/with-btn-onclose.md Normal file
View File

@ -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'));
````

33
components/notification/demo/with-btn.md Normal file
View File

@ -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'));
````

55
components/notification/demo/with-icon.md Normal file
View File

@ -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'));
````

92
components/notification/index.jsx Normal file
View File

@ -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;
}
};

17
components/notification/index.md
View File

@ -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 | 无 |

1
index.js
View File

@ -28,6 +28,7 @@ var antd = {
EnterAnimation: require('./components/enter-animation'),
Radio: require('./components/radio'),
RadioGroup: require('./components/radio/group'),
Notification: require('./components/notification'),
Alert: require('./components/alert'),
Validation: require('./components/validation'),
Tree: require('./components/Tree')

2
package.json
View File

@ -45,7 +45,7 @@
"rc-form-validation": "~2.4.7",
"rc-input-number": "~2.0.1",
"rc-menu": "~3.4.2",
"rc-notification": "~1.0.1",
"rc-notification": "~1.1.0",
"rc-pagination": "~1.1.0",
"rc-progress": "~1.0.0",
"rc-radio": "~2.0.0",

1
style/components/index.less
View File

@ -23,6 +23,7 @@
@import "divider";
@import "slider";
@import "radio";
@import "notification";
@import "tag";
@import "alert";
@import "tree";

120
style/components/notification.less Normal file
View File

@ -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;
}
}