输入框

查看源代码

基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。

导入

import { Input, InputAddon, InputGroup } from "@resolid/react-ui";

用法

举例

可控

value 属性可用于可控值。当用户输入并接收新值时， onChange 事件将被触发。

你输入的是: 

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

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

  return (
    <div className={"flex flex-col items-start gap-2"}>
      <p>你输入的是: {value}</p>
      <Input value={value} onChange={(value) => setValue(value)} placeholder="输入框" />
    </div>
  );
}

大小

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

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Input size={"xs"} defaultValue={"XS 超小"} placeholder={"XS 超小"} />
      <Input size={"sm"} defaultValue={"SM 小型"} />
      <Input defaultValue={"普通输入框"} />
      <Input size={"lg"} defaultValue={"LG 大型"} />
      <Input size={"xl"} defaultValue={"XL 超大"} />
    </div>
  );
}

前后置元素

使用 prefix 和 suffix 来设置输入框的前后置元素。

RMB
import { Input, Button } from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <div className={"flex flex-col items-start gap-3"}>
      <Input placeholder={"邮箱地址"} prefix={<SpriteIcon size={"1.125em"} name={"email"} />} />
      <Input placeholder={"金额"} suffix={"RMB"} suffixWidth={50} />
      <Input
        placeholder={"搜索..."}
        suffix={
          <Button
            className={"pointer-events-auto"}
            variant={"ghost"}
            color={"neutral"}
            size={"xs"}
            iconOnly
          >
            <SpriteIcon size={"1.375em"} name={"search"} />
          </Button>
        }
      />
      <Input
        placeholder={"邮件地址"}
        suffix={
          <Button className={"pointer-events-auto"} size={"xs"}>
            订阅
          </Button>
        }
        suffixWidth={56}
      />
    </div>
  );
}

输入框组

使用 InputGroup 和 InputAddon 组件在输入中添加一个附加组件。

@
@example.com
姓名
¥
RMB
.00
@
import { Input, InputGroup, InputAddon } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-col gap-3"}>
      <InputGroup>
        <InputAddon>@</InputAddon>
        <Input placeholder={"用户名"} />
      </InputGroup>
      <InputGroup>
        <Input placeholder={"收件人的用户名"} />
        <InputAddon>@example.com</InputAddon>
      </InputGroup>
      <InputGroup>
        <InputAddon>姓名</InputAddon>
        <Input placeholder={"姓"} />
        <Input placeholder={"名"} />
      </InputGroup>
      <InputGroup size={"sm"}>
        <InputAddon>¥</InputAddon>
        <Input suffix={"RMB"} suffixWidth={50} placeholder={"金额"} />
        <InputAddon>.00</InputAddon>
      </InputGroup>
      <InputGroup>
        <Input placeholder={"用户名"} />
        <InputAddon>@</InputAddon>
        <Input placeholder={"服务器"} />
      </InputGroup>
    </div>
  );
}

属性

Input

属性size简介

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值"md"必须false
属性value简介

可控值

类型string | number默认值-必须false
属性defaultValue简介

默认值

类型string | number默认值""必须false
属性onChange简介

onChange 回调

类型((value: string | number) => void)默认值-必须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
属性suffix简介

后置元素

类型ReactNode默认值-必须false
属性suffixWidth简介

后置元素宽度

类型number默认值-必须false

InputGroup

属性size简介

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值"md"必须false

建议更改此页面