mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
Alert component
This commit is contained in:
zhujun24
parent
e3b519601a
commit
eea48ffe16
22
components/alert/demo/basic.md
Normal file
22
components/alert/demo/basic.md
Normal file
@ -0,0 +1,22 @@
|
||||
# 基本
|
||||
|
||||
- order: 0
|
||||
|
||||
最简单的用法。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
|
||||
var Alert = require('antd/lib/alert');
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<Alert
|
||||
message="警告提示的文案"
|
||||
alertType={"success"}
|
||||
/>
|
||||
</div>,
|
||||
document.getElementById('components-alert-demo-basic'));
|
||||
|
||||
````
|
||||
33
components/alert/demo/callback.md
Normal file
33
components/alert/demo/callback.md
Normal file
@ -0,0 +1,33 @@
|
||||
# 回调函数
|
||||
|
||||
- order: 4
|
||||
|
||||
警告提示被关闭时触发的毁掉函数。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
|
||||
var Alert = require('antd/lib/alert');
|
||||
|
||||
var callback = function(){
|
||||
alert('我要被关闭啦！');
|
||||
}
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<Alert
|
||||
message="警告提示的文案"
|
||||
alertType={"warn"}
|
||||
callback={callback}
|
||||
/>
|
||||
<Alert
|
||||
title={'警告提示的标题'}
|
||||
message="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
|
||||
alertType={"error"}
|
||||
callback={callback}
|
||||
/>
|
||||
</div>,
|
||||
document.getElementById('components-alert-demo-callback'));
|
||||
|
||||
````
|
||||
27
components/alert/demo/close-type.md
Normal file
27
components/alert/demo/close-type.md
Normal file
@ -0,0 +1,27 @@
|
||||
# 关闭的样式
|
||||
|
||||
- order: 3
|
||||
|
||||
关闭有`不再提醒`和Iconfont的`cross`两种样式，默认为后者，当警告提示含有标题时，关闭样式只能为默认值。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
|
||||
var Alert = require('antd/lib/alert');
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<Alert
|
||||
message="警告提示的文案"
|
||||
alertType={"success"}
|
||||
/>
|
||||
<Alert
|
||||
message="警告提示的文案"
|
||||
alertType={"info"}
|
||||
alertClose={'text'}
|
||||
/>
|
||||
</div>,
|
||||
document.getElementById('components-alert-demo-close-type'));
|
||||
|
||||
````
|
||||
34
components/alert/demo/style.md
Normal file
34
components/alert/demo/style.md
Normal file
@ -0,0 +1,34 @@
|
||||
# 四种样式
|
||||
|
||||
- order: 1
|
||||
|
||||
共有四种样式`success`、`info`、`warn`、`error`。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
|
||||
var Alert = require('antd/lib/alert');
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<Alert
|
||||
message={"警告提示的文案"}
|
||||
alertType={"success"}
|
||||
/>
|
||||
<Alert
|
||||
message={"警告提示的文案警告提示的文案"}
|
||||
alertType={"info"}
|
||||
/>
|
||||
<Alert
|
||||
message={"警告提示的文案"}
|
||||
alertType={"warn"}
|
||||
/>
|
||||
<Alert
|
||||
message={"警告提示的文案警告提示的文案"}
|
||||
alertType={"error"}
|
||||
/>
|
||||
</div>,
|
||||
document.getElementById('components-alert-demo-style'));
|
||||
|
||||
````
|
||||
38
components/alert/demo/title.md
Normal file
38
components/alert/demo/title.md
Normal file
@ -0,0 +1,38 @@
|
||||
# 含有标题
|
||||
|
||||
- order: 2
|
||||
|
||||
警告提示的标题文案，当含有标题时，关闭样式只能为默认值。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
|
||||
var Alert = require('antd/lib/alert');
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<Alert
|
||||
title={'警告提示的标题'}
|
||||
message="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
|
||||
alertType={"success"}
|
||||
/>
|
||||
<Alert
|
||||
title={'警告提示的标题'}
|
||||
message="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
|
||||
alertType={"info"}
|
||||
/>
|
||||
<Alert
|
||||
title={'警告提示的标题'}
|
||||
message="警告提示的文案警告提示的文案警告提示的文案"
|
||||
alertType={"warn"}
|
||||
/>
|
||||
<Alert
|
||||
title={'警告提示的标题'}
|
||||
message="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
|
||||
alertType={"error"}
|
||||
/>
|
||||
</div>,
|
||||
document.getElementById('components-alert-demo-title'));
|
||||
|
||||
````
|
||||
63
components/alert/index.jsx
Normal file
63
components/alert/index.jsx
Normal file
@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
|
||||
export default React.createClass({
|
||||
getDefaultProps() {
|
||||
return {prefixCls: 'ant-alert'};
|
||||
},
|
||||
getInitialState () {
|
||||
return {display: 'block'};
|
||||
},
|
||||
handleClose () {
|
||||
if (this.props.callback) {
|
||||
this.props.callback();
|
||||
}
|
||||
this.setState({
|
||||
display: 'none'
|
||||
});
|
||||
},
|
||||
render () {
|
||||
var iconClass = this.props.title ? 'ant-alert-with-title-icon anticon-' : 'ant-alert-icon anticon-';
|
||||
switch (this.props.alertType) {
|
||||
case 'success':
|
||||
iconClass += 'check-circle';
|
||||
break;
|
||||
case 'info':
|
||||
iconClass += 'question-circle';
|
||||
break;
|
||||
case 'error':
|
||||
case 'warn':
|
||||
iconClass += 'info-circle';
|
||||
break;
|
||||
default:
|
||||
iconClass += 'default';
|
||||
}
|
||||
if (this.props.title) {
|
||||
return (
|
||||
<div style={{display: this.state.display}} className={'ant-alert-with-title ant-alert-with-title-' + this.props.alertType}>
|
||||
<i className={'anticon ' + iconClass}></i>
|
||||
<p className={'ant-alert-with-title-title'}>{this.props.title}</p>
|
||||
<span className={'ant-alert-with-title-message'}>{this.props.message}</span>
|
||||
<i onClick={this.handleClose} className={'anticon anticon-cross ant-alert-with-title-close-icon'}></i>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.alertClose === 'text') {
|
||||
return (
|
||||
<div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.alertType}>
|
||||
<i className={'anticon ' + iconClass}></i>
|
||||
<span className={'ant-alert-message'}>{this.props.message}</span>
|
||||
<a onClick={this.handleClose} className={'ant-alert-close-text'}>不再提醒</a>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.alertType}>
|
||||
<i className={'anticon ' + iconClass}></i>
|
||||
<span className={'ant-alert-message'}>{this.props.message}</span>
|
||||
<i onClick={this.handleClose} className={'anticon anticon-cross ant-alert-close-icon'}></i>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,6 +1,22 @@
|
||||
# Alert
|
||||
|
||||
- category: CSS
|
||||
- chinese: 通知栏
|
||||
- category: Components
|
||||
- chinese: 警告提示
|
||||
|
||||
---
|
||||
|
||||
警告提示。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统需要向用户显示警告的信息时。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| alertType | 必选参数，指定警告提示的样式，目前有有四种选择`success`、`info`、`warn`、`error` | String | 无 |
|
||||
| alertClose | 可选参数，指定关闭的样式，目前有两种选择`text`、`icon` | String | icon |
|
||||
| title | 可选参数，指定标题 | String | 无 |
|
||||
| message | 必选参数，指定内容 | String | 无 |
|
||||
| callback | 可选参数，指定关闭时触发的回调函数 | Function | 无 |
|
||||
|
||||
3
index.js
3
index.js
@ -23,7 +23,8 @@ var antd = {
|
||||
message: require('./components/message'),
|
||||
Slider: require('./components/slider'),
|
||||
Radio: require('./components/radio'),
|
||||
RadioGroup: require('./components/radio/group')
|
||||
RadioGroup: require('./components/radio/group'),
|
||||
Alert: require('./components/alert')
|
||||
};
|
||||
|
||||
module.exports = antd;
|
||||
|
||||
167
style/components/alert.less
Normal file
167
style/components/alert.less
Normal file
@ -0,0 +1,167 @@
|
||||
@import "../mixins/index";
|
||||
|
||||
@alertPrefixClass: ~"@{css-prefix}alert";
|
||||
@alertTitlePrefixClass: ~"@{css-prefix}alert-with-title";
|
||||
|
||||
.@{alertPrefixClass} {
|
||||
position: relative;
|
||||
padding: 8px 8px 8px 16px;
|
||||
border-radius: @border-radius-base;
|
||||
color: @legend-color;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&-icon {
|
||||
margin-right: 8px;
|
||||
font-size: @input-font-size-lg;
|
||||
}
|
||||
|
||||
&-message {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&-success {
|
||||
border: 1px solid tint(@success-color, 50%);
|
||||
background-color: tint(@success-color, 90%);
|
||||
.anticon {
|
||||
color: #87d068;
|
||||
}
|
||||
.anticon.ant-alert-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
border: 1px solid tint(@primary-color, 50%);
|
||||
background-color: tint(@primary-color, 90%);
|
||||
.anticon {
|
||||
color: #3fc7fa;
|
||||
}
|
||||
.anticon.ant-alert-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warn {
|
||||
border: 1px solid tint(@warning-color, 50%);
|
||||
background-color: tint(@warning-color, 90%);
|
||||
.anticon {
|
||||
color: #fd9856;
|
||||
}
|
||||
.anticon.ant-alert-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
border: 1px solid tint(@error-color, 50%);
|
||||
background-color: tint(@error-color, 90%);
|
||||
.anticon {
|
||||
color: #ff6600;
|
||||
}
|
||||
.anticon.ant-alert-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
.iconfont-size-under-12px(10px);
|
||||
color: @legend-color;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&-close-text {
|
||||
color: @legend-color;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&-close-text:active {
|
||||
color: shade(@primary-color, 5%);
|
||||
}
|
||||
|
||||
&-close-text:hover {
|
||||
color: tint(@primary-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{alertTitlePrefixClass} {
|
||||
padding: 16px 16px 16px 69px;
|
||||
position: relative;
|
||||
border-radius: @border-radius-base;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
margin-top: -22px;
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
color: @legend-color;
|
||||
cursor: pointer;
|
||||
.iconfont-size-under-12px(10px);
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: @input-font-size-lg;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&-message {
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
}
|
||||
|
||||
&-success {
|
||||
border: 1px solid tint(@success-color, 50%);
|
||||
background-color: tint(@success-color, 90%);
|
||||
.anticon {
|
||||
color: #87d068;
|
||||
}
|
||||
.anticon.ant-alert-with-title-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
border: 1px solid tint(@primary-color, 50%);
|
||||
background-color: tint(@primary-color, 90%);
|
||||
.anticon {
|
||||
color: #3fc7fa;
|
||||
}
|
||||
.anticon.ant-alert-with-title-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warn {
|
||||
border: 1px solid tint(@warning-color, 50%);
|
||||
background-color: tint(@warning-color, 90%);
|
||||
.anticon {
|
||||
color: #fd9856;
|
||||
}
|
||||
.anticon.ant-alert-with-title-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
border: 1px solid tint(@error-color, 50%);
|
||||
background-color: tint(@error-color, 90%);
|
||||
.anticon {
|
||||
color: #ff6600;
|
||||
}
|
||||
.anticon.ant-alert-with-title-close-icon {
|
||||
color: @legend-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,3 +24,4 @@
|
||||
@import "divider";
|
||||
@import "slider";
|
||||
@import "radio";
|
||||
@import "alert";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user