diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md new file mode 100644 index 0000000000000000000000000000000000000000..c4c68ae72943628e00586c9c169b41ad17e8b2ef --- /dev/null +++ b/components/input-number/demo/basic.md @@ -0,0 +1,20 @@ +# 基本 + +- order: 0 + +数字输入框 + +--- + +````jsx +var InputNumber = antd.InputNumber; + +function onChange(v){ + console.log('changed',v); +} + +React.render( +
+, document.getElementById('components-inputnumber-demo-basic')); +```` + diff --git a/components/input-number/index.jsx b/components/input-number/index.jsx new file mode 100644 index 0000000000000000000000000000000000000000..de1f043bf6d54486798cacde002ff903ea637855 --- /dev/null +++ b/components/input-number/index.jsx @@ -0,0 +1,15 @@ +var InputNumber = require('rc-input-number'); +var React = require('react'); + +var AntInputNumber = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-input-number' + }; + }, + render() { + return ; + } +}); + +module.exports = AntInputNumber; diff --git a/components/input-number/index.md b/components/input-number/index.md new file mode 100644 index 0000000000000000000000000000000000000000..0301a843ebbc88d118f4c0ac4897af883d23a797 --- /dev/null +++ b/components/input-number/index.md @@ -0,0 +1,26 @@ +# InputNumber + +- category: Components +- chinese: 数字输入框 + +--- + +通过鼠标或键盘,输入范围内的数值。 + +## 何时使用 + +- 当需要获取标准数值时。 + +## API + +属性如下 + +| 成员 | 说明 | 类型 | 默认值 | +|-------------|----------------|--------------------|--------------| +| min | 最小值 | Number | -Infinity | +| max | 最大值 | Number | Infinity | +| value | 当前值 | Number | | +| defaultValue | 初始值 | Number | | +| onChange | 变化回调 | Function | | +| disabled | 禁用 | Boolean | | +| style | 根节点样式 | Object | \ No newline at end of file diff --git a/components/inputNumber/index.jsx b/components/inputNumber/index.jsx deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/components/inputNumber/index.md b/components/inputNumber/index.md deleted file mode 100644 index 0eb9790d89134e4ff4f326478f73e51a66967be9..0000000000000000000000000000000000000000 --- a/components/inputNumber/index.md +++ /dev/null @@ -1,12 +0,0 @@ -# InputNumber - -- category: Components -- chinese: 数字输入框 - ---- - -通过鼠标或键盘,输入范围内的数值。 - -## 何时使用 - -- 当需要获取标准数值时。 diff --git a/index.js b/index.js index c6869ef5d2cf273a362d6088e207e0393bfdfac4..d9fa5516c6f7d00e33d2f816e5078d14701c7f08 100644 --- a/index.js +++ b/index.js @@ -12,7 +12,8 @@ var antd = { Select: require('./components/select'), Popconfirm: require('./components/popconfirm'), confirm: require('./components/modal/confirm'), - Steps: require('./components/steps') + Steps: require('./components/steps'), + InputNumber: require('./components/input-number') }; module.exports = window.antd = antd; diff --git a/package.json b/package.json index 118e4fda326396674416d8d2f75de0eef37e2374..12af22a387871edc3640169a7675d998f4b02155 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "rc-calendar": "~3.9.0", "rc-dialog": "~4.3.5", "rc-dropdown": "~1.1.1", + "rc-input-number": "~2.0.0", "rc-menu": "~3.4.0", "rc-progress": "~1.0.0", "rc-select": "~4.0.0", diff --git a/site/templates/layout.html b/site/templates/layout.html index ea3b3e2a83d3b8691c6d017a478f061ff631c368..68d6a80b55e3bcb376522aa01d0ef2bf89763dc2 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -13,7 +13,7 @@ {% block styles %}{% endblock %} - + {% block scripts %}{% endblock %} diff --git a/style/components/index.less b/style/components/index.less index f92e210bc3a02d3e5babb1b37b1e85de83d57064..f59b92499a7293f63b32428bb73601d4d98f5652 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -11,4 +11,5 @@ @import "form"; @import "loading"; @import "progress"; -@import "steps"; \ No newline at end of file +@import "steps"; +@import "inputNumber"; \ No newline at end of file diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less new file mode 100644 index 0000000000000000000000000000000000000000..8a13d9f2249cdb882852e39b7b88adc31b63b6e3 --- /dev/null +++ b/style/components/inputNumber.less @@ -0,0 +1,115 @@ +@inputNumberPrefixCls: ant-input-number; + +@import "../mixins/iconfont"; + +.@{inputNumberPrefixCls} { + margin: 0; + padding: 0; + line-height: 26px; + font-size: 12px; + height: 26px; + display: inline-block; + vertical-align: middle; + border: 1px solid #D9D9D9; + border-radius: 5px; + + &-handler { + text-align: center; + line-height: 12px; + height: 12px; + overflow: hidden; + } + + &-handler-up-inner, &-handler-down-inner { + color: #666666; + user-select: none; + -webkit-user-select: none; + } + + &:hover { + border-color: #23c0fa; + + .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap { + border-color: #23c0fa; + } + } + + &-disabled:hover { + border-color: #d9d9d9; + + .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap { + border-color: #d9d9d9; + } + } + + &-input-wrap { + overflow: hidden; + height: 26px; + } + + &-input { + width: 100%; + text-align: center; + outline: 0; + -moz-appearance: textfield; + line-height: 26px; + height: 24px; + transition: all 0.3s ease; + color: #666666; + border: 0; + border-radius: 5px; + padding: 0; + } + + &-handler-wrap { + float: right; + border-left: 1px solid #D9D9D9; + width: 20px; + height: 26px; + } + + &-handler-up { + border-bottom: 1px solid #D9D9D9; + &-inner { + .iconfont-mixin(); + top:-2px; + &:before { + content: "\e611"; + transform: rotate(270deg) scale(0.8); + } + } + } + + &-handler-down { + &-inner { + .iconfont-mixin(); + &:before { + content: "\e611"; + transform: rotate(90deg) scale(0.8); + } + } + } + + .handler-disabled() { + opacity: 0.72; + &:hover { + color: #999; + border-color: #d9d9d9; + } + } + + &-handler-down-disabled, &-handler-up-disabled { + .handler-disabled(); + } + + &-disabled { + .@{inputNumberPrefixCls}-input { + opacity: 0.72; + cursor: not-allowed; + background-color: #f3f3f3; + } + .@{inputNumberPrefixCls}-handler { + .handler-disabled(); + } + } +} diff --git a/style/core/iconfont.less b/style/core/iconfont.less index d6b75137b84709920cecf43248ba59892b354f70..078552dbb2743a4f1c86e470011e27b7d7cb6a01 100644 --- a/style/core/iconfont.less +++ b/style/core/iconfont.less @@ -1,3 +1,5 @@ +@import "../mixins/iconfont"; + // font-face // @icon-url: 字体源文件的地址 @font-face { @@ -10,22 +12,7 @@ } .@{iconfont-css-prefix} { - position: relative; - display: inline-block; - font-style: normal; - vertical-align: baseline; - text-align: center; - text-transform: none; - text-rendering: auto; - // 更好地渲染字体 - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0px; - -moz-osx-font-smoothing: grayscale; - - &:before { - display: block; - font-family: "anticon" !important; - } + .iconfont-mixin(); } // 方向性图标 .@{iconfont-css-prefix}-step-backward:before {content:"\e662";} diff --git a/style/mixins/iconfont.less b/style/mixins/iconfont.less new file mode 100644 index 0000000000000000000000000000000000000000..cbd64bef823b3abe134dfe2dc6cb3c214d7ccbe1 --- /dev/null +++ b/style/mixins/iconfont.less @@ -0,0 +1,18 @@ +.iconfont-mixin() { + position: relative; + display: inline-block; + font-style: normal; + vertical-align: baseline; + text-align: center; + text-transform: none; + text-rendering: auto; + // 更好地渲染字体 + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0px; + -moz-osx-font-smoothing: grayscale; + + &:before { + display: block; + font-family: "anticon" !important; + } +} \ No newline at end of file