From 465c8c2cdf58dd32faa8578f12e743a60733e5f9 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Wed, 1 Jul 2015 14:48:47 +0800 Subject: [PATCH] add input-number --- components/input-number/demo/basic.md | 20 +++++ components/input-number/index.jsx | 15 ++++ components/input-number/index.md | 26 ++++++ components/inputNumber/index.jsx | 0 components/inputNumber/index.md | 12 --- index.js | 3 +- package.json | 1 + site/templates/layout.html | 2 +- style/components/index.less | 3 +- style/components/inputNumber.less | 115 ++++++++++++++++++++++++++ style/core/iconfont.less | 19 +---- style/mixins/iconfont.less | 18 ++++ 12 files changed, 203 insertions(+), 31 deletions(-) create mode 100644 components/input-number/demo/basic.md create mode 100644 components/input-number/index.jsx create mode 100644 components/input-number/index.md delete mode 100644 components/inputNumber/index.jsx delete mode 100644 components/inputNumber/index.md create mode 100644 style/components/inputNumber.less create mode 100644 style/mixins/iconfont.less diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md new file mode 100644 index 0000000000..c4c68ae729 --- /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 0000000000..de1f043bf6 --- /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 0000000000..0301a843eb --- /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 e69de29bb2..0000000000 diff --git a/components/inputNumber/index.md b/components/inputNumber/index.md deleted file mode 100644 index 0eb9790d89..0000000000 --- a/components/inputNumber/index.md +++ /dev/null @@ -1,12 +0,0 @@ -# InputNumber - -- category: Components -- chinese: 数字输入框 - ---- - -通过鼠标或键盘，输入范围内的数值。 - -## 何时使用 - -- 当需要获取标准数值时。 diff --git a/index.js b/index.js index c6869ef5d2..d9fa5516c6 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 118e4fda32..12af22a387 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 ea3b3e2a83..68d6a80b55 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 f92e210bc3..f59b92499a 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 0000000000..8a13d9f224 --- /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 d6b75137b8..078552dbb2 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 0000000000..cbd64bef82 --- /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 -- GitLab