diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md index 8d695fc1a8..8e6720bc50 100644 --- a/components/button/demo/button-group.md +++ b/components/button/demo/button-group.md @@ -32,12 +32,12 @@

带图标按钮组合

@@ -56,7 +56,7 @@

尺寸

diff --git a/components/confirm/demo/basic.md b/components/confirm/demo/basic.md new file mode 100644 index 0000000000..73068be957 --- /dev/null +++ b/components/confirm/demo/basic.md @@ -0,0 +1,40 @@ +# 基本 + +- order: 0 + +使用很简单。 + +--- + +````jsx +var confirm = antd.confirm; + +var Test = React.createClass({ + getInitialState(){ + return { + visible:false + }; + }, + showConfirm(){ + confirm({ + title:"第一个 confirm", + content:"confirm 内容", + onOk:this.handleOk, + onCancel:this.handleCancel + }) + }, + handleOk(close){ + close(); + }, + handleCancel(close){ + close(); + }, + render(){ + return
+ +
; + } +}); + +React.render( , document.getElementById('components-confirm-demo-basic')); +```` diff --git a/components/confirm/index.jsx b/components/confirm/index.jsx new file mode 100644 index 0000000000..7edcd6e390 --- /dev/null +++ b/components/confirm/index.jsx @@ -0,0 +1,56 @@ +var React = require('react'); +var Dialog = require('rc-dialog'); +var div; + +module.exports = function (props) { + var d; + props = props || {}; + props.iconClassName = props.iconClassName || 'anticon-exclamation-circle'; + props.animation = 'zoom'; + props.maskAnimation = 'fade'; + var width = props.width || 375; + + function close() { + d.setState({ + visible: false + }); + } + + function onCancel() { + if (props.onCancel) { + props.onCancel(close); + } else { + close(); + } + } + + function onOk() { + if (props.onOk) { + props.onOk(close); + } else { + close(); + } + } + + var body =
+ + {props.title} +
{props.content}
+
+ var footer =
+ + +
; + + if (!div) { + div = document.createElement('div'); + document.body.appendChild(div); + } + + React.render( +
{body} {footer}
+ + , div, function () { + d = this; + }); +}; diff --git a/components/confirm/index.md b/components/confirm/index.md index 0fcfb21115..a16653090f 100644 --- a/components/confirm/index.md +++ b/components/confirm/index.md @@ -7,27 +7,18 @@ ## 何时使用 -当你再次和我说起 青春时的故事 -我正在下着雨的无锡 乞讨着生活的权利 -前一天早晨 我睁开眼已是江南 -他们说柔软的地方 总会发生柔软的事 -那年的舞台上 说谎的人一直歌唱 -大不列颠的广场上 有没有鸽子飞翔 -青春和瞎子一起 变成了哑巴 -今天扯平了我们的当年 分食了理想 +当需要用户确认时使用 -## 为什么使用 +## api -你可知道你的名字解释了我的一生 -碎了满天的往事如烟 与世无争 -当你装满行李 回到故乡 -我的余生 却再也没有北方 +为一个方法，参数为 object，具体属性如下 -有一天我又梦见 那个装满乐器的教室 -你还站在门口 一脸羞涩的表情 -你说这么多年你还没找到 让你心动的男人 -我说去他妈的爱情 都是过眼云烟的东西 - -我的余生 都用来寻找北方 +| 参数 | 说明 | 类型 | 默认值 | +|------------|----------------|------------------|--------------| +| title | 标题 | React.Element|String | 无 | +| onOk | 点击确定回调，参数为关闭函数 | function | 无 | +| onCancel | 取消回调，参数为关闭函数 | function | 无 | +| width | 宽度 | String or Number | 375 | +| iconClassName | 图标央样式名 | String | anticon-exclamation-circle | diff --git a/components/iconfont/index.md b/components/iconfont/index.md index 58d8d993e9..e9a5671628 100644 --- a/components/iconfont/index.md +++ b/components/iconfont/index.md @@ -79,36 +79,36 @@ caret-circleo-left
  • - - angle-circle-right + + circle-right
  • - - angle-circle-left + + circle-left
  • - - angle-circleo-right + + circleo-right
  • - - angle-circleo-left + + circleo-left
  • - - angle-double-right + + double-right
  • - - angle-double-left + + double-left
  • - - angle-verticle-right + + verticle-right
  • - - angle-verticle-left + + verticle-left
  • diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md index 355372b8a5..a2bc1f41f7 100644 --- a/components/modal/demo/basic.md +++ b/components/modal/demo/basic.md @@ -7,16 +7,44 @@ --- ````jsx -var modal = antd.modal; +var Modal = antd.Modal; -function showModal() { - modal({ - title: '第一个 Modal', - content:

    对话框的内容

    - }); -} +var Test = React.createClass({ + getInitialState(){ + return { + visible:false + }; + }, + showModal(){ + this.setState({ + visible:true + }); + }, + handleOk(){ + alert('ok'); + var self = this; + setTimeout(function(){ + self.setState({ + visible:false + }); + },200); + }, + handleCancel(){ + var self = this; + alert('cancel'); + setTimeout(function(){ + self.setState({ + visible:false + }); + },200); + }, + render(){ + return
    + +

    对话框的内容

     +
    ; + } +}); -React.render( - -, document.getElementById('components-modal-demo-basic')); +React.render( , document.getElementById('components-modal-demo-basic')); ```` diff --git a/components/modal/demo/next.md b/components/modal/demo/next.md deleted file mode 100644 index d16ee39ca1..0000000000 --- a/components/modal/demo/next.md +++ /dev/null @@ -1,35 +0,0 @@ -# 确定取消 - -- order: 1 - -可以通过 `onOk` 和 `onCancel` 触发下一步的操作。 - ---- - -````jsx -var modal = antd.modal; - -function showModal() { - var ref; - - function saveRef(c){ - ref = c; - } - - modal({ - title: '点击确定取消', - content:

    name:

    , - onCancel: function() { - alert('cancel'); - }, - onOk: function(close) { - alert('name: ' + React.findDOMNode(ref).value); - close(); - } - }); -} - -React.render( - -, document.getElementById('components-modal-demo-next')); -```` diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 2ba8207fb8..dd03098e4b 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -2,56 +2,33 @@ var React = require('react'); var Dialog = require('rc-dialog'); +function noop(){} -function noop() { -} +var Modal = React.createClass({ + handleCancel() { + this.refs.d.requestClose(); + }, -var div; + getDefaultProps(){ + return { + onOk:noop, + onCancel:noop, + onBeforeClose:noop + }; + }, -module.exports = function (props) { - var d; - props = props || {}; + handleOk() { + this.props.onOk(); + }, - props.animation = 'zoom'; - props.maskAnimation = 'fade'; - props.width = props.width || 500; - - props.onClose = props.onCancel || noop; - - function close() { - d.setState({ - visible: false - }); + render() { + var props = this.props; + var footer = [ + , + + ]; + return } +}); - function onCancel() { - if (props.onCancel) { - props.onCancel(); - } - close(); - } - - function onOk() { - if (props.onOk) { - props.onOk(close); - } else { - close(); - } - } - - var footer = [ - , - - ]; - if (!div) { - div = document.createElement('div'); - document.body.appendChild(div); - } - props.visible = true; - props.children = props.content; - props.footer = props.footer || footer; - props.renderToBody = false; - React.render(, div, function () { - d = this; - }); -}; +module.exports = Modal; \ No newline at end of file diff --git a/components/modal/index.md b/components/modal/index.md index 2efa086a8c..e61383f344 100644 --- a/components/modal/index.md +++ b/components/modal/index.md @@ -13,13 +13,13 @@ ## API -是个方法，参数只有一个 object ，具体成员如下 +属性列表 | 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | title | 标题 | React.Element | 无 | -| content | 面板内容 | React.Element | 无 | -| onOk | 确定回调 | function | 无 | -| onCancel | 取消回调 | function | 无 | -| width | 宽度 | String or Number | 无 | +| onOk | 点击确定回调 | function | 无 | +| onBeforeClose | 点击遮罩层或右上角叉或取消按钮关闭前回调 | function | 无 | +| width | 宽度 | String or Number | 500 | +| visible | 是否显示 | Boolean | false | | footer | 底部内容 | React.Element | 确定取消按钮 | diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index 813b0d57be..db06f61a3b 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -13,7 +13,7 @@ module.exports = React.createClass({ return ( {this.props.children} diff --git a/index.js b/index.js index 335fa090ac..35b9baf3fc 100644 --- a/index.js +++ b/index.js @@ -4,11 +4,12 @@ var antd = { Datepicker: require('./components/datepicker'), Tooltip: require('./components/tooltip'), Tab: require('./components/tab'), - modal: require('./components/modal'), + Modal: require('./components/modal'), Menu: require('rc-menu'), Dropdown: require('./components/dropdown'), Progress: require('./components/progress'), - Select: require('./components/select') + Select: require('./components/select'), + confirm:require('./components/confirm') }; module.exports = window.antd = antd; diff --git a/package.json b/package.json index 8f2a200841..29b88b438b 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "rc-calendar": "~3.8.0", - "rc-dialog": "~4.2.0", + "rc-dialog": "~4.3.0", "rc-dropdown": "~1.0.0", "rc-menu": "~3.3.0", "rc-progress": "~1.0.0", diff --git a/style/components/confirm.less b/style/components/confirm.less index 38a9ec30a4..712199df0c 100644 --- a/style/components/confirm.less +++ b/style/components/confirm.less @@ -1,47 +1,41 @@ -@prefixConfirmCls: rc-dialog-confirm; +@prefixConfirmCls: ant-confirm; -.@{prefixConfirmCls}-body { - .ant-icon { - font-size: 24px; - display: inline-block; - margin-right: 5px; - position: relative; - font-style: normal; - font-weight: normal; - font-variant: normal; - line-height: inherit; - vertical-align: baseline; - text-align: center; - text-transform: none; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0px; - -moz-osx-font-smoothing: grayscale; - font-family: sans-serif; +.@{prefixConfirmCls} { - .ant-icon-warn-circle:before { - content: "\e613"; - display: block; - font-family: "iconfont" !important; + .rc-dialog-header { + display: none; + } + + .rc-dialog-body { + padding: 30px 40px; + } + + .@{prefixConfirmCls}-body { + .@{prefixConfirmCls}-content { + margin-left: 33px; + font-size: 12px; + color: #999; } - .ant-icon-warn-circle { + .anticon { + font-size: 24px; + display: inline-block; + margin-right: 5px; + } + + .anticon-exclamation-circle { color: #fac450; } } - .@{prefixConfirmCls}-description { - margin-left: 33px; - font-size: 12px; - color: #999; - } -} + .@{prefixConfirmCls}-btns { + margin-top: 30px; + float: right; -.@{prefixConfirmCls}-btns { - margin-top: 30px; - float: right; - - [btn] + [btn] { - margin-left: 10px; - margin-bottom: 0; + button + button { + margin-left: 10px; + margin-bottom: 0; + } } + } diff --git a/style/core/iconfont.less b/style/core/iconfont.less index 88dd28c702..29bd646d1f 100644 --- a/style/core/iconfont.less +++ b/style/core/iconfont.less @@ -49,18 +49,18 @@ .@{iconfont-css-prefix}-caret-circleo-right:before {content:"\e60e";} .@{iconfont-css-prefix}-caret-circleo-left {.ie-rotate(2);} .@{iconfont-css-prefix}-caret-circleo-left:before {content:"\e60e";.rotate(180deg);} -.@{iconfont-css-prefix}-angle-circle-right:before {content:"\e602";} -.@{iconfont-css-prefix}-angle-circle-left {.ie-rotate(2);} -.@{iconfont-css-prefix}-angle-circle-left:before {content:"\e602";.rotate(180deg);} -.@{iconfont-css-prefix}-angle-circleo-right:before {content:"\e603";} -.@{iconfont-css-prefix}-angle-circleo-left {.ie-rotate(2);} -.@{iconfont-css-prefix}-angle-circleo-left:before {content:"\e603";.rotate(180deg);} -.@{iconfont-css-prefix}-angle-double-right:before {content:"\e604";} -.@{iconfont-css-prefix}-angle-double-left {.ie-rotate(2);} -.@{iconfont-css-prefix}-angle-double-left:before {content:"\e604";.rotate(180deg);} -.@{iconfont-css-prefix}-angle-verticle-right:before {content:"\e605";} -.@{iconfont-css-prefix}-angle-verticle-left {.ie-rotate(2);} -.@{iconfont-css-prefix}-angle-verticle-left:before {content:"\e605";.rotate(180deg);} +.@{iconfont-css-prefix}-circle-right:before {content:"\e602";} +.@{iconfont-css-prefix}-circle-left {.ie-rotate(2);} +.@{iconfont-css-prefix}-circle-left:before {content:"\e602";.rotate(180deg);} +.@{iconfont-css-prefix}-circleo-right:before {content:"\e603";} +.@{iconfont-css-prefix}-circleo-left {.ie-rotate(2);} +.@{iconfont-css-prefix}-circleo-left:before {content:"\e603";.rotate(180deg);} +.@{iconfont-css-prefix}-double-right:before {content:"\e604";} +.@{iconfont-css-prefix}-double-left {.ie-rotate(2);} +.@{iconfont-css-prefix}-double-left:before {content:"\e604";.rotate(180deg);} +.@{iconfont-css-prefix}-verticle-right:before {content:"\e605";} +.@{iconfont-css-prefix}-verticle-left {.ie-rotate(2);} +.@{iconfont-css-prefix}-verticle-left:before {content:"\e605";.rotate(180deg);} .@{iconfont-css-prefix}-forward:before {content:"\e630";} .@{iconfont-css-prefix}-backward {.ie-rotate(2);} .@{iconfont-css-prefix}-backward:before {content:"\e630";.rotate(180deg);} diff --git a/style/mixins/index.less b/style/mixins/index.less index e441866616..9db3fb513f 100644 --- a/style/mixins/index.less +++ b/style/mixins/index.less @@ -11,6 +11,7 @@ // for common elements @import "button.less"; +@import "input.less"; // Layout @import "grid.less"; diff --git a/style/mixins/input.less b/style/mixins/input.less index ff8ac39168..919129f504 100644 --- a/style/mixins/input.less +++ b/style/mixins/input.less @@ -20,3 +20,59 @@ box-shadow: 0 0 3px #23c0fa; } } + +.input() { + position: relative; + display: block; + padding: @input-padding-vertical-base @input-padding-horizontal; + width: 100%; + font-size: @input-font-size; + line-height: @line-height-base; + color: @input-color; + background-color: @input-bg; + background-image: none; + border: 1px solid @input-border-color; + border-radius: @input-border-radius; + // Reset placeholder + .placeholder(); + .transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}"); + + &:not([disabled]):hover { + border-color: @input-hover-border-color; + } + + &:focus { + @color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8); + border-color: @input-focus-border-color; + outline: 0; + box-shadow: 0 0 3px @color-rgba; + } + + &[disabled], + &[readonly], + fieldset[disabled] & { + background-color: @input-disabled-bg; + opacity: 1; + } + + &[disabled], + fieldset[disabled] & { + cursor: @cursor-disabled; + } + + // Reset height for `textarea`s + textarea& { + height: auto; + } + + // Size + &-lg { + padding: @input-padding-lg; + font-size: @input-font-size-lg; + } + + &-sm { + padding: @input-padding-vertical-sm @input-padding-horizontal; + font-size: @input-font-size-sm; + } +} \ No newline at end of file diff --git a/style/mixins/vendor-prefixes.less b/style/mixins/vendor-prefixes.less index afd3331c31..6551827519 100644 --- a/style/mixins/vendor-prefixes.less +++ b/style/mixins/vendor-prefixes.less @@ -98,7 +98,7 @@ } // Placeholder text -.placeholder(@color: @input-color-placeholder) { +.placeholder(@color: @input-placeholder-color) { // Firefox &::-moz-placeholder { color: @color; diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index 8f31131e8b..a6cea2dbe6 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -110,4 +110,35 @@ // Container sizes @container-sm : (720px + @grid-gutter-width); @container-md : (940px + @grid-gutter-width); -@container-lg : (1140px + @grid-gutter-width); \ No newline at end of file +@container-lg : (1140px + @grid-gutter-width); + +// Form +// -------------------------------- +// Legend +@legend-color : #222; +@legend-border-color : #e5e5e5; + +// Input +@input-height-base: 28px; +@input-height-lg: 32px; +@input-height-sm: 22px; + +@input-padding-horizontal : 7px; +@input-padding-vertical-base : 4px; +@input-padding-vertical-sm : 1px; +@input-padding-lg : 4px 7px 5px; + +@input-placeholder-color : #ccc; +@input-color : #666; +@input-border-color : #d9d9d9; +@input-bg : #fff; + +@input-border-radius : @border-radius-base; + +@input-font-size-lg : 14px; +@input-font-size : @font-size-base; +@input-font-size-sm : @font-size-base; + +@input-hover-border-color : #23c0fa; +@input-focus-border-color : #2db7f5; +@input-disabled-bg : #f3f5f7; \ No newline at end of file