关于 angular-material
angular-material 是介绍 Angular 官方组件库 Angular Material 及其 CDK 的技能，面向使用预制组件、主题、无障碍工具和测试参考构建界面的 Angular 开发者。
主要功能
- 01Material Design 3 主题
- 02预制 UI 组件
- 03CDK 交互与布局基础工具
- 04无障碍功能工具
- 05组件测试 harness
- 06Angular Material schematics
适用场景
- 01构建表单、表格、对话框或导航
- 02设置主题的颜色、字体和密度
- 03添加键盘与焦点无障碍行为
- 04使用 harness 测试组件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/angular-material确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/advanced-custom-form-field.mdadvanced-theme-customization.mdreferences/cdk/cdk-a11y.mdcdk-accordion.mdcdk-bidi.mdcdk-clipboard.mdcdk-coercion.mdcdk-collections.mdcdk-dialog.mdcdk-drag-drop.mdcdk-keycodes.mdcdk-layout.mdcdk-listbox.mdcdk-menu.mdcdk-observers.mdcdk-overlay.mdcdk-platform.mdcdk-portal.mdcdk-scrolling.mdcdk-stepper.mdcdk-table.mdcdk-text-field.mdcdk-tree.mdreferences/components/component-autocomplete.mdcomponent-badge.mdcomponent-bottom-sheet.mdcomponent-buttons.mdcomponent-card.mdcomponent-chips.md详细介绍
此技能基于 Angular Material v21.x（v21.2.0-next.2），生成于 2026-01-31。
Angular Material 是 Angular 的官方 UI 组件库，采用 Material Design 3（M3）设计。它提供一套全面的预构建无障碍组件，以及用于构建自定义组件的 Component Dev Kit（CDK）。
适用场景
在以下场景中使用此技能：
- 使用 Angular Material 组件（按钮、表单、对话框、表格等）
- 使用 Material Design 3（M3）色板、排版和密度进行主题设置
- 使用 mat-form-field、输入框、选择框、自动完成或日期选择器
- 实现带排序、分页和筛选功能的数据表格
- 创建对话框、底部弹出框、提示条或工具提示
- 使用侧边导航、菜单、标签页或步骤器构建导航
- 使用 CDK 基础工具（浮层、门户、拖放、虚拟滚动）
- 使用 CDK a11y 工具实现无障碍组件
- 创建与 mat-form-field 集成的自定义表单字段控件
- 使用组件测试工具进行可靠测试
- 使用 Angular Material schematics搭建组件脚手架
在以下场景中，请勿使用此技能：
- 使用其他 UI 库（PrimeNG、ngx-bootstrap 等）
- 在不采用 Material Design 的情况下构建完全自定义的 UI
- 使用 Angular Aria 无头基础工具（请改用 angular-aria 技能）
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| 主题设置 | 包含色板、排版、密度和 CSS 变量的 M3 主题系统 | core-theming |
| Schematics | 用于搭建组件和生成主题的 Angular CLI schematics | core-schematics |
| 组件测试工具 | 用于可靠、易维护地测试组件的测试工具 | core-harnesses |
组件
按钮与指示器
| 主题 | 描述 | 参考 |
|---|---|---|
| 按钮 | 文本按钮、填充按钮、FAB、图标按钮和按钮切换控件 | component-buttons |
| 徽标 | 附加到元素上的小型状态说明 | component-badge |
| 图标 | 支持字体和 SVG 的矢量图标显示 | component-icon |
| 进度 | 进度条和微调器指示器 | component-progress |
表单控件
| 主题 | 描述 | 参考 |
|---|---|---|
| 表单字段 | 带标签、提示和错误信息的表单字段包装器 | component-form-field |
| 输入框 | 与 mat-form-field 配合使用的原生输入框和文本区域 | component-input |
| 选择框 | 支持单选和多选的下拉选择框 | component-select |
| 自动完成 | 带下拉建议项的文本输入框 | component-autocomplete |
| 筹码 | 用于选择、筛选和标签输入的筹码 | component-chips |
| 表单控件 | 复选框、单选按钮、滑动开关和滑块 | component-form-controls |
| 日期选择器 | 日期和日期范围选择器 | component-datepicker |
| 时间选择器 | 通过下拉选项选择时间 | component-timepicker |
布局
| 主题 | 描述 | 参考 |
|---|---|---|
| 卡片 | 用于文本、图像和操作的内容容器 | component-card |
| 分隔线 | 用于区分视觉内容的线条 | component-divider |
| 展开面板 | 可展开面板和折叠面板 | component-expansion |
| 网格列表 | 用于平铺项的二维网格布局 | component-grid-list |
| 列表 | 用于项目、导航、操作和选择的列表 | component-list |
| 树 | 以平面树或嵌套树的形式显示层级数据 | component-tree |
导航
| 主题 | 描述 | 参考 |
|---|---|---|
| 导航 | 侧边导航栏、菜单、工具栏和选项卡 | component-navigation |
| 步进器 | 以步骤形式组织的向导式工作流 | component-stepper |
表格
| 主题 | 描述 | 参考 |
|---|---|---|
| 表格 | 具有多种功能的 Material Design 数据表格 | component-table |
| 排序 | 可排序的列标题 | component-sort |
| 分页器 | 分页数据的分页控件 | component-paginator |
弹出层和模态框
| 主题 | 描述 | 参考 |
|---|---|---|
| 对话框 | 支持数据共享的模态对话框 | component-dialog |
| 底部表单 | 从底部弹出的模态面板 | component-bottom-sheet |
| Snackbar | 简短的通知消息 | component-snackbar |
| 工具提示 | 悬停或聚焦时显示的文本标签 | component-tooltip |
CDK（组件开发工具包）
覆盖层和定位
| 主题 | 描述 | 参考 |
|---|---|---|
| 覆盖层 | 使用定位策略的浮动面板 | cdk-overlay |
| Portal | 动态内容渲染 | cdk-portal |
| 对话框 | 无样式模态对话框的基础 | cdk-dialog |
无障碍
| 主题 | 描述 | 参考 |
|---|---|---|
| 无障碍 | 焦点管理、键盘导航和实时播报器 | cdk-a11y |
数据和集合
| 主题 | 描述 | 参考 |
|---|---|---|
| 表格 | 采用 DataSource 模式的基础数据表格 | cdk-table |
| 树 | 层级树形显示的基础 | cdk-tree |
| 集合 | 用于管理选择状态的 SelectionModel | cdk-collections |
| 虚拟滚动 | 高效渲染大型列表 | cdk-scrolling |
布局和响应式设计
| 主题 | 描述 | 参考 |
|---|---|---|
| 布局 | BreakpointObserver 和 MediaMatcher | cdk-layout |
| 双向文本 | 双向文本（LTR/RTL）处理 | cdk-bidi |
交互
| 主题 | 描述 | 参考 |
|---|---|---|
| 拖放 | 重新排序列表和转移项目 | cdk-drag-drop |
| 剪贴板 | 将文本复制到系统剪贴板 | cdk-clipboard |
| 列表框 | 无障碍自定义列表框控件 | cdk-listbox |
| 菜单 | 无障碍自定义菜单和菜单栏 | cdk-menu |
组件基础
| 主题 | 描述 | 参考 |
|---|---|---|
| 手风琴 | 可展开面板组的基础 | cdk-accordion |
| 步进器 | 类似向导的工作流基础 | cdk-stepper |
实用工具
| 主题 | 描述 | 参考 |
|---|---|---|
| 文本字段 | 自动调整大小的文本区域和自动填充检测 | cdk-text-field |
| 平台 | 浏览器和平台检测 | cdk-platform |
| 观察器 | 内容变更观察 | cdk-observers |
| 类型强制转换 | 输入类型强制转换工具 | cdk-coercion |
| 键码 | 键盘按键代码常量 | cdk-keycodes |
高级
| 主题 | 描述 | 参考 |
|---|---|---|
| 自定义表单字段控件 | 创建自定义 mat-form-field 控件 | advanced-custom-form-field |
| 主题自定义 | 自定义组件中的 CSS 变量和实用工具类 | advanced-theme-customization |
评论
支持 Markdown