SuperAPI AI 工具集

m3-web-angular

前端与建站

查看项目

更新于 10-16 08:39

技能介绍

用途:在 Angular 项目中落地 Material Design 3(M3)。官方 Angular Material 自 v17.2+ 起提供一等 M3 支持,该技能面向 Angular 项目、需要官方 Google M3 支持的企业应用,以及使用 Angular CLI 与 schematics 的工程。

主要能力:通过设计令牌、SCSS mixin 与 CLI schematics 完成完整 M3 主题化;示例覆盖按钮(filled、outlined、text、fab)、卡片(raised)、文本字段(outline、fill)、导航(toolbar、tab-group、sidenav)与对话框(MatDialog);同时演示亮色与暗色主题变体,并提供 m3-theme.scss 可复用主题文件(橙色调,含亮暗两套)。

使用方式:安装执行 ng add @angular/material;生成主题执行 ng generate @angular/material:m3-theme;在 SCSS 中用 @use '@angular/material' as mat; 与 mat.define-theme 定义主题,根级应用 mat.all-component-themes,暗色主题类下应用 mat.all-component-colors。组件通过 color="primary" 等绑定接入主题。

限制与说明:正文未给出收费、价格或性能数据,均暂未提供;具体版本兼容与迁移细节需参考官方主题化指南与 M3 迁移文档。