术语库

Select

点击后展开选项列表，从中选一项或多项，收起时只占一个输入框的位置，适合选项较多的情况。

Checkbox

可以打勾和取消的小方框，用来从一组选项里选多个，或单独勾选「同意协议」这类确认项。

Radio

一组圆形的选项，只能选中其中一个，选了新的会自动取消原来的，适合 2~5 个互斥选项。

Switch

像电灯开关一样的滑动小控件，表示某个功能开启或关闭，拨动后通常立即生效。

Slider

在一条横轨上拖动圆形滑块来选择数值或范围，适合音量、亮度、价格区间这类不要求精确的调节。

Date Picker

点击输入框后弹出一个小日历，让用户点选日期或日期范围，避免手动输入格式不统一。

Upload

让用户从电脑或手机里选择文件、图片并传到服务器的控件，可以点按钮选择，也可以把文件拖进来。

Form

把多个输入控件、字段名、校验提示和提交按钮组织在一起，用来收集并提交用户填写的信息。

Search Box

带放大镜图标的输入框，输入关键词后按回车或点搜索按钮，在页面、列表或全站中查找内容。

Navbar

固定在页面最上方的一条横栏，放网站标志、主要栏目链接，以及搜索、登录等全局入口。

Sidebar Menu

竖着排在页面左侧的导航菜单，能放很多栏目并按层级展开，常见于后台管理系统和文档站。

Breadcrumb

显示当前页面在网站层级中所处位置的一行路径，例如「首页 / 商品 / 详情」，可点击返回上级。

Tabs

一排可点击的标签，点哪个就在下方显示对应的内容面板，用来在同一位置切换几块平级的内容。

Pagination

把大量数据分成多页显示，用页码和上一页、下一页按钮在各页之间跳转。

Steps

用一排带编号的节点和连线，显示一个多步骤流程的全部步骤，以及用户当前做到了第几步。

Dropdown Menu

点击或悬停某个按钮后弹出的一列选项，用来收纳一组相关的操作或跳转链接，选完即收起。

Table

用行和列排列多条结构相同的数据，每行一条记录、每列一个字段，方便横向比较、排序和筛选。

List

把多条内容纵向一条接一条排列，每条通常是标题加一两行说明，适合逐条浏览和点击进入详情。

Card

一块带边框或阴影的独立矩形区域，把一组相关的图片、标题、说明和操作收在一起，自成一体。

Avatar

用圆形或圆角方形的小图片代表一个人或一个账号，没有图片时显示姓名首字或默认图标。

Badge

叠在图标、头像或按钮右上角的小红点或小数字，提醒用户这里有未读消息或新内容。

Tag

放在文字旁边的小块圆角标记，用几个字表示分类、状态或属性，例如「已发货」「前端」。

Tooltip

鼠标悬停或键盘聚焦在某个元素上时，在旁边弹出的一小段深色说明文字，移开即消失。

Popover

点击或悬停某个元素后，在它旁边弹出的小卡片，可以放标题、几行说明甚至按钮。

Modal

在页面正中弹出的窗口，背后加遮罩，用户必须处理完或关闭它才能继续操作页面。

Drawer

从屏幕边缘滑出的面板，在不离开当前页面的情况下查看详情或填写表单。

Toast

操作后在屏幕顶部或底部短暂出现的一行小提示，几秒后自动消失，不打断用户。

Alert

固定显示在页面或区块内的带色提示横条，用来说明当前状态、风险或需要注意的事项。

Notification

从屏幕角落（通常是右上角）弹出的消息卡片，带标题和正文，用来提醒新消息或后台任务结果。

Progress

用一条逐渐填满的横条或圆环，显示任务完成了多少，让用户知道还要等多久。