1 Star 0 Fork 0

LS/ls-design

Create your Gitee Account
Explore and code with more than 13.5 million developers,Free private repositories !:)
Sign up
文件
Clone or Download
zh-CN-react.md 4.22 KB
Copy Edit Raw Blame History

Stepper


简介

步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。

安装使用

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}/>
}

Props

参数 说明 类型 默认值
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 边框颜色
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/LShere/ls-design.git
git@gitee.com:LShere/ls-design.git
LShere
ls-design
ls-design
master

Search