Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
e4b9ce0f
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e4b9ce0f
编写于
7月 29, 2015
作者:
偏
偏右
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #86 from zhujun24/alert
fixed three problems
上级
ee71eb88
a45bcd4d
变更
10
显示空白变更内容
内联
并排
Showing
10 changed file
with
147 addition
and
150 deletion
+147
-150
components/alert/demo/basic.md
components/alert/demo/basic.md
+1
-1
components/alert/demo/closable.md
components/alert/demo/closable.md
+21
-0
components/alert/demo/close-type.md
components/alert/demo/close-type.md
+3
-3
components/alert/demo/description.md
components/alert/demo/description.md
+36
-0
components/alert/demo/message.md
components/alert/demo/message.md
+0
-36
components/alert/demo/onClose.md
components/alert/demo/onClose.md
+5
-3
components/alert/demo/style.md
components/alert/demo/style.md
+5
-5
components/alert/index.jsx
components/alert/index.jsx
+17
-13
components/alert/index.md
components/alert/index.md
+5
-4
style/components/alert.less
style/components/alert.less
+54
-85
未找到文件。
components/alert/demo/basic.md
浏览文件 @
e4b9ce0f
...
...
@@ -12,7 +12,7 @@ var Alert = require('antd/lib/alert');
React
.
render
(
<
div
>
<
Alert
description
=
"警告提示的文案"
message
=
"警告提示的文案"
type
=
"success"
/>
</
div
>,
...
...
components/alert/demo/closable.md
0 → 100644
浏览文件 @
e4b9ce0f
# 可关闭的警告提示
-
order: 1
显示关闭按钮,点击可关闭警告提示。
---
````
jsx
var
Alert
=
require
(
'
antd/lib/alert
'
);
React
.
render
(
<
div
>
<
Alert
message
=
"警告提示的文案"
type
=
"success"
closable
=
"true"
/>
</
div
>,
document
.
getElementById
(
'
components-alert-demo-closable
'
));
````
components/alert/demo/close-type.md
浏览文件 @
e4b9ce0f
# 自定义关闭
-
order:
3
-
order:
4
可以自定义关闭,自定义的文字会替换原先的关闭
`Icon`
,当警告提示含有标题时,关闭样式只能为默认值
。
可以自定义关闭,自定义的文字会替换原先的关闭
`Icon`
。
---
...
...
@@ -13,7 +13,7 @@ var link = <a href="javascript:;">不再提醒</a>
React
.
render
(
<
div
>
<
Alert
description
=
"警告提示的文案"
message
=
"警告提示的文案"
type
=
"info"
closeText
=
{
link
}
/>
...
...
components/alert/demo/description.md
0 → 100644
浏览文件 @
e4b9ce0f
# 含有辅助性文字介绍
-
order: 2
含有辅助性文字介绍的警告提示。
---
````
jsx
var
Alert
=
require
(
'
antd/lib/alert
'
);
React
.
render
(
<
div
>
<
Alert
message
=
"警告提示的文案"
description
=
"警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type
=
"success"
/>
<
Alert
message
=
"警告提示的文案"
description
=
"警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type
=
"info"
/>
<
Alert
message
=
"警告提示的文案"
description
=
"警告提示的辅助性文字介绍"
type
=
"warn"
/>
<
Alert
message
=
"警告提示的文案"
description
=
"警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type
=
"error"
/>
</
div
>,
document
.
getElementById
(
'
components-alert-demo-description
'
));
````
components/alert/demo/message.md
已删除
100644 → 0
浏览文件 @
ee71eb88
# 含有标题
-
order: 2
警告提示的标题文案,当含有标题时,关闭样式只能为默认值。
---
````
jsx
var
Alert
=
require
(
'
antd/lib/alert
'
);
React
.
render
(
<
div
>
<
Alert
message
=
"警告提示的标题"
description
=
"警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
type
=
"success"
/>
<
Alert
message
=
"警告提示的标题"
description
=
"警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
type
=
"info"
/>
<
Alert
message
=
"警告提示的标题"
description
=
"警告提示的文案警告提示的文案警告提示的文案"
type
=
"warn"
/>
<
Alert
message
=
"警告提示的标题"
description
=
"警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
type
=
"error"
/>
</
div
>,
document
.
getElementById
(
'
components-alert-demo-message
'
));
````
components/alert/demo/onClose.md
浏览文件 @
e4b9ce0f
# 回调函数
-
order:
4
-
order:
5
警告提示被关闭时触发的回调函数。
警告提示被关闭时触发的回调函数
,必须设置
`closable="true"`
。
---
...
...
@@ -16,14 +16,16 @@ var onClose = function(){
React
.
render
(
<
div
>
<
Alert
description
=
"警告提示的文案"
message
=
"警告提示的文案"
type
=
"warn"
closable
=
"true"
onClose
=
{
onClose
}
/>
<
Alert
message
=
"警告提示的标题"
description
=
"警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
type
=
"error"
closable
=
"true"
onClose
=
{
onClose
}
/>
</
div
>,
...
...
components/alert/demo/style.md
浏览文件 @
e4b9ce0f
# 四种样式
-
order:
1
-
order:
3
共有四种样式
`success`
、
`info`
、
`warn`
、
`error`
。
...
...
@@ -12,19 +12,19 @@ var Alert = require('antd/lib/alert');
React
.
render
(
<
div
>
<
Alert
description
=
"警告提示的文案"
message
=
"警告提示的文案"
type
=
"success"
/>
<
Alert
description
=
"警告提示的文案警告提示的文案"
message
=
"警告提示的文案警告提示的文案"
type
=
"info"
/>
<
Alert
description
=
"警告提示的文案"
message
=
"警告提示的文案"
type
=
"warn"
/>
<
Alert
description
=
"警告提示的文案警告提示的文案"
message
=
"警告提示的文案警告提示的文案"
type
=
"error"
/>
</
div
>,
...
...
components/alert/index.jsx
浏览文件 @
e4b9ce0f
...
...
@@ -16,7 +16,7 @@ export default React.createClass({
});
},
render
()
{
var
iconClass
=
this
.
props
.
message
?
'
ant-alert-with-message
-icon anticon-
'
:
'
ant-alert-icon anticon-
'
;
var
iconClass
=
this
.
props
.
description
?
'
ant-alert-with-description
-icon anticon-
'
:
'
ant-alert-icon anticon-
'
;
switch
(
this
.
props
.
type
)
{
case
'
success
'
:
iconClass
+=
'
check-circle
'
;
...
...
@@ -31,15 +31,17 @@ export default React.createClass({
default
:
iconClass
+=
'
default
'
;
}
if
(
this
.
props
.
message
)
{
if
(
this
.
props
.
description
)
{
let
close
=
this
.
props
.
closable
===
'
true
'
?
<
a
onClick
=
{
this
.
handleClose
}
className
=
{
'
ant-alert-with-description-close-icon
'
}
><
span
className
=
'ant-alert-with-description-close-icon-x'
></
span
></
a
>
:
''
;
return
(
<
div
style
=
{
{
display
:
this
.
state
.
display
}
}
className
=
{
'
ant-alert-with-message ant-alert-with-message-
'
+
this
.
props
.
type
}
>
<
div
style
=
{
{
display
:
this
.
state
.
display
}
}
className
=
{
'
ant-alert-with-description ant-alert-with-description-
'
+
this
.
props
.
type
}
>
<
i
className
=
{
'
anticon
'
+
iconClass
}
></
i
>
<
p
className
=
{
'
ant-alert-with-message-message
'
}
>
{
this
.
props
.
message
}
</
p
>
<
span
className
=
{
'
ant-alert-with-message-description
'
}
>
{
this
.
props
.
description
}
</
span
>
<
a
onClick
=
{
this
.
handleClose
}
className
=
{
'
ant-alert-with-message-close-icon
'
}
>
<
span
className
=
'ant-alert-with-message-close-icon-x'
></
span
>
</
a
>
<
p
className
=
{
'
ant-alert-with-description-message
'
}
>
{
this
.
props
.
message
}
</
p
>
<
span
className
=
{
'
ant-alert-with-description-description
'
}
>
{
this
.
props
.
description
}
</
span
>
{
close
}
</
div
>
);
}
else
{
...
...
@@ -47,18 +49,20 @@ export default React.createClass({
return
(
<
div
style
=
{
{
display
:
this
.
state
.
display
}
}
className
=
{
'
ant-alert ant-alert-
'
+
this
.
props
.
type
}
>
<
i
className
=
{
'
anticon
'
+
iconClass
}
></
i
>
<
span
className
=
{
'
ant-alert-description
'
}
>
{
this
.
props
.
description
}
</
span
>
<
span
className
=
{
'
ant-alert-description
'
}
>
{
this
.
props
.
message
}
</
span
>
<
span
onClick
=
{
this
.
handleClose
}
className
=
{
'
ant-alert-close-text
'
}
>
{
this
.
props
.
closeText
}
</
span
>
</
div
>
);
}
else
{
let
close
=
this
.
props
.
closable
===
'
true
'
?
<
a
onClick
=
{
this
.
handleClose
}
className
=
{
'
ant-alert-close-icon
'
}
>
<
span
className
=
'ant-alert-close-icon-x'
></
span
>
</
a
>
:
''
;
return
(
<
div
style
=
{
{
display
:
this
.
state
.
display
}
}
className
=
{
'
ant-alert ant-alert-
'
+
this
.
props
.
type
}
>
<
i
className
=
{
'
anticon
'
+
iconClass
}
></
i
>
<
span
className
=
{
'
ant-alert-description
'
}
>
{
this
.
props
.
description
}
</
span
>
<
a
onClick
=
{
this
.
handleClose
}
className
=
{
'
ant-alert-close-icon
'
}
>
<
span
className
=
'ant-alert-close-icon-x'
></
span
>
</
a
>
<
span
className
=
{
'
ant-alert-description
'
}
>
{
this
.
props
.
message
}
</
span
>
{
close
}
</
div
>
);
}
...
...
components/alert/index.md
浏览文件 @
e4b9ce0f
...
...
@@ -16,7 +16,8 @@
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- |-------|
| type | 必选参数,指定警告提示的样式,有四种选择
`success`
、
`info`
、
`warn`
、
`error`
| String | 无 |
| closable | 可选参数,值为字符串
`true`
时显示关闭按钮,默认不显示 | String | 无 |
| closeText | 可选参数,自定义关闭 | String | 无 |
| message |
可选参数,标题
| String | 无 |
| description |
必选参数,内容
| String | 无 |
| message |
必选参数,警告提示内容
| String | 无 |
| description |
可选参数,警告提示的辅助性文字介绍
| String | 无 |
| onClose | 可选参数,关闭时触发的回调函数 | Function | 无 |
style/components/alert.less
浏览文件 @
e4b9ce0f
@import "../mixins/index";
@alertPrefixClass: ~"@{css-prefix}alert";
@alertTitlePrefixClass: ~"@{css-prefix}alert-with-
message
";
@alertTitlePrefixClass: ~"@{css-prefix}alert-with-
description
";
.@{alertPrefixClass} {
position: relative;
...
...
@@ -23,7 +23,7 @@
}
&-success {
border: 1px solid tint(@success-color,
5
0%);
border: 1px solid tint(@success-color,
8
0%);
background-color: tint(@success-color, 90%);
.anticon {
color: @success-color;
...
...
@@ -31,7 +31,7 @@
}
&-info {
border: 1px solid tint(@primary-color,
5
0%);
border: 1px solid tint(@primary-color,
8
0%);
background-color: tint(@primary-color, 90%);
.anticon {
color: @primary-color;
...
...
@@ -39,7 +39,7 @@
}
&-warn {
border: 1px solid tint(@warning-color,
5
0%);
border: 1px solid tint(@warning-color,
8
0%);
background-color: tint(@warning-color, 90%);
.anticon {
color: @warning-color;
...
...
@@ -47,14 +47,14 @@
}
&-error {
border: 1px solid tint(@error-color,
5
0%);
border: 1px solid tint(@error-color,
8
0%);
background-color: tint(@error-color, 90%);
.anticon {
color: @error-color;
}
}
&-close-icon {
&-close-icon
, &-with-description-close-icon
{
.iconfont-size-under-12px(10px);
position: absolute;
right: 8px;
...
...
@@ -83,11 +83,11 @@
}
&-close-text {
float: right;
position: absolute;
right: 16px;
}
}
.@{alertTitlePrefixClass}
{
&-with-description
{
padding: 16px 16px 16px 69px;
position: relative;
border-radius: @border-radius-base;
...
...
@@ -104,7 +104,7 @@
&-close-icon {
position: absolute;
top: 12
px;
top: 17
px;
right: 16px;
cursor: pointer;
.iconfont-size-under-12px(10px);
...
...
@@ -121,7 +121,7 @@
}
&-success {
border: 1px solid tint(@success-color, 5
0%);
border: 1px solid tint(@success-color, 8
0%);
background-color: tint(@success-color, 90%);
.anticon {
color: @success-color;
...
...
@@ -129,7 +129,7 @@
}
&-info {
border: 1px solid tint(@primary-color, 5
0%);
border: 1px solid tint(@primary-color, 8
0%);
background-color: tint(@primary-color, 90%);
.anticon {
color: @primary-color;
...
...
@@ -137,7 +137,7 @@
}
&-warn {
border: 1px solid tint(@warning-color, 5
0%);
border: 1px solid tint(@warning-color, 8
0%);
background-color: tint(@warning-color, 90%);
.anticon {
color: @warning-color;
...
...
@@ -145,42 +145,11 @@
}
&-error {
border: 1px solid tint(@error-color, 5
0%);
border: 1px solid tint(@error-color, 8
0%);
background-color: tint(@error-color, 90%);
.anticon {
color: @error-color;
}
}
&-close-icon {
.iconfont-size-under-12px(10px);
float: right;
color: #999;
transition: color .3s ease;
width: 12px;
height: 12px;
overflow: hidden;
position: absolute;
right: 16px;
top: 12px;
&-x {
position: absolute;
top: -4px;
&:before {
font-weight: 700;
text-shadow: 0 1px 0 #fff;
content: "\e61e";
font-family: "anticon";
}
}
&:hover {
color: #444;
}
}
&-close-text {
float: right;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录