用途:为现代 Web 与 Angular 应用提供 Material Design 3(Material You)设计系统指导,适用于新建 Angular 应用、从 Material Design 2 迁移、创建自定义主题、实现动态配色、构建无障碍现代 UI 组件、遵循 Material You 原则以及使用 M3 排版与间距系统。
主要能力:介绍 M3 核心概念,包括颜色系统(primary、secondary、tertiary、error、surface 及 on-colors、container 等角色与变体)、动态配色(从源色生成配色方案,支持明暗主题与自动对比度调整)、五级排版(display、headline、title、body、label)、三种高度策略(阴影、叠加、组合)以及圆角形状尺度(0dp 到 28dp)。
使用方式:在 Angular 中通过 @use '@angular/material' as mat 引入,先 @include mat.core(),再用 mat.define-palette 与 mat.define-theme 定义主题,最后 @include mat.all-component-themes 应用;组件样式使用 var(--mat-sys-primary)、var(--mat-sys-on-primary)、var(--mat-sys-headline-large)、var(--mat-sys-level1) 等令牌。暗色主题通过 .dark-theme 类配合 mat.all-component-colors 切换。
适用场景:Angular Material v15+ 项目的主题定制、动态换肤、无障碍对比度与触控目标(最小 48x48dp)实现、响应式断点适配,以及 M2 到 M3 的迁移(替换调色板、改用设计令牌、更新排版与高度写法)。
限制:资料未提供具体安装命令、版本兼容细节、收费或价格信息;部分示例代码依赖 Angular Material 环境,需自行确认版本与字体(如 Roboto)加载。