Angular Material 是 Angular 官方 UI 组件库，实现 Material Design 3（M3），提供一整套预构建、可访问的组件，以及用于构建自定义组件的 Component Dev Kit（CDK）。本技能基于 Angular Material v21.x（v21.2.0-next.2）生成，生成时间为 2026-01-31。
适用场景
在以下情况使用本技能：
- 使用 Angular Material 组件（按钮、表单、对话框、表格等）
- 使用 Material Design 3（M3）调色板、排版、密度进行主题化
- 使用 mat-form-field、输入框、select、autocomplete 或 datepicker
- 实现带排序、分页和筛选的数据表格
- 创建对话框、底部面板、snackbar 或 tooltip
- 使用 sidenav、菜单、标签页或步骤条构建导航
- 使用 CDK 原语（overlay、portal、drag-drop、虚拟滚动）
- 使用 CDK a11y 工具实现可访问组件
- 创建与 mat-form-field 集成的自定义表单字段控件
- 使用组件测试 harness 进行可靠测试
- 使用 Angular Material schematics 搭建组件
以下情况不要使用本技能：
- 使用其他 UI 库（PrimeNG、ngx-bootstrap 等）
- 完全自定义 UI，不使用 Material Design
- 使用 Angular Aria 无头原语（请改用 angular-aria 技能）
核心参考
- 主题化：M3 主题系统，含调色板、排版、密度和 CSS 变量（core-theming）
- Schematics：用于搭建组件和生成主题的 Angular CLI schematics（core-schematics）
- 组件测试 harness：用于可靠、可维护组件测试的测试 harness（core-harnesses）
组件
按钮与指示器
- 按钮：文本、填充、FAB、图标按钮和按钮切换（component-buttons）
- 徽章：附加到元素的小型状态描述符（component-badge）
- 图标：支持字体和 SVG 的矢量图标显示（component-icon）
- 进度：进度条和加载指示器（component-progress）
表单控件
- 表单字段：带标签、提示、错误信息的表单字段包装器（component-form-field）
- 输入：与 mat-form-field 配合的原生 input 和 textarea（component-input）
- Select：支持单选和多选的下拉选择（component-select）
- Autocomplete：带下拉建议的文本输入（component-autocomplete）
- Chips：用于选择、筛选和标签输入的 chips（component-chips）
- 表单控件：复选框、单选按钮、滑动开关、滑块（component-form-controls）
- Datepicker：日期和日期范围选择器（component-datepicker）
- Timepicker：带下拉选项的时间选择（component-timepicker）
布局
- 卡片：用于文本、图像、操作的内容容器（component-card）
- 分割线：用于视觉内容分隔的线条分隔符（component-divider）
- 展开面板：可展开面板和手风琴（component-expansion）
- 网格列表：用于磁贴的二维网格布局（component-grid-list）
- 列表：用于项目、导航、操作、选择的列表（component-list）
- 树：使用平面/嵌套树显示层级数据（component-tree）
导航
- 导航：sidenav、菜单、工具栏和标签页（component-navigation）
- 步骤条：向导式工作流与步骤（component-stepper）
表格
- 表格：带功能的 Material Design 数据表格（component-table）
- 排序：可排序列标题（component-sort）
- 分页器：用于分页数据的分页控件（component-paginator）
弹出与模态
- 对话框：支持数据共享的模态对话框（component-dialog）
- 底部面板：从底部弹出的模态面板（component-bottom-sheet）
- Snackbar：简短通知消息（component-snackbar）
- Tooltip：悬停/聚焦时显示的文本标签（component-tooltip）
CDK（Component Development Kit）
覆盖与定位
- Overlay：带定位策略的浮动面板（cdk-overlay）
- Portal：动态内容渲染（cdk-portal）
- Dialog：无样式模态对话框基础（cdk-dialog）
无障碍
- Accessibility：焦点管理、键盘导航、实时播报器（cdk-a11y）
数据与集合
- Table：采用 DataSource 模式的基础数据表格（cdk-table）
- Tree：层级树显示的基础（cdk-tree）
- Collections：用于管理选择状态的 SelectionModel（cdk-collections）
- Virtual Scrolling：高性能渲染大型列表（cdk-scrolling）
布局与响应式
- Layout：BreakpointObserver 和 MediaMatcher（cdk-layout）
- Bidi：双向性（LTR/RTL）处理（cdk-bidi）
交互
- Drag and Drop：重新排序列表和传输项目（cdk-drag-drop）
- Clipboard：将文本复制到系统剪贴板（cdk-clipboard）
- Listbox：可访问的自定义列表框控件（cdk-listbox）
- Menu：可访问的自定义菜单和菜单栏（cdk-menu）
组件基础
- Accordion：可展开面板组的基础（cdk-accordion）
- Stepper：向导式工作流的基础（cdk-stepper）
工具
- Text Field：自动调整大小的 textarea 和自动填充检测（cdk-text-field）
- Platform：浏览器和平台检测（cdk-platform）
- Observers：内容变更观察（cdk-observers）
- Coercion：输入类型强制转换工具（cdk-coercion）
- Keycodes：键盘键码常量（cdk-keycodes）
高级
- 自定义表单字段控件：创建自定义 mat-form-field 控件（advanced-custom-form-field）
- 主题定制：自定义组件中的 CSS 变量和工具类（advanced-theme-customization）