当页面上的元素或操作较多时且视觉层次弱于下拉框时，用此控件收纳元素或操作。通常鼠标移入触点，会出现一个下拉浮层。可在列表中进行选择，并执行相应的命令。

在浮层展开时，图标顺时针翻转且同时变成红色；浮层收起时，图标逆时针翻转且同时由红色变为默认颜色。

　　翻页控件

定义：一组提供翻页功能的按钮。

示例：比较完整的版本（具体形式需根据业务需求而定）

简化版

　　翻页控件状态（以例1做说明）

　　翻页控件使用场景及注意事项

当加载或者渲染所有数据将花费很多时间时，建议使用翻页将数据分为几部分加载。

　　时间拾取器

定义：为用户提供时间选择或日期选择的控件。

示例：选择时间

示例：选择日期

　　时间拾取器使用场景及注意事项

　　当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。

　　数量控件

定义：用于数量选择的控件。

示例：微调数量控件

示例：下拉数量控件

　　数量控件使用场景及注意事项

当在连续且较短区间，一般为 10 以内取值时使用微调数量控件。

微调数量控件也支持数字直接输入，默认数量为1，当数值为1时，减少按钮禁用。

当非连续、取值范围较大的场景时使用下拉数量控件。下拉数量控件不支持数字直接输入，系统按业务需求规则默认一些数值供用户选择。

为了页面保持一致，若旁边有其他下拉控件时可考虑把微调数量控件以下拉控件方式使用。

　　Tab选项卡

　　定义：在页面内切换内容的功能控件。

　　Tab选项卡状态

　　Tab选项卡使用场景及注意事项

　　各选项卡内容模块之间是相互独立的，按照模块内容重要性以及用户使用 频率从前往后排列。

　　滑动条

　　定义：展示当前值和可选范围的滑动输入器。

　　滑动条类型

　　滑动条使用场景及注意事项

　　连续数值型滑动条一般数值以较小变量变化，建议在其后面增加自定义数值输入框，方便用户精确输入。

　　加载控件

　　定义：用于反馈需要2秒以上才能完成的系统进程的控件。

　　常见类型

　　加载控件使用场景及注意事项

模块或正文初始内容加载、表单提交按钮提交后的加载、滚屏加载、加载更多等用通用加载控件。

官网中产品展示图初始化加载时使用图片加载控件。

上传大文件 / 加载需要较久时间的文件，使用显示进度的加载控件。

官网专题页宣传时，需要配合主题的加载使用自定义加载控件。

　　投稿邮箱：[email protected]

　　本文由作者授权早读课发表，转载请联系作者。

　　优秀人才不缺工作机会，只缺适合自己的好机会。但是他们往往没有精力从海量机会中找到最适合的那个。

　　100offer 会对平台上的人才和企业进行严格筛选，让「最好的人才」和「最好的公司」相遇。

　　扫描下方二维码，注册 100offer，谈谈你对下一份工作的期待。一周内，收到 5-10 个满足你要求的好机会！