每日分享:5.组件详解——表单n

修炼中的DOT

2019-10-16

原创文章

204

0

1

经验分类:规范/资料/原创文章

表单类


首先推荐一个网站: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

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票