UI 组件状态与变体 / Loading
Loading
组件正在等待异步结果的状态。
Identity · 身份
- 子类型
- 状态或变体
- 父级类目
- Data Grid、Search Results、Action Group、Toggle Group、Segmented Control、Menubar、Navigation Menu、Service Navigation、Bottom Navigation、App Bar、Callout、Account / Profile、Changelog Page、Checkout Flow、Community Page、Confirmation Page、Contact / Lead Page、Conversation Page、CRUD Management、Documentation Shell、Email Verification、Error Page、Event Registration Flow、Feed / Stream Page、File Browser、Inbox、Job Listing Page、Master–Detail Workspace、Media Gallery Page、MFA / Verification、Notification Center Page、Password Reset、Pricing & Plan Selection、Product Detail Page、Resource Directory、Search Results Page、Settings Page、Shopping Cart、Inline Alert、Alert Dialog、Contextual Help、Toggletip、Confirmation Popover、Action Bar、Speed Dial、Resizable Panel、Splitter、List View、Card Grid、Media Card、Product Card、Testimonial Card、Button、Input、Select
What · 是什么
- 定义
- 组件正在等待异步结果的状态。
- 实现表现
- 保留布局并给出适度进度或等待提示。
Why · 为什么
- 实现目标
- 避免无限无说明等待,必要时提供取消或重试。
How · 怎么做
- 实现说明
- 默认值明确;状态转换可预测;键盘和触摸路径完整;读屏可感知;高对比和 reduced motion 下仍可用。
Evidence · 证据
- 局限与边界
- 使用语义状态、可见焦点、文本等价和适当的 ARIA 属性表达;不只依赖颜色、动画或声音。
Lifecycle · 生命周期
- 状态
- 启用
适用组件类型与部件
关系来自本地关系表,并包含反向关联。
- ButtonButton属于
触发动作、提交选择或打开流程。
- InputInput属于
接收用户输入,并提供焦点、错误和只读反馈。
- SelectSelect属于
Select 如何在界面中被理解、操作或组合?
- Action BarAction Bar属于
在列表、表格或对象上下文中集中呈现批量和主要操作。
- Action GroupAction Group属于
把多个相关操作组合为一致的动作集合。
- Alert DialogAlert Dialog属于
要求用户确认、处理或理解高影响信息的模态警示对话框。
- App BarApp Bar属于
结合品牌、导航、页面标题和全局操作的应用顶部栏。
- Audio PlayerAudio Player反向 · 应用于
组合播放、暂停、进度、音量和媒体信息的音频播放器。
- Bottom NavigationBottom Navigation属于
在移动或窄屏界面中提供固定的一级目的地切换。
- CalloutCallout属于
用显著的视觉容器强调补充信息、解释或行动建议。
- Card GridCard Grid属于
把多个卡片按响应式栅格、列数和间距组织起来。
- CascaderCascader反向 · 应用于
按层级逐步选择国家、分类、目录或其他树状选项。
- Color PickerColor Picker反向 · 应用于
把颜色区域、滑块、预览、输入和最近使用值组合起来。
- Comment ComposerComment Composer反向 · 应用于
提供评论、回复、提及、附件和提交动作的编辑器。
- Comment ThreadComment Thread反向 · 应用于
以层级、作者、时间和回复动作组织评论讨论。
- Confirmation PopoverConfirmation Popover属于
在原地确认危险或不可逆操作,避免完整模态打断。
- Contextual HelpContextual Help属于
在不打断主要流程的情况下提供字段或任务上下文帮助。
- Data GridData Grid属于
支持列、行、编辑、选择和数据操作的高密度表格
- Data ListData List反向 · 应用于
以标签和值的配对结构展示对象属性或摘要数据。
- Date Range CalendarDate Range Calendar反向 · 应用于
在日历视图中选择、预览和修改日期范围。
- Disclosure GroupDisclosure Group反向 · 应用于
把多个可展开的说明、细节或相关内容组织成组。
- Discussion ThreadDiscussion Thread反向 · 应用于
在对象上下文中组织多轮讨论、状态和参与者。
- File Drop AreaFile Drop Area反向 · 应用于
提供拖拽、选择、预览和移除文件的上传入口。
- Filter Chip GroupFilter Chip Group反向 · 应用于
把当前应用中的筛选条件呈现为可删除、可编辑的标签组。
- Image ViewerImage Viewer反向 · 应用于
支持缩放、旋转、平移和替代文本的图片查看器。
- Inline AlertInline Alert属于
在当前内容上下文中报告重要提醒、错误或状态变化。
- LightboxLightbox反向 · 应用于
将图片、视频或媒体放大到聚焦上下文中并支持关闭和导航。
- List ViewList View属于
以可排序、选择、分页或虚拟化方式展示一组对象。
- Live RegionLive Region反向 · 应用于
为异步变化、通知和状态更新提供辅助技术可感知的消息区域。
- Media CardMedia Card属于
结合图片、视频或音频预览、元信息和动作的内容卡片。
- Mention InputMention Input反向 · 应用于
在文本编辑过程中搜索并插入用户、团队或对象提及。
- MenubarMenubar属于
提供桌面应用式的顶层菜单组和键盘导航。
- Navigation MenuNavigation Menu属于
组织站点、产品或应用的主导航及其子级入口。
- Product CardProduct Card属于
呈现产品、价格、规格、库存和购买操作的商业卡片。
- Progress TrackerProgress Tracker反向 · 应用于
用步骤、状态和完成度表达长任务或流程进展。
- Query BuilderQuery Builder反向 · 应用于
用字段、运算符和值构造可保存或复用的结构化查询。
- Quote CardQuote Card反向 · 应用于
以引用文本、来源和上下文强调一条内容或观点。
- Resizable PanelResizable Panel属于
允许用户拖拽调整面板、列或区域尺寸的复合容器。
- Result PanelResult Panel反向 · 应用于
在操作或查询完成后集中呈现结果、解释和后续动作。
- Review SummaryReview Summary反向 · 应用于
聚合评分、分布、评论数量和代表性评论的评价摘要。
- Rich Text FieldRich Text Field反向 · 应用于
提供带格式文本、链接、列表和嵌入内容的编辑字段。
- Search ResultsSearch Results属于
展示搜索命中、摘要、筛选和空结果反馈的结构
- Segmented ControlSegmented Control属于
在有限的互斥选项中快速切换视图、模式或筛选条件。
- Service NavigationService Navigation属于
在政府、机构或大型服务站点中保持全局服务入口的导航。
- Sort BarSort Bar反向 · 应用于
在结果列表或内容集合上提供排序依据和方向控制。
- Sortable TableSortable Table反向 · 应用于
为数据表增加排序、选择、密度和键盘操作的复合能力。
- Speed DialSpeed Dial属于
将多个次要操作收纳在一个可展开的浮动操作入口中。
- SplitterSplitter属于
把相邻区域分成可拖拽调整大小的面板。
- Summary BoxSummary Box反向 · 应用于
集中呈现任务、页面或对象的关键信息与下一步动作。
- Tag PickerTag Picker反向 · 应用于
搜索、创建和移除多个标签的字段组合。
- Testimonial CardTestimonial Card属于
以头像、引用、姓名和身份呈现一条用户证言。
- Time Range PickerTime Range Picker反向 · 应用于
选择开始与结束时间并处理跨日、时区和步长。
- Toggle GroupToggle Group属于
把多个互斥或可多选的切换项组织为一个选择组。
- ToggletipToggletip属于
通过点击或聚焦触发、可被关闭的短提示浮层。
- Transfer ListTransfer List反向 · 应用于
在两个列表之间移动、搜索和排序可选对象。
- Upload QueueUpload Queue反向 · 应用于
管理多文件上传的队列、进度、错误、重试和取消。
- Video PlayerVideo Player反向 · 应用于
组合播放控制、时间轴、字幕、音量和全屏能力的视频播放器。
- Account / ProfileAccount / Profile属于
查看和管理个人资料、偏好、凭证与账户动作的页面。
- Changelog PageChangelog Page属于
按版本、日期和主题呈现产品更新及影响的页面。
- Checkout FlowCheckout Flow属于
从购物车、地址、支付到确认的交易完成流程。
- Community PageCommunity Page属于
围绕成员、讨论、活动和参与动作构建的社区页面。
- Confirmation PageConfirmation Page属于
在任务、交易或提交完成后总结结果并提供后续动作的页面。
- Contact / Lead PageContact / Lead Page属于
收集联系信息、需求和来源并完成转化的页面。
- Conversation PageConversation Page属于
围绕对话消息、参与者、输入和上下文组织的交流页面。
- CRUD ManagementCRUD Management属于
围绕创建、读取、编辑、删除和批量管理对象的后台页面模式。
- Documentation ShellDocumentation Shell属于
以侧边导航、正文、目录、版本和搜索组成的文档阅读模板。
- Email VerificationEmail Verification属于
确认邮箱地址并处理过期、重发和成功状态的流程。
- Error PageError Page属于
在路由、权限、服务器或内容不可用时提供解释和恢复入口的页面。
- Event Registration FlowEvent Registration Flow属于
从活动信息、报名、支付/确认到提醒的事件参与流程。
- Feed / Stream PageFeed / Stream Page属于
按时间、相关性或状态连续呈现内容、活动或更新的页面。
- File BrowserFile Browser属于
浏览、搜索、排序、选择和管理文件与文件夹的工作区页面。
- InboxInbox属于
以列表、详情、筛选、已读状态和批量操作处理消息或任务的工作区。
- Job Listing PageJob Listing Page属于
按筛选和详情浏览职位并启动申请的招聘页面。
- Master–Detail WorkspaceMaster–Detail Workspace属于
左侧集合/列表与右侧详情/编辑区联动的工作台布局。
- Media Gallery PageMedia Gallery Page属于
以网格、筛选、预览和详情查看媒体资产的页面。
- MFA / VerificationMFA / Verification属于
通过一次性密码、设备或其他因子完成身份确认的流程。
- Notification Center PageNotification Center Page属于
聚合通知、筛选、已读和跳转动作的页面级模式。
- Password ResetPassword Reset属于
帮助用户安全找回或重设凭证的页面流程。
- Pricing & Plan SelectionPricing & Plan Selection属于
比较方案、解释权益并引导选择或开始订阅的页面流程。
- Product Detail PageProduct Detail Page属于
围绕一个产品或对象组织媒体、属性、证明、价格和操作的页面。
- Resource DirectoryResource Directory属于
用筛选、分类和卡片/列表组织资源、案例或下载内容的目录页面。
- Search Results PageSearch Results Page属于
搜索、筛选、排序、分页和结果反馈组成的发现型页面。
- Settings PageSettings Page属于
按领域组织偏好、权限、账户和系统设置的管理页面。
- Shopping CartShopping Cart属于
管理待购买商品、数量、价格、优惠和下一步结算动作的页面。