Angular Material 是 Angular 官方维护的 Material Design 组件库，为 Angular 应用提供 50 多个生产可用组件，内置无障碍、主题与 TypeScript 支持。
【用途】 本技能适用于使用 Material Design 构建 Angular 应用，包括：使用 Material 表单控件实现表单、创建带排序/分页/筛选的数据表格、使用 sidenav 与工具栏构建导航、实现对话框/提示条/底部面板、使用 Material 图标与按钮、创建自定义主题，以及满足无障碍合规要求。
【主要能力与规则】 安装与配置：必须安装 @angular/material、@angular/cdk、@angular/animations；必须在 app.config.ts 中配置 provideAnimations()；必须导入具体 Material 模块（如 MatButtonModule、MatIconModule）；禁止使用通配符导入全部模块。
表单控件：所有 matInput 必须包裹在 <mat-form-field> 中并配 <mat-label>；必须使用 appearance="outline" 或 "fill"；必须配合响应式表单；必须用 <mat-error> 提供校验错误信息；日期选择器须使用 MatDatepickerModule 与 MatNativeDateModule。
导航组件：<mat-sidenav-container> 必须设置明确高度；导航列表使用 mat-nav-list 配合 @for 与 track；语义化样式使用 color 属性（primary、accent、warn）。
按钮与图标：按场景选用 mat-button、mat-raised-button、mat-flat-button、mat-stroked-button、mat-icon-button、mat-fab、mat-mini-fab；纯图标按钮必须提供 aria-label；须在 index.html 中引入 Material Icons 字体。
数据表格：必须定义 displayedColumns；使用 matColumnDef、mat-header-cell、mat-cell 定义列；使用 MatSort 指令与 mat-sort-header 排序；在 ngAfterViewInit() 中设置 dataSource.sort 与 dataSource.paginator；分页使用 MatPaginator 并配置 [pageSize] 与 [pageSizeOptions]。
对话框与弹窗：注入 MatDialog 服务打开对话框；使用 <h2 mat-dialog-title>、<mat-dialog-content>、<mat-dialog-actions> 结构；操作按钮使用 [mat-dialog-close]；在 open 选项中配置宽度；订阅 afterClosed() 获取结果。
主题：SCSS 中使用 @use '@angular/material' as mat；用 mat.define-palette() 定义调色板；用 mat.define-light-theme() 或 mat.define-dark-theme() 创建主题；通过 @include mat.all-component-themes($theme) 应用。
无障碍：所有表单字段提供标签；纯图标按钮添加 ARIA 属性；保证键盘导航支持；使用语义化颜色属性。
性能：只导入所需的 Material 模块；对重量级组件使用 @defer 懒加载；大列表使用虚拟滚动。
【安装方式】 使用 Angular CLI（推荐）：ng add @angular/material 或使用 npm/pnpm：pnpm install @angular/material @angular/cdk @angular/animations
【应用配置示例】 app.config.ts（Angular 20+ standalone）： import { provideAnimations } from '@angular/platform-browser/animations'; export const appConfig: ApplicationConfig = { providers: [ provideAnimations(), // ... other providers ] };
【组件示例（独立组件）】 import { Component } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatToolbarModule } from '@angular/material/toolbar';
@Component({
selector: 'app-header',
standalone: true,
imports: [MatButtonModule, MatIconModule, MatToolbarModule],
template: <mat-toolbar color="primary"> <span>My App</span> <span class="spacer"></span> <button mat-icon-button> <mat-icon>menu</mat-icon> </button> </mat-toolbar>
})
export class HeaderComponent {}
【核心组件分类】 表单控件：输入与文本字段（MatInputModule、MatFormFieldModule）、选择与自动补全（MatSelectModule、MatAutocompleteModule）、复选框与单选按钮（MatCheckboxModule、MatRadioModule）、日期与时间选择器（MatDatepickerModule、MatNativeDateModule）。 导航组件：工具栏（MatToolbarModule）、侧边导航（MatSidenavModule）、标签页（MatTabsModule）。 布局组件：卡片（MatCardModule）、网格列表（MatGridListModule）。 按钮与指示器：各种按钮变体、进度圈（MatProgressSpinnerModule）、进度条（MatProgressBarModule）。 弹窗与模态：对话框（MatDialogModule）、提示条（MatSnackBarModule）、底部面板（MatBottomSheetModule）。 数据表格：MatTableModule、MatSortModule、MatPaginatorModule，支持排序与分页。
【适用场景】 需要遵循 Material Design 规范的 Angular 20+ 应用；需要表单、表格、导航、弹窗等开箱即用组件；需要自定义主题或无障碍合规的项目。
【限制】 本技能资料未提供收费、价格、平台兼容版本范围等具体信息。仅适用于 Angular 20+ 应用（按资料描述）；部分组件样式与行为依赖 Angular Material 官方实现，资料未说明与旧版本 Angular 的兼容情况。推荐将技能文件放置于项目级目录：/.github/skills/angular-material/SKILL.md，Copilot 在处理 Angular Material 组件时会加载该技能。