Component State 组件状态
组件状态像交通灯。按钮是正常、悬停、聚焦、加载、禁用还是错误,用户要一眼看出来。状态不清楚,用户就会反复点击、犹豫或误操作。
关键结构图
同一个按钮排列成 default、hover、focus、loading、disabled、error 六个样式样本。
What
Component State 是组件用视觉和行为表达“现在能不能操作、发生了什么”的状态语言。
Component State 组件状态是组件在不同交互、数据和系统条件下的视觉表现与行为规则。常见状态包括 default、hover、focus、active、selected、disabled、loading、error 和 success。它的边界是表达当前可操作性和反馈,不是给组件增加装饰变化。
StructureComponent State = 当前条件 + 可操作性 + 反馈样式 + 行为规则
When
当组件可点击、可输入、可选择、会加载、会失败或会被禁用时,都需要明确组件状态。
How
先列出组件可能遇到的条件,再为每个状态定义视觉、行为和可访问语义。状态之间要能互斥或组合,例如 loading 时按钮不能重复提交。
Examples
提交按钮点击后进入 loading 状态,文案变成 提交中,并禁止重复点击。完成后显示成功反馈或错误路径。
输入框聚焦时边框高亮,错误时显示错误说明。两者同时出现时,要决定聚焦和错误哪个表达优先。
来源
类型:设计系统实践 / 可访问性原则
事实线:设计系统通常为按钮、输入框、tabs、卡片等组件定义交互状态和可访问状态,以保证行为一致。
依据:Material Design state guidance、WAI-ARIA interaction patterns、常见组件库实践。
边界:适用于可交互组件;纯静态内容不需要伪造复杂状态。
常见误读:不要只靠颜色表达状态。文字、图标、边框、焦点和 ARIA 状态也可能需要配合。