SuperAPI AI 工具集

angular-material-developer

前端与建站

查看项目

更新于 10-16 01:17

技能介绍

用途:为使用 @angular/material 的 Angular 项目生成代码与开发指导,重点处理 Material 3(M3)主题体系,并与 angular-developer 技能配合,后者提供信号、依赖注入、路由、表单、SSR、无障碍等 Angular 基础内容。

兼容范围:跟踪 @angular/material@22.1.1 与 @angular/cdk@22.1.1,两者需一起固定版本;旧项目对应 21.2.x。适用于 Material v19 至 v22,要求 Angular v19 及以上,v22 需 Node 22 或 26 与 TypeScript 6,并假定使用独立组件、控制流(@if / @for)与基于信号的 API。主题需要 Sass,不支持仅用 CSS 做主题。不支持 Material v18 及以下和 Angular v18 及以下。

主要能力:区分 M3 与旧版 M2 主题写法,识别 @include mat.theme() 与 mat.define-light-theme / mat.define-dark-theme 的差异;覆盖 40 多个组件类别,包括表单控件、按钮与指示器、布局、导航、弹出与模态、数据表格;覆盖 CDK 基础件(Overlay、Portal、A11y、拖放、虚拟滚动等);提供表单集成(ReactiveForms 与 v22 Signal Forms)、无障碍实践与 v19 到 v22 的迁移要点。

使用方式:安装可用 ng add @angular/material,或按资料手动安装。v21.2+ 与 v22 不再声明 @angular/animations 依赖,改用原生 CSS 动画,新项目无需添加 provideAnimationsAsync() 或 @angular/animations,v21.x 与 v18-20 项目仍需该 provider。组件自 v15 起为独立组件,应从 @angular/material/<component> 导入独立类,而非旧的 MatButtonModule 等模块。生成代码后运行 ng build 验证。升级时优先运行 ng update @angular/material 由原理图处理重命名,如 v22 中 SimpleCombobox 提升为 Combobox、MatListOption.checkboxPosition 改为 togglePosition、多个组件 values 改为 value 等。

限制与注意:若在 v19+ 项目沿用旧 M2 语法,代码可编译但不生成 CSS 变量;缺少 @angular/cdk 或 provideAnimationsAsync 会导致交互与动画失效;MatTable 未接 MatSort / MatPaginator 时表头排序界面无效。资料未提供具体收费、价格与平台信息,暂未提供。