数字输入框

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

导入

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

用法

举例

默认值

可以使用 defaultValue 属性提供初始的、不受控制的值。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <NumberInput defaultValue={32} />
    </div>
  );
}

可控值

使用 value 和 onChange 属性来控制数字输入的值。

当前值: 10

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

export default function App() {
  const [value, setValue] = useState(10);

  return (
    <div className={"flex flex-col items-start gap-2"}>
      <p>当前值: {value}</p>
      <NumberInput value={value} onChange={setValue} />
    </div>
  );
}

值限制

使用 min 和 max 属性设置数字输入的最小值和最大值。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <NumberInput max={10} />
      <NumberInput min={10} />
      <NumberInput min={10} max={20} />
    </div>
  );
}

格式化

使用 format 和 parse 格式化数字输入值。

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

export default function App() {
  return (
    <div className={"flex flex-row gap-3"}>
      <NumberInput
        parse={(value) => value.replace(/\$\s?|(,*)/g, "")}
        format={(value) =>
          !Number.isNaN(value) ? `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "$ "
        }
      />
    </div>
  );
}

大小

通过传递 size 属性来更改数字输入框的大小。数字输入框支持 xs、sm、md、lg 和 xl 这些大小。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <NumberInput size={"xs"} placeholder={"XS 超小"} />
      <NumberInput size={"sm"} placeholder={"SM 小型"} />
      <NumberInput placeholder={"默认大小"} />
      <NumberInput size={"lg"} placeholder={"LG 大型"} />
      <NumberInput size={"xl"} placeholder={"XL 超大"} />
    </div>
  );
}

前置元素

使用 prefix 来设置数字输入框的前置元素。

import { NumberInput } from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <NumberInput
        min={0}
        prefix={<SpriteIcon size={"1.125em"} name={"github"} />}
        placeholder={"仓库数量"}
      />
    </div>
  );
}

滚轮改变

使用 changeOnWheel 属性启用或禁用鼠标滚轮改变值

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <NumberInput changeOnWheel />
    </div>
  );
}

属性

属性	类型	默认值	必须
属性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
属性fullWidth	简介是否全宽度	类型boolean	默认值false	必须false
属性placeholder	简介占位符文本	类型string	默认值-	必须false
属性prefix	简介前置元素	类型ReactNode	默认值-	必须false
属性prefixWidth	简介前置元素宽度	类型number	默认值-	必须false
属性onChange	简介 onChange 回调	类型((value: number) => void)	默认值-	必须false
属性min	简介最小值	类型number	默认值Number.MIN_SAFE_INTEGER	必须false
属性max	简介最大值	类型number	默认值Number.MAX_SAFE_INTEGER	必须false
属性step	简介步进	类型number	默认值1	必须false
属性precision	简介小数精度	类型number	默认值0	必须false
属性format	简介自定义显示格式	类型(value: string) => string	默认值-	必须false
属性parse	简介如果使用自定义显示格式，转换为 parseFloat 可以处理的格式	类型(value: string) => string	默认值-	必须false
属性inputMode	简介提示用户可能输入的数据类型。它还确定了移动设备上向用户显示的键盘类型	类型"decimal" \| "numeric"	默认值"decimal"	必须false
属性changeOnWheel	简介通过滚轮改变值	类型boolean	默认值false	必须false

建议更改此页面