输入框

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

导入

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

用法

可控

值: 
const [value, setValue] = React.useState("");

return (
  <>
    <div className="mb-2">值: {value}</div>
    <Input value={value} onChange={(value) => setValue(value)} placeholder="输入框" />
  </>
);

大小

<Input size={"xs"} defaultValue={"XS 超小"} />
<Input size={"sm"} defaultValue={"SM 小型"} />
<Input defaultValue={"普通输入框"} />
<Input size={"lg"} defaultValue={"LG 大型"} />
<Input size={"xl"} defaultValue={"XL 超大"} />

前后置元素

RMB
<Input placeholder={"邮箱地址"}
       leading={<SpriteIcon size={"sm"} name={"email"} />} />
<Input placeholder={"金额"} trailing={'RMB'} trailingWidth={50} />
<Input placeholder={"搜索..."}
       leading={<Button variant={"ghost"} color={"neutral"} size={"xs"} square={true}>
                  <SpriteIcon size={"sm"} name={"search"} />
                </Button>}
       leadingPointer={true} />
<Input placeholder={"邮件地址"}
       trailing={<Button size={"xs"}>订阅</Button>}
       trailingWidth={56} trailingPointer={true} />

输入框组

@
@example.com
¥
RMB
.00
@
<InputGroup>
  <InputAddon>@</InputAddon>
  <Input placeholder={"用户名"} />
</InputGroup>
<InputGroup>
  <Input placeholder={"收件人的用户名"} />
  <InputAddon>@example.com</InputAddon>
</InputGroup>
<InputGroup>
  <InputAddon>¥</InputAddon>
  <Input trailing={'RMB'} trailingWidth={50} placeholder={"金额"} />
  <InputAddon>.00</InputAddon>
</InputGroup>
<InputGroup size={"sm"}>
  <Input placeholder={"用户名"} />
  <InputAddon>@</InputAddon>
  <Input placeholder={"服务器"} />
</InputGroup>

属性

输入框

属性size类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false
属性value类型string | number默认值-必须false
属性defaultValue类型string | number默认值-必须false
属性disabled类型boolean默认值false必须false
属性required类型boolean默认值false必须false
属性invalid类型boolean默认值false必须false
属性readOnly类型boolean默认值false必须false
属性block类型boolean默认值false必须false
属性onChange类型((value: string | number) => void)默认值-必须false
属性htmlSize类型number默认值-必须false
属性placeholder类型string默认值-必须false
属性leading类型ReactNode默认值-必须false
属性leadingWidth类型number默认值-必须false
属性leadingPointer类型boolean默认值false必须false
属性trailing类型ReactNode默认值-必须false
属性trailingWidth类型number默认值-必须false
属性trailingPointer类型boolean默认值false必须false

输入框组

属性size类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false