需要用户输入表单域内容时。
提供组合型输入框,带搜索的输入框,还可以进行大小选择。
基本使用,width 可以设置输入框的宽度。
1
<Input placeholder="请输入..." width={360} />
可以使用 size 设置输入框的尺寸,size 可以设置为 xs, sm, md, lg, xl.
2
<Input size="xs" width={360}></Input>
3
<Input size="sm" width={360}></Input>
4
<Input size="md" width={360}></Input>
5
<Input size="lg" width={360}></Input>
6
<Input size="xl" width={360}></Input>
带有搜索按钮的输入框。
2
const { Magnifier, Appcenter } = KubeIcon;
4
<Group direction="column">
5
<Input prefix={<Magnifier size={16} />} suffix={<Loading size={16} />} />
6
<Input prefix="https://" suffix={<Appcenter size={16} />} />
1
<Input placeholder="请输入..." disabled />
1
<Input placeholder="请输入..." readOnly/>
用于配置一些固定组合。
2
const { Appcenter } = KubeIcon;
5
<Input addonBefore="https://" width={350} />
6
<Input addonAfter=".com" width={350} prefix={<Appcenter size={16} />} />