提交 7b64e31e 编写于 作者: Z zhujun24

inputNumber size

上级 aa6722b0
# 不可用
- order: 0
- order: 2
点击按钮切换可用状态。
......
# 三种大小
- 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(
<div>
<InputNumber className="ant-input-number-lg" min={1} max={100000} defaultValue={3} onChange={onChange} />
<InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
<InputNumber className="ant-input-number-sm" min={1} max={100000} defaultValue={3} onChange={onChange} />
</div>
, document.getElementById('components-input-number-demo-size'));
````
````css
.ant-input-number{
margin-right: 10px;
}
````
\ No newline at end of file
......@@ -25,3 +25,4 @@
| defaultValue | 初始值 | Number | |
| onChange | 变化回调 | Function | |
| disabled | 禁用 | Boolean | false |
| className | 输入框大小 | String | 无 |
......@@ -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;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册