Fetch the repository succeeded.
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
import { Stepper } from "@ls-design/ui-react";
<Stepper value="1"></Stepper>
<Stepper min="5" max="12" />
<Stepper steps="2" />
<Stepper interger />
<Stepper disabled />
export default = () => {
const [value, setValue] = useState(1);
const handleChange = ({ detail }) => {
setValue(detail.value);
};
return <Stepper onChange={handleChange} value={value}/>
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
min | 最小值 | number |
|
max | 最大值 | number |
|
steps | 步数(每次点击改变的数值间隔) | number |
1 |
name | 标识符,会在change 事件中返回 |
string |
|
decimallength | 固定显示的小数位数 | number |
|
integer | 是否只允许输入整数 | boolean |
false |
disabled | 是否禁用步进器 | boolean |
false |
onChange | 当绑定值变化时触发的事件 | (e:{detail: { name: string, value: number }}) => void |
|
onOverlimit | 点击不可用的按钮时触发 | (e:{detail: { action: string}}) => void |
|
onPlus | 点击增加按钮时触发 | () => void |
|
onMinus | 点击减少按钮时触发 | () => void |
组件提供了以下 CSS变量,可用于自定义样式
名称 | 说明 | 默认值 |
---|---|---|
--stepper-input-text-color |
stepper-input 字体颜色 | #e8e8e8 |
--stepper-input-background-color |
stepper-input 背景颜色 | #f2f3f5 |
--stepper-input-width |
stepper-input 宽度 | 32px |
--stepper-input-height |
stepper-input 高度 | 28px |
--stepper-input-border-color |
stepper-input 边框颜色 | |
--stepper-input-border-width |
stepper-input 边框宽度 | 1px |
--stepper-input-font-size |
stepper-input 字体大小 | 14px |
--stepper-input-line-height |
stepper-input 行高 | normal |
--stepper-input-border-radius |
stepper-input 边框圆角 | |
--stepper-button-border-radius |
stepper-button 边框圆角 | |
--stepper-button-border-height |
stepper-button 高度 | 28px |
--stepper-button-border-width |
stepper-button 宽度 | 28px |
--stepper-button-disabled-color |
stepper 禁用时颜色 | #c8c9cc |
--stepper-minus-color |
stepper-minus-button 字体颜色 | #e8e8e8 |
--stepper-minus-background-color |
stepper-minus-button 背景颜色 | #f2f3f5 |
--stepper-plus-color |
stepper-plus-button 字体颜色 | #e8e8e8 |
--stepper-plus-background-color |
stepper-plus-button 背景颜色 | #f2f3f5 |
--stepper-minus-border-color |
stepper-minus-button 边框颜色 | |
--stepper-plus-border-color |
stepper-plus-button 边框颜色 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。