Material Web Components 路线图解读维护模式下的规划、方向与已交付能力【免费下载链接】material-webMaterial Design Web Components项目地址: https://gitcode.com/gh_mirrors/ma/material-web导读本文基于 Material Web ComponentsMWC官方 docs/roadmap.md完整解读该项目的开发路线图包括项目当前所处的维护模式状态、曾经规划的未来方向新组件、Design Token 扩展、密度与间距、TSX 支持、Material 布局以及已经完成并交付的历史里程碑。读完本文你将能够准确判断 MWC 当前是否适合引入新组件需求快速对照仓库labs/与tokens/目录定位各规划方向在源码中的实际落地情况并了解从 Material 1.0 至今该项目在组件、主题与无障碍方面已经具备的成熟能力边界。一、当前状态MWC 已进入维护模式路线图在 Current 一节中明确指出Material Web Components 目前处于维护模式maintenance mode。这意味着当前没有规划任何新功能或新组件的开发工作Bug 修复或其他形式的贡献Pull Request仍可能被接受但会逐案评估case-by-case basis路线图中 Future 一节所列的所有项目仅仅是曾经计划过的内容在维护模式下不再安排实施。对于正在选型的团队这一状态是评估依赖风险的关键信息MWC 更适合作为核心 UI 基础设施被稳定使用而非期待其持续快速迭代的功能来源。仓库中 CHANGELOG.md 记录了各版本的变更历史可以据此了解项目的演进节奏。二、曾经规划的未来方向Future维护模式下这些项目不再排期但它们完整勾勒出 MWC 的设计意图与未竟方向也为社区 Fork 或二次开发提供了蓝图。2.1 尚未构建的新组件清单路线图列出了 17 个尚未构建的组件覆盖了 Material 3 规范中大量高阶组件组件说明Autocomplete自动补全输入Badge徽章/角标Banner横幅通知Bottom app bar底部应用栏Bottom sheet底部抽屉面板Card卡片容器Data table数据表格Date picker日期选择器Navigation bar导航栏Navigation drawer导航抽屉Navigation rail导航侧栏Search搜索框Segmented button分段按钮Snackbar轻提示条Time picker时间选择器Top app bar顶部应用栏Tooltip悬浮提示仓库现状对照虽然这些组件未进入正式发布但其中相当一部分已经在labs/目录中以实验组件形式存在例如 Badge、Card、Navigation bar、Navigation drawer、Navigation tab、Segmented button、Item 等。同时tokens/_index.scss 中也已包含md-comp-badge、md-comp-navigation-bar、md-comp-navigation-drawer、md-comp-outlined-segmented-button等对应的设计 Token 定义。需要注意 labs/README.md 中的明确警告实验特性不推荐用于生产环境且可能发生不递增主版本号的破坏性变更。因此引用这些预览实现时应将其视为方向验证而非稳定 API。2.2 扩展 Material Design Token 体系路线图规划了两个 Token 相关方向补充 shape形状与 motion动效系统 Token用于构建更具表现力的 Material 体验让 Design Token 更易用例如将 Material 的 typescale字体等级、shape形状与 color颜色便捷地应用到开发者自己的组件上。仓库现状对照Token 体系的骨架已经相当完整。tokens/目录按 md-ref-参考层与 md-sys-系统层组织例如tokens/_md-sys-shape.scss定义corner-extra-large、corner-medium、corner-full等角半径 Token并区分 supported受支持与 unsupported不受支持如corner-extra-large-top等单角变体两类tokens/_md-sys-motion.scss转发versions/v0_192/md-sys-motion提供动效 Tokentokens/_md-sys-color.scss、tokens/_md-sys-typescale.scss 等对应颜色与字体系统。此外labs/gb/styles/m3.scss 统一引入了 color、elevation、icon、motion、shape、space、typography 全套 Token展示了把 Material 系统能力应用到自有组件的具体集成方式。2.3 密度与间距 TokenDensity and spacing tokens密度Density允许组件在更大的显示设备上占用更少的垂直空间。路线图指出虽然 MWC 已具备部分 spacing token但要全面支持各组件的高密度compact形态还需要一套综合性间距系统。仓库现状对照labs/gb/styles/space/md-space-tokens.scss 已经给出了一套以 8px 为基准单位的间距 Token 方案layer md.sys.space { :root { --md-sys-space-unit: 8px; --md-sys-space-0: calc(var(--md-sys-space-unit) * 0); --md-sys-space-25: calc(var(--md-sys-space-unit) * 0.25); --md-sys-space-50: calc(var(--md-sys-space-unit) * 0.5); --md-sys-space-100: var(--md-sys-space-unit); --md-sys-space-200: calc(var(--md-sys-space-unit) * 2); /* ... 直至 --md-sys-space-900 */ } }可以看到该实现通过单一--md-sys-space-unit基准变量派生全部间距档位这正是路线图所描述的综合 spacing system的实验形态。2.4 创建 TSX 组件TSX 是 TypeScript 对 JSX 的语言扩展广泛用于 React 等框架生态。路线图希望让 MWC 在 TSX 场景下更轻松、更无缝地使用。从仓库现状看tsconfig.base.json 与各组件源码如 button/button.ts均基于 Lit 的customElement装饰器注册自定义元素这类 Web Component 天然可以在 React/TSX 中以原生标签方式引用但 TSX 特有的属性类型推导、事件绑定体验优化仍是路线图想要进一步解决的问题。2.5 探索 Material Design 布局路线图强调组件只是构建完整 Material 应用的一部分计划探索如何支持遵循 Material 布局模式layout patterns的应用构建。这意味着 MWC 的长期愿景不只是提供孤立的 UI 组件而是延伸到页面级的布局与排版能力。该方向目前仍停留在规划层面仓库中尚无对应的正式实现。三、历史里程碑已完成并交付的能力Past3.1 无障碍最佳实践2024 Q1 完成路线图声明 MWC 组件致力于帮助开发者构建无障碍体验并完整支持以下 5 个屏幕阅读器VoiceOverApple 平台TalkbackAndroidChromeVoxChromeOSJAWSWindowsNVDAWindows仓库现状对照无障碍能力并非停留在口号层面。internal/aria/目录提供了 aria.ts 与 delegate.ts 等 AOMAccessibility Object Model辅助模块及对应测试组件内部大量使用aria-*属性与角色管理例如 button/internal/button.ts、dialog/internal/dialog.ts 均包含完整的键盘交互与 ARIA 状态处理。3.2 Cards 与更多2023 Q4 完成该里程碑交付内容如下组件Card 预览版本✅——对应仓库 labs/card/ 目录中的elevated-card、filled-card、outlined-card三种形态例如 elevated-card.ts 注册md-elevated-card自定义元素功能阻止事件默认行为 部分完成我们修复了大量 bug但仍存在改进空间尺寸跟踪✅docs/size.md 记录了组件包体积指标——按 bundle单个.js文件包含组件所需全部 JS 与 CSS分别跟踪gzip压缩传输体积影响弱网下载时长、minified压缩未打包体积影响页面可交互时长等指标文档与示例✅。3.3 Material 1.02023 Q3 完成Material 1.0 是 MWC 的一个重要能力基线交付内容包括主题能力颜色主题Color theming字体主题Typography theming组件全集20 个Button、FAB、Icon button、Checkbox、Chips、Dialog、Divider、Elevation、Focus ring、List、Menu、Progress indicators、Radio、Ripple、Select、Slider、Switch、Tabs、Text field。仓库现状对照这些组件在当前仓库中均以稳定实现存在每个组件目录都包含公开入口、internal/内部实现、样式文件、demo/示例与测试文件例如 button/、checkbox/、dialog/、tabs/ 等对应的组件设计 Token 也全部收录于 tokens/_index.scss从md-comp-button到md-comp-text-field共 40 个组件 Token 模块。主题化文档见 docs/theming/README.md。四、路线图对照表方向与仓库落地位置路线图方向状态仓库落地位置维护模式进行中README.md、CHANGELOG.md新组件Badge/Card/Navigation 等部分以实验形态存在labs/Shape/Motion Token 扩展骨架已就绪tokens/_md-sys-shape.scss、tokens/_md-sys-motion.scss密度与间距 Token实验方案存在labs/gb/styles/space/md-space-tokens.scssTSX 支持规划中tsconfig.base.jsonMaterial 布局规划中暂无对应实现无障碍最佳实践已完成Q1 2024internal/aria/Cards 与更多已完成Q4 2023labs/card/、docs/size.mdMaterial 1.0已完成Q3 2023tokens/_index.scss 及各组件目录五、对开发者的实践启示稳定使用优先维护模式意味着 API 相对稳定、修复按需进行适合将 MWC 作为长期依赖但引入新组件需求时应优先评估社区替代方案或自行扩展。labs 组件需谨慎路线图中未来组件的多数已在 labs/ 有预览实现可在原型阶段试用但需接受其不保证主版本兼容的破坏性变更风险。Token 是定制化主入口无论是颜色、字体、形状还是动效tokens/ 都是统一的设计变量来源间距方向可参考 md-space-tokens.scss 的基准单位方案。无障碍能力有测试保障5 大屏幕阅读器支持与internal/aria/模块、组件测试共同构成了 MWC 的可访问性基线集成时应避免破坏默认的键盘导航与 ARIA 语义。总体而言这份路线图描绘的是一条从 Material 1.0 基础组件 → 高阶组件与 Token 生态 → 布局与框架集成的演进路径尽管项目当前已收敛为维护模式其已交付的组件库、Token 体系与无障碍能力仍然构成了一个完整、可用的 Material 3 Web 实现基座。【免费下载链接】material-webMaterial Design Web Components项目地址: https://gitcode.com/gh_mirrors/ma/material-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考