输入框
通过鼠标或键盘输入内容,可以在输入框前后位置包含额外的文本或图标,通常用在表单、对话框上面。
基本使用
使用 input-control
类来获得输入框的外观和交互体验。
用户名
用户名验证失败
包含图标和按钮
前缀和后缀
通过结合类 has-prefix
has-suffix
在输入框上添加前缀或后缀图标或字符。
除了预设的前 / 后缀宽度,还预设了其他两种尺寸,结合 has-prefix-*
和 has-suffix-*
类进行不同宽度展示。
用户名
有效身份证号码
尺寸
除了默认大小,输入框还提供了额外的 2 种预设尺寸。
小号尺寸
用户名
有效身份证号码
默认尺寸
用户名
有效身份证号码
大号尺寸
用户名
有效身份证号码
外观类型
配合使用CSS 工具类来实现不同输入框的外观。下面展示各种工具类的外观效果。
html
<div class="input-control">
<input type="text" class="form-control circle" placeholder="请填写" />
</div>
<div class="input-control">
<input type="text" class="form-control shadow" placeholder="请填写" />
</div>
CSS 类
输入框提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
input-control | 实体类 | 元素作为输入框组件 |
input-control-prefix | 工具类 | 输入框前缀元素样式 |
input-control-suffix | 工具类 | 输入框后缀元素样式 |
has-prefix | 工具类 | 标记输入框拥有前缀元素 |
has-suffix | 工具类 | 标记输入框拥有后缀元素 |
has-prefix-icon | 工具类 | 标记输入框拥有前缀图标 |
has-suffix-icon | 工具类 | 标记输入框拥有后缀图标 |
size-sm | 工具类 | 输入框使用小号尺寸 |
size-lg | 工具类 | 输入框使用大号尺寸 |
CSS 变量
输入框提供了如下 CSS 变量,可进行全局修改。
CSS 变量名 | 作用 |
---|---|
--input-fix-width | 输入框前/后缀的默认宽度 |
--input-fix-width-sm | 输入框前/后缀的小号宽度 |
--input-fix-width-lg | 输入框前/后缀的大号宽度 |