diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md index abcdfcfe13..23c8cc723b 100644 --- a/components/input-number/demo/disabled.md +++ b/components/input-number/demo/disabled.md @@ -1,6 +1,6 @@ # 不可用 -- order: 0 +- order: 2 点击按钮切换可用状态。 diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md new file mode 100644 index 0000000000..34814e6cd2 --- /dev/null +++ b/components/input-number/demo/size.md @@ -0,0 +1,29 @@ +# 三种大小 + +- order: 1 + +三种大小的数字输入框,当 className 分别为 `ant-input-number-lg` 和 `ant-input-number-sm` 时,输入框高度为 `32px` 和 `22px` ,默认高度为 `28px` + +--- + +````jsx +var InputNumber = antd.InputNumber; + +function onChange(value) { + console.log('changed', value); +} + +React.render( +
+ + + +
+, document.getElementById('components-input-number-demo-size')); +```` + +````css +.ant-input-number{ + margin-right: 10px; +} +```` \ No newline at end of file diff --git a/components/input-number/index.md b/components/input-number/index.md index ad2603628c..00222a9136 100644 --- a/components/input-number/index.md +++ b/components/input-number/index.md @@ -25,3 +25,4 @@ | defaultValue | 初始值 | Number | | | onChange | 变化回调 | Function | | | disabled | 禁用 | Boolean | false | +| className | 输入框大小 | String | 无 | diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less index f03bcf1627..c407cb7799 100644 --- a/style/components/inputNumber.less +++ b/style/components/inputNumber.less @@ -75,6 +75,60 @@ .disabled(); } } + + &-lg{ + padding: 0!important; + .ant-input-number-handler-wrap{ + height: 32px; + } + .ant-input-number-input-wrap{ + height: 32px; + } + .ant-input-number-handler{ + height: 16px; + } + + input{ + height: 32px; + line-height: 32px; + font-size: 14px; + } + + .ant-input-number-handler-up-inner{ + top: 2px; + } + .ant-input-number-handler-down-inner{ + top: 18px; + } + } + + &-sm{ + padding: 0!important; + .ant-input-number-handler-wrap{ + height: 22px; + } + .ant-input-number-input-wrap{ + height: 22px; + overflow: hidden; + position: relative; + } + .ant-input-number-handler{ + height: 11px; + } + + input{ + height: 22px; + line-height: 22px; + position: absolute; + top: 0; + } + .ant-input-number-handler-up-inner{ + top: -1px; + } + .ant-input-number-handler-down-inner{ + top: 10px; + } + } &-handler-wrap { float: right;