数字输入框

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

演示

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

export default function App() {
  return <NumberInput placeholder={"数字输入框"} />;
}

用法

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

特点

遵循 WAI ARIA Spinbutton 设计模式。
使用本机 <input> 元素构建。
视觉和 ARIA 标签支持。
可以是受控的，也可以是不受控的。
支持递增和递减按钮。
格式化并本地化输入数字和原始输入。
支持鼠标滚轮事件和所有键盘事件。

举例

默认值

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

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

export default function App() {
  return <NumberInput defaultValue={32} />;
}

可控值

使用 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 (
    <NumberInput
      parse={(value) => value.replace(/\$\s?|(,*)/g, "")}
      format={(value) =>
        !Number.isNaN(value) ? `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "$ "
      }
    />
  );
}

前置元素

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

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

export default function App() {
  return (
    <NumberInput
      min={0}
      prefix={<SpriteIcon size={"1.125em"} name={"github"} />}
      placeholder={"仓库数量"}
    />
  );
}

滚轮改变

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

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

export default function App() {
  return <NumberInput changeOnWheel />;
}

属性

属性	类型	默认值	必须
属性size	简介大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须false
属性placeholder	简介占位符文本	类型string	默认值-	必须false
属性prefix	简介前置元素	类型ReactNode	默认值-	必须false
属性prefixWidth	简介前置元素宽度	类型number	默认值-	必须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
属性value	简介可控值	类型number	默认值-	必须false
属性defaultValue	简介默认值	类型number	默认值-	必须false
属性onChange	简介 onChange 回调	类型((value: number) => void)	默认值-	必须false
属性name	简介字段的名称, 提交表单时使用	类型string	默认值-	必须false
属性disabled	简介是否禁用	类型boolean	默认值false	必须false
属性required	简介是否必需	类型boolean	默认值false	必须false
属性readOnly	简介是否只读	类型boolean	默认值false	必须false
属性invalid	简介是否无效	类型boolean	默认值false	必须false

建议更改此页面