From 2eb253f0ed9aa0d13198d28ec8a6cf8a46c66dae Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Wed, 29 Jul 2015 15:22:47 +0800 Subject: [PATCH] fixed close style --- components/alert/demo/basic.md | 2 +- components/alert/demo/close-type.md | 7 +- .../alert/demo/{callback.md => onClose.md} | 8 +- components/alert/index.jsx | 14 +- components/alert/index.md | 4 +- style/components/alert.less | 146 +++++++----------- 6 files changed, 79 insertions(+), 102 deletions(-) rename components/alert/demo/{callback.md => onClose.md} (79%) diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md index eecfe6289..7cf9d4e45 100644 --- a/components/alert/demo/basic.md +++ b/components/alert/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -最简单的用法。 +最简单的用法，适用于简短的警告提示。 --- diff --git a/components/alert/demo/close-type.md b/components/alert/demo/close-type.md index 5519163c3..3db2b2cc6 100644 --- a/components/alert/demo/close-type.md +++ b/components/alert/demo/close-type.md @@ -1,20 +1,21 @@ -# 自定义关闭的文字 +# 自定义关闭 - order: 3 -可以自定义关闭的文字，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。 +可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。 --- ````jsx var Alert = require('antd/lib/alert'); +var link = 不再提醒 React.render(
, document.getElementById('components-alert-demo-close-type')); diff --git a/components/alert/demo/callback.md b/components/alert/demo/onClose.md similarity index 79% rename from components/alert/demo/callback.md rename to components/alert/demo/onClose.md index 4ab0fab41..81dbdc271 100644 --- a/components/alert/demo/callback.md +++ b/components/alert/demo/onClose.md @@ -9,7 +9,7 @@ ````jsx var Alert = require('antd/lib/alert'); -var callback = function(){ +var onClose = function(){ console.log('我要被关闭啦！'); } @@ -18,14 +18,14 @@ React.render( , -document.getElementById('components-alert-demo-callback')); +document.getElementById('components-alert-demo-onclose')); ```` diff --git a/components/alert/index.jsx b/components/alert/index.jsx index 28e933eca..9129bc082 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -8,8 +8,8 @@ export default React.createClass({ return {display: 'block'}; }, handleClose () { - if (this.props.callback) { - this.props.callback(); + if (this.props.onClose) { + this.props.onClose(); } this.setState({ display: 'none' @@ -37,7 +37,9 @@ export default React.createClass({

{this.props.message}

{this.props.description} - + + + ); } else { @@ -46,7 +48,7 @@ export default React.createClass({
{this.props.description} - {this.props.closeText} + {this.props.closeText}
); } else { @@ -54,7 +56,9 @@ export default React.createClass({
{this.props.description} - + + +
); } diff --git a/components/alert/index.md b/components/alert/index.md index c81ed247b..f298f5f69 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -16,7 +16,7 @@ | 参数 | 说明 | 类型 | 默认值 | |----------- |--------------------------------------------------------- | ---------- |-------| | type | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` | String | 无 | -| closeText | 可选参数，关闭的文字 | String | 无 | +| closeText | 可选参数，自定义关闭 | String | 无 | | message | 可选参数，标题 | String | 无 | | description | 必选参数，内容 | String | 无 | -| callback | 可选参数，关闭时触发的回调函数 | Function | 无 | +| onClose | 可选参数，关闭时触发的回调函数 | Function | 无 | diff --git a/style/components/alert.less b/style/components/alert.less index 4b2e63392..63a88c0f7 100644 --- a/style/components/alert.less +++ b/style/components/alert.less @@ -28,16 +28,6 @@ .anticon { color: @success-color; } - .anticon.ant-alert-close-icon { - color: @legend-color; - - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } - } } &-info { @@ -46,16 +36,6 @@ .anticon { color: @primary-color; } - .anticon.ant-alert-close-icon { - color: @legend-color; - - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } - } } &-warn { @@ -64,16 +44,6 @@ .anticon { color: @warning-color; } - .anticon.ant-alert-close-icon { - color: @legend-color; - - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } - } } &-error { @@ -82,34 +52,41 @@ .anticon { color: @error-color; } - .anticon.ant-alert-close-icon { - color: @legend-color; - - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } - } } &-close-icon { .iconfont-size-under-12px(10px); - cursor: pointer; - float: right; + position: absolute; + right: 8px; + top: 50%; + margin-top: -6px; + filter: alpha(opacity=20); + opacity: .2; + transition: opacity .3s ease; + width: 12px; + height: 12px; + overflow: hidden; + + &-x { + position: absolute; + top: -3px; + &:before { + font-weight: 700; + text-shadow: 0 1px 0 #fff; + color: #000; + content: "\e61e"; + font-family: "anticon"; + } + } + + &:hover { + opacity: 1; + filter: alpha(opacity=100); + } } &-close-text { - cursor: pointer; float: right; - color: @legend-color; - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } } } @@ -151,16 +128,6 @@ .anticon { color: @success-color; } - .anticon.ant-alert-with-message-close-icon { - color: @legend-color; - - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } - } } &-info { @@ -169,16 +136,6 @@ .anticon { color: @primary-color; } - .anticon.ant-alert-with-message-close-icon { - color: @legend-color; - - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } - } } &-warn { @@ -187,16 +144,6 @@ .anticon { color: @warning-color; } - .anticon.ant-alert-with-message-close-icon { - color: @legend-color; - - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); - } - } } &-error { @@ -205,15 +152,40 @@ .anticon { color: @error-color; } - .anticon.ant-alert-with-message-close-icon { - color: @legend-color; + } - &:active { - color: shade(@primary-color, 5%); - } - &:hover { - color: tint(@primary-color, 5%); + &-close-icon { + .iconfont-size-under-12px(10px); + float: right; + filter: alpha(opacity=20); + opacity: .2; + transition: opacity .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; + color: #000; + content: "\e61e"; + font-family: "anticon"; } } + + &:hover { + opacity: 1; + filter: alpha(opacity=100); + } + } + + &-close-text { + float: right; } } \ No newline at end of file