跳到主要内容

步进器 InputNumber

步进器由增加按钮、减少按钮和输入框组成,用于输入范围内的数值

安装使用

import { TiInputNumber } from '@titian-design/mobile-react'

用法示例

基本用法

const App: React.FC = () => {
return (
<>
<TiInputNumber value={value} onChange={onChange} />
</>
)
}

步进器尺寸

const App: React.FC = () => {
return (
<>
<TiInputNumber size="medium" />
<TiInputNumber size="big" />
</>
)
}

步进器风格

const App: React.FC = () => {
return (
<>
<TiInputNumber variant="pure" />
<TiInputNumber variant="block" />
<TiInputNumber variant="bright" />
</>
)
}

自适应宽度

const App: React.FC = () => {
return (
<>
<TiInputNumber autoWidth />
</>
)
}

步进器步长

const App: React.FC = () => {
return (
<>
<TiInputNumber step={5} />
</>
)
}

步进器禁用和只读

const App: React.FC = () => {
return (
<>
<TiInputNumber disabled />
<TiInputNumber disabledInput />
<TiInputNumber readOnly />
<TiInputNumber readOnlyInput />
</>
)
}

边框

const App: React.FC = () => {
return (
<>
<TiInputNumber variant="pure" border />
<TiInputNumber variant="block" border />
</>
)
}

收起状态

const App: React.FC = () => {
return (
<>
<TiInputNumber thumbnail />
</>
)
}

TiInputNumber API

属性 Properties

名称类型必填默认值说明备注
sizestringmedium数字输入框的尺寸,可选值为 medium big-
borderbooleanfalse是否添加外边框variant:bright模式下border无效
variantstringpure数字输入框的风格,可选值为 pure block bright-
roundbooleanfalse按钮为圆形-
inputWidthnumber-输入框宽度,默认单位为 px-
autoWidthbooleanfalse宽度自适应-
valuenumber | string-输入值-
stepnumber1步长-
minnumberNumber.MIN_SAFE_INTEGER最小值-
maxnumberNumber.MAX_SAFE_INTEGER最大值-
disabledInputbooleanfalse是否禁用输入,只能通过按钮操作-
asyncChangebooleanfalse是否开启异步变更,开启后需要手动控制输入值-
thumbnailbooleanfalse是否收起输入框-
disabledbooleanfalse是否禁用,全部禁用,包括按钮-
readOnlybooleanfalse是否只读,全部只读,包括按钮-
readOnlyInputbooleanfalse是否只读,只输入框只读,按钮仍然可以操作-
integerbooleanfalse限制输入整数-
initOnlyPlusbooleanfalse如果设置 true,value 值为 0,初始状态仅显示加号仅在variant:bright模式下有效
extStylestring | Record<string, string>-根节点样式-

事件 Events

名称参数列表描述备注
onChange(e: CustomEvent<number>) => void当绑定值变化时触发的事件-
onPlus(e: CustomEvent<number>) => void点击增加按钮时触发时触发-
onMinus(e: CustomEvent<number>) => void点击减少按钮时触发时触发-
onFocus(e: CustomEvent<{value: number}>) => void输入框聚焦时触发-
onBlur(e: CustomEvent<{value: number}>) => void输入框失焦时触发-
onOverlimit(e: CustomEvent<{type: 'plus' | 'minus'}>) => void超出最大值时点击触发-
onClickInput(e: CustomEvent) => void点击输入框时触发-

外部样式类 External Classes

名称说明备注
extClass根节点样式类-
extMinusClass减号按钮样式类-
extInputClass输入框样式类-
extPlusClass加号按钮样式类-

CSS 变量 CSS Variable

变量默认值说明备注
--input-number-size48px按钮的宽高,默认相等-
--input-number-border-color#c4c4c4边框模式下,边框的颜色-
--input-number-radiuscalc(var(--capsule-radius-size, 0px) + 8px)按钮圆角-
--capsule-radius-size0px全局圆角增量,控制图标风格。在项目根节点统一设置-