表单类

首先推荐一个网站：https://element.eleme.cn/#/zh-CN/component/installation。网站中对组件的展示和描述比较全面，是一个不错的参考。

图片标题

结合以上网站，我们来总结一下表单类样式：

表单：由选择控件、开关滑块、输入框等控件组成，用以收集、校验、提交数据 。

1.单选：

单选一般用圆点样式，但因为点击范围小，反馈不明显，在移动端上更多设计为按钮样式。

圆点样式：

也可用按钮样式：

2.复选：

复选一般用矩形+打勾样式，但移动端更多使用按钮样式：

也可用按钮样式：

3.选择器：

选择器由文本框+下拉选择器组成。文本框内还可有输入关键字搜索功能。

文本框需要由默认状态、鼠标悬浮状态、点击后出现下拉框时的状态（选择、输入状态）、不可点选状态等。

4.日期时间选择器date timePicker

点击文本框后弹出选择器，以下lie：

5.颜色选择器：

6.步进器、计数器

7.开关

8.滑块：

9.输入框、文本框：

要注意输入前、鼠标悬浮、点击输入中、输入完成四个状态应有所不同：

输入前：边框线+弱化的文字

鼠标悬浮：边框线颜色加深+弱化的文字（触屏状态无此状态）

输入中：边框颜色变为主题色+正常颜色的文字

输入完成：边框线+正常颜色的文字

10.上传

上传图片、文件。可以显示出上传进度、状态、缩略图等。

11.评分

12.Transfer 穿梭框

Powered by Froala Editor