数字输入框

仅允许输入数字格式的输入框。

导入

import { NumberInput } from "@resolid/react-ui";

用法

值限制

<NumberInput max={10} />
<NumberInput min={10} />
<NumberInput min={10} max={20} />

格式化

<NumberInput
  parse={(value) => value.replace(/\$\s?|(,*)/g, '')}
  format={(value) => (!Number.isNaN(value) ? `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '$ ')}
/>

可控

值: 0

const [value, setValue] = useState(0);

return (
  <div className={"flex flex-col gap-2"}>
    <div>值: {value}</div>
    <NumberInput value={value} onChange={(value) => setValue(value)} placeholder="数字输入框" />
  </div>
);

大小

<NumberInput size={"xs"} placeholder={"XS 超小"} />
<NumberInput size={"sm"} placeholder={"SM 小型"} />
<NumberInput placeholder={"默认大小"} />
<NumberInput size={"lg"} placeholder={"LG 大型"} />
<NumberInput size={"xl"} placeholder={"XL 超大"} />

前置元素

<NumberInput leading={<SpriteIcon size={"sm"} name={"github"} />} placeholder={"仓库数量"} />

滚轮改变

<NumberInput leading={<SpriteIcon size={"sm"} name={"github"} />} placeholder={"仓库数量"} />

属性

属性	类型	默认值	必须
属性size	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值'md'	必须false
属性value	类型number	默认值-	必须false
属性defaultValue	类型number	默认值-	必须false
属性disabled	类型boolean	默认值false	必须false
属性required	类型boolean	默认值false	必须false
属性invalid	类型boolean	默认值false	必须false
属性readOnly	类型boolean	默认值false	必须false
属性block	类型boolean	默认值false	必须false
属性htmlSize	类型number	默认值-	必须false
属性placeholder	类型string	默认值-	必须false
属性leading	类型ReactNode	默认值-	必须false
属性leadingWidth	类型number	默认值-	必须false
属性leadingPointer	类型boolean	默认值false	必须false
属性onChange	类型((value: number) => void)	默认值-	必须false
属性step	类型number	默认值1	必须false
属性min	类型number	默认值-Infinity	必须false
属性max	类型number	默认值Infinity	必须false
属性precision	类型number	默认值0	必须false
属性format	类型(value: string) => string	默认值-	必须false
属性parse	类型(value: string) => string	默认值-	必须false
属性mouseWheel	类型boolean	默认值false	必须false