CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
设计系统入门/课时/复合组件
RawBlame
课时目录12 节

设计系统入门

  1. 01设计系统是什么
  2. 02视觉审计
  3. 03设计令牌
  4. 04布局与栅格
  5. 05核心组件
  6. 06复合组件
  7. 07写作与原则
  8. 08模式与指南
  9. 09工具链
  10. 10治理与贡献
  11. 11运营与社区
  12. 12综合练习

复合组件

Modal/Tabs/Toast/Dropdown。

35 分钟

复合组件

Modal、Tabs、Toast、Dropdown 等组合模式与键盘导航。 与 ux-design-essentials 互补,聚焦可复用组件库与治理。

学习目标

  • Modal focus trap
  • Tabs & keyboard
  • Toast queue
  • Select / Combobox a11y

核心概念

本课对齐 /roadmaps/design-system 对应节点。建议与站内现有课程对照:BI 看 bi-analyst-essentials,体验看 ux-design-essentials,产品看 product-manager-essentials。

示例

role="dialog" aria-modal="true" aria-labelledby="title"

练习

  • 在路线图页面定位本课覆盖的节点
  • 完成一个最小可演示示例或文档
  • 写 2 条与 CodeRoadMap 产品的对照笔记

小结

复合组件(dsys-advanced)完成后进入下一课,或在路线图中标记已掌握节点。

加载本节练习…
← 上一课核心组件下一课 →写作与原则