尧图网站建设 
Angular Material Experimental在 Angular 项目中使用实验性 Material 组件安装、Sass 配置与 MDC 主题实践【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components导读angular/material-experimental是 Angular Material 官方仓库中用于承载原型组件与实验功能的独立 npm 包它与 Angular Material 同步发布但其中任何内容都不视为稳定或生产就绪。本文基于 src/material-experimental/README.md 及其仓库源码完整讲解该包的安装步骤、angular.json中 Sass include path 的必要配置、组件的导入与模板用法以及带-mdc后缀的主题与排版 mixin 的正确组合方式读完本文你将能够在已有 Angular Material 应用上以最小成本接入实验性组件并理解其背后的包结构与源码实现。注意本文所述实验性 API 可能在任何版本中发生破坏性变更breaking changes升级前请查阅当前版本的 CHANGELOG.md。一、什么是 Angular Material Experimental从仓库目录结构可以看出该包位于 src/material-experimental其 package.json 声明的包名为angular/material-experimental描述为 Experimental components for Angular Material许可证为 MIT。它的定位非常明确存放正在开发中的原型prototypes与实验experiments。包随 Angular Material 一起发布但不保证 API 稳定任何发布都可能包含破坏性变更不被推荐直接用于生产环境部分实验组件可能尚未被纳入预构建 CSS 中需要显式引入对应主题 mixinREADME 第 5 步特别提示了这一点。1.1 仓库中的实验性组件从 src/material-experimental 目录看当前包内包含四个实验性功能模块模块目录功能定位column-resize表格列宽拖拽调整基于 CDK column-resizemenubarMaterial 风格菜单栏基于 CDK 菜单系统popover-edit表格单元格内弹层编辑lens 表格指令selection表格行选择、全选与切换指令其中 menubar/menubar.ts 是一个典型例子MatMenuBar组件通过selector: mat-menubar暴露exportAs: matMenubar并在providers中注册CdkMenuGroup、CdkMenuBar、CDK_MENU与MENU_STACK即完全基于angular/cdk/menu的CdkMenuBar能力进行 Material 样式封装。由此可见实验包普遍遵循“CDK 提供行为逻辑、Material 提供视觉样式”的分层设计。二、安装与项目配置完整步骤2.1 安装包在已运行 Angular Material 的应用中执行npm i angular/material-experimental该包的 package.json 声明了严格的 peerDependencies安装前请确保版本匹配angular/cdk与包同版本占位符angular/core、angular/common、angular/forms、angular/platform-browserangular/materialangular/cdk-experimental也就是说angular/material-experimental同时依赖angular/material与angular/cdk-experimental使用前需要这两个包都存在。2.2 配置 Sass include path关键一步实验组件基于 MDC Web 构建其 Sass 文件中会引用 MDC Web 的 Sass 文件。为了让 Sass 编译器能够找到这些文件必须在项目的angular.json中把node_modules/加入stylePreprocessorOptions.includePaths{ ... styles: [ src/styles.scss ], stylePreprocessorOptions: { includePaths: [ node_modules/ ] }, ... }如果跳过这一步编译主题 Sass 时会因无法解析 MDC Web 的use/import路径而报错。2.3 导入组件以复选框为例在组件中直接导入MatCheckbox新版独立组件风格import {Component} from angular/core; import {MatCheckbox} from angular/material/checkbox; Component({ imports: [MatCheckbox], // ... }) export class MyComponent {}若你的项目仍使用 NgModule 体系则按 Angular Material 惯例在模块的imports中引入对应模块即可实验包内各模块均提供*-Module如 column-resize-module.ts 中的MatColumnResizeModule、menubar-module.ts 等。2.4 模板中使用实验组件与普通 Angular Material 组件的用法完全一致例如mat-checkbox [checked]isCheckedCheck me/mat-checkbox其他实验组件的使用形态可在 dev-app 对应目录中查看真实示例如 src/dev-app/menubar、src/dev-app/column-resize。三、主题与排版-mdc后缀 mixin 的使用README 第 5 步是整个接入流程的核心实验组件的主题 mixin 与常规 Angular Material mixin 对齐但后缀为-mdc。推荐写法如下use angular/material as mat; use angular/material-experimental as mat-experimental; $my-primary: mat.define-palette(mat.$indigo-palette); $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $my-theme: mat.define-light-theme(( color: ( primary: $my-primary, accent: $my-accent ), // 使用 define-mdc-typography-config 而非 define-typography-config // 会直接根据官方 Material Design 样式生成排版配置 // 并采用规范推荐的 rem 单位而非 px 单位。 typography: mat-experimental.define-mdc-typography-config(), // 本主题使用的密度等级未指定时默认为 0。 density: 0 )); include mat-experimental.all-mdc-component-themes($my-theme);要点解读define-mdc-typography-config()实验包提供的 MDC 版排版配置函数生成基于官方 Material Design 样式的 typography config且使用rem而非px度量更贴合 Material 规范推荐。all-mdc-component-themes($theme)一次性为所有 MDC 实验组件应用主题。README 同时提醒部分实验组件可能尚未被纳入这个预构建的 CSS mixin 中此时需要显式单独引入对应组件的主题 mixin。3.1 源码中的主题 mixin 结构从仓库源码可以印证-mdc主题体系的组织方式。实验包的 Sass 入口 src/material-experimental/_index.scss 通过forward导出各组件主题// Component themes forward ./column-resize/column-resize-theme as column-resize-* show column-resize-color, column-resize-typography, column-resize-density, column-resize-theme; forward ./popover-edit/popover-edit-theme as popover-edit-* show popover-edit-color, popover-edit-typography, popover-edit-density, popover-edit-theme;注意_index.scss中show限定导出的每个组件主题均拆分为color、typography、density、theme四个子 mixinpackage.json 的exports字段把.的sass入口指向./_index.scss这正是use angular/material-experimental能够解析到主题 mixin 的原因。以 column-resize/_column-resize-theme.scss 为例可以看到colormixin 通过 CSS 自定义属性--mat-column-resize-outline-color、--mat-column-resize-outline-hover-color、--mat-column-resize-outline-active-color定义主题色并在无选择器上下文时自动包裹html根选择器typography与densitymixin 目前为空实现说明该组件暂未定制排版与密度完整thememixin 使用mat.theme-has(...)判断主题 map 中是否包含对应维度再决定是否调用子 mixin与 Material 主包的主题架构保持一致。这种入口转发 子 mixin 拆分的结构意味着你可以像使用mat.xxx-component-theme一样对实验组件做细粒度控制例如只引入 colorinclude mat-experimental.column-resize-color($my-theme);3.2 版本与许可version.ts 通过angular/core的Version类暴露VERSION常量构建时替换为真实版本号用法与主包一致import {VERSION} from angular/material-experimental; console.log(VERSION.major); // 当前主版本号四、实验包源码速览四个模块的实现要点为便于读者评估是否值得接入以下结合源码给出四个模块的入口与实现特征以下描述基于当前仓库源码结构。4.1 column-resize表格列宽拖拽src/material-experimental/column-resize 提供四种指令MatColumnResizeselector: table[mat-table][columnResize]与MatColumnResizeFlexselector: mat-table[columnResize]手动开启列宽调整MatDefaultEnabledColumnResizeselector: table[mat-table]与MatDefaultEnabledColumnResizeFlexselector: mat-table默认开启列宽调整。其主题中的.mat-column-resize-overlay-thumb拖拽手柄样式、cdk-resizable-resize-disabled禁用态、[dirrtl]双向布局适配等细节均可在 column-resize/_column-resize-theme.scss 中查阅。4.2 menubarMaterial 菜单栏menubar/menubar.ts 中MatMenuBar extends CdkMenuBar直接复用 CDK 菜单的键盘导航、焦点管理与子菜单触发逻辑仅补充mat-menubar类与 Material 视觉。配套 menubar-item.ts 提供菜单项模板见 menubar.html、menubar-item.html。4.3 popover-edit单元格弹层编辑popover-edit 通过 table-directives.ts 将编辑弹层lens挂接到表格行/单元格由 lens-directives.ts 定义弹层形态适合在表格内实现行内编辑体验。4.4 selection行选择能力selection 提供 row-selection.ts、select-all.ts、selection-toggle.ts 与 selection-column.ts封装表格行选择、全选及选择列。五、常见问题与注意事项Sass 编译报错找不到 MDC 文件请确认angular.json中stylePreprocessorOptions.includePaths已包含node_modules/见 2.2 节这是实验包主题可用的前提。组件样式未生效确认是否在 Sass 中调用了all-mdc-component-themes或对应组件单独的主题 mixinREADME 明确指出部分实验组件尚未进入预构建 CSS需显式 include。版本同步实验包与angular/material、angular/cdk同版本发布peerDependencies 要求三者版本一致混用不同版本可能导致类型或运行时错误。破坏性变更包内 API 均视为实验性任何 release 都可能改变签名或行为升级前务必阅读 CHANGELOG.md 与 guides 中的迁移文档。生产使用需谨慎README 明确 Nothing in this package is considered stable or production ready如需在正式项目使用应做好充分的测试与锁定版本策略。六、总结angular/material-experimental是 Angular 官方为前沿组件能力提供的一个预览通道通过npm i angular/material-experimental安装、在angular.json中配置 Sass include path、以与常规 Material 组件一致的 API 使用并借助-mdc后缀主题 mixin 完成视觉定制。其底层实现遵循CDK 提供行为、Material 提供样式的架构如 menubar.ts 对CdkMenuBar的扩展主题体系则通过 _index.scss 按组件转发color/typography/density/theme子 mixin。理解这些机制后你就可以安全、可控地在项目中评估和试用这些实验性组件并在其成熟后平滑迁移。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Angular Material Experimental：在 Angular 项目中使用实验性 Material 组件（安装、Sass 配置与 MDC 主题实践）
Angular Material Experimental在 Angular 项目中使用实验性 Material 组件安装、Sass 配置与 MDC 主题实践【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components导读angular/material-experimental是 Angular Material 官方仓库中用于承载原型组件与实验功能的独立 npm 包它与 Angular Material 同步发布但其中任何内容都不视为稳定或生产就绪。本文基于 src/material-experimental/README.md 及其仓库源码完整讲解该包的安装步骤、angular.json中 Sass include path 的必要配置、组件的导入与模板用法以及带-mdc后缀的主题与排版 mixin 的正确组合方式读完本文你将能够在已有 Angular Material 应用上以最小成本接入实验性组件并理解其背后的包结构与源码实现。注意本文所述实验性 API 可能在任何版本中发生破坏性变更breaking changes升级前请查阅当前版本的 CHANGELOG.md。一、什么是 Angular Material Experimental从仓库目录结构可以看出该包位于 src/material-experimental其 package.json 声明的包名为angular/material-experimental描述为 Experimental components for Angular Material许可证为 MIT。它的定位非常明确存放正在开发中的原型prototypes与实验experiments。包随 Angular Material 一起发布但不保证 API 稳定任何发布都可能包含破坏性变更不被推荐直接用于生产环境部分实验组件可能尚未被纳入预构建 CSS 中需要显式引入对应主题 mixinREADME 第 5 步特别提示了这一点。1.1 仓库中的实验性组件从 src/material-experimental 目录看当前包内包含四个实验性功能模块模块目录功能定位column-resize表格列宽拖拽调整基于 CDK column-resizemenubarMaterial 风格菜单栏基于 CDK 菜单系统popover-edit表格单元格内弹层编辑lens 表格指令selection表格行选择、全选与切换指令其中 menubar/menubar.ts 是一个典型例子MatMenuBar组件通过selector: mat-menubar暴露exportAs: matMenubar并在providers中注册CdkMenuGroup、CdkMenuBar、CDK_MENU与MENU_STACK即完全基于angular/cdk/menu的CdkMenuBar能力进行 Material 样式封装。由此可见实验包普遍遵循“CDK 提供行为逻辑、Material 提供视觉样式”的分层设计。二、安装与项目配置完整步骤2.1 安装包在已运行 Angular Material 的应用中执行npm i angular/material-experimental该包的 package.json 声明了严格的 peerDependencies安装前请确保版本匹配angular/cdk与包同版本占位符angular/core、angular/common、angular/forms、angular/platform-browserangular/materialangular/cdk-experimental也就是说angular/material-experimental同时依赖angular/material与angular/cdk-experimental使用前需要这两个包都存在。2.2 配置 Sass include path关键一步实验组件基于 MDC Web 构建其 Sass 文件中会引用 MDC Web 的 Sass 文件。为了让 Sass 编译器能够找到这些文件必须在项目的angular.json中把node_modules/加入stylePreprocessorOptions.includePaths{ ... styles: [ src/styles.scss ], stylePreprocessorOptions: { includePaths: [ node_modules/ ] }, ... }如果跳过这一步编译主题 Sass 时会因无法解析 MDC Web 的use/import路径而报错。2.3 导入组件以复选框为例在组件中直接导入MatCheckbox新版独立组件风格import {Component} from angular/core; import {MatCheckbox} from angular/material/checkbox; Component({ imports: [MatCheckbox], // ... }) export class MyComponent {}若你的项目仍使用 NgModule 体系则按 Angular Material 惯例在模块的imports中引入对应模块即可实验包内各模块均提供*-Module如 column-resize-module.ts 中的MatColumnResizeModule、menubar-module.ts 等。2.4 模板中使用实验组件与普通 Angular Material 组件的用法完全一致例如mat-checkbox [checked]isCheckedCheck me/mat-checkbox其他实验组件的使用形态可在 dev-app 对应目录中查看真实示例如 src/dev-app/menubar、src/dev-app/column-resize。三、主题与排版-mdc后缀 mixin 的使用README 第 5 步是整个接入流程的核心实验组件的主题 mixin 与常规 Angular Material mixin 对齐但后缀为-mdc。推荐写法如下use angular/material as mat; use angular/material-experimental as mat-experimental; $my-primary: mat.define-palette(mat.$indigo-palette); $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $my-theme: mat.define-light-theme(( color: ( primary: $my-primary, accent: $my-accent ), // 使用 define-mdc-typography-config 而非 define-typography-config // 会直接根据官方 Material Design 样式生成排版配置 // 并采用规范推荐的 rem 单位而非 px 单位。 typography: mat-experimental.define-mdc-typography-config(), // 本主题使用的密度等级未指定时默认为 0。 density: 0 )); include mat-experimental.all-mdc-component-themes($my-theme);要点解读define-mdc-typography-config()实验包提供的 MDC 版排版配置函数生成基于官方 Material Design 样式的 typography config且使用rem而非px度量更贴合 Material 规范推荐。all-mdc-component-themes($theme)一次性为所有 MDC 实验组件应用主题。README 同时提醒部分实验组件可能尚未被纳入这个预构建的 CSS mixin 中此时需要显式单独引入对应组件的主题 mixin。3.1 源码中的主题 mixin 结构从仓库源码可以印证-mdc主题体系的组织方式。实验包的 Sass 入口 src/material-experimental/_index.scss 通过forward导出各组件主题// Component themes forward ./column-resize/column-resize-theme as column-resize-* show column-resize-color, column-resize-typography, column-resize-density, column-resize-theme; forward ./popover-edit/popover-edit-theme as popover-edit-* show popover-edit-color, popover-edit-typography, popover-edit-density, popover-edit-theme;注意_index.scss中show限定导出的每个组件主题均拆分为color、typography、density、theme四个子 mixinpackage.json 的exports字段把.的sass入口指向./_index.scss这正是use angular/material-experimental能够解析到主题 mixin 的原因。以 column-resize/_column-resize-theme.scss 为例可以看到colormixin 通过 CSS 自定义属性--mat-column-resize-outline-color、--mat-column-resize-outline-hover-color、--mat-column-resize-outline-active-color定义主题色并在无选择器上下文时自动包裹html根选择器typography与densitymixin 目前为空实现说明该组件暂未定制排版与密度完整thememixin 使用mat.theme-has(...)判断主题 map 中是否包含对应维度再决定是否调用子 mixin与 Material 主包的主题架构保持一致。这种入口转发 子 mixin 拆分的结构意味着你可以像使用mat.xxx-component-theme一样对实验组件做细粒度控制例如只引入 colorinclude mat-experimental.column-resize-color($my-theme);3.2 版本与许可version.ts 通过angular/core的Version类暴露VERSION常量构建时替换为真实版本号用法与主包一致import {VERSION} from angular/material-experimental; console.log(VERSION.major); // 当前主版本号四、实验包源码速览四个模块的实现要点为便于读者评估是否值得接入以下结合源码给出四个模块的入口与实现特征以下描述基于当前仓库源码结构。4.1 column-resize表格列宽拖拽src/material-experimental/column-resize 提供四种指令MatColumnResizeselector: table[mat-table][columnResize]与MatColumnResizeFlexselector: mat-table[columnResize]手动开启列宽调整MatDefaultEnabledColumnResizeselector: table[mat-table]与MatDefaultEnabledColumnResizeFlexselector: mat-table默认开启列宽调整。其主题中的.mat-column-resize-overlay-thumb拖拽手柄样式、cdk-resizable-resize-disabled禁用态、[dirrtl]双向布局适配等细节均可在 column-resize/_column-resize-theme.scss 中查阅。4.2 menubarMaterial 菜单栏menubar/menubar.ts 中MatMenuBar extends CdkMenuBar直接复用 CDK 菜单的键盘导航、焦点管理与子菜单触发逻辑仅补充mat-menubar类与 Material 视觉。配套 menubar-item.ts 提供菜单项模板见 menubar.html、menubar-item.html。4.3 popover-edit单元格弹层编辑popover-edit 通过 table-directives.ts 将编辑弹层lens挂接到表格行/单元格由 lens-directives.ts 定义弹层形态适合在表格内实现行内编辑体验。4.4 selection行选择能力selection 提供 row-selection.ts、select-all.ts、selection-toggle.ts 与 selection-column.ts封装表格行选择、全选及选择列。五、常见问题与注意事项Sass 编译报错找不到 MDC 文件请确认angular.json中stylePreprocessorOptions.includePaths已包含node_modules/见 2.2 节这是实验包主题可用的前提。组件样式未生效确认是否在 Sass 中调用了all-mdc-component-themes或对应组件单独的主题 mixinREADME 明确指出部分实验组件尚未进入预构建 CSS需显式 include。版本同步实验包与angular/material、angular/cdk同版本发布peerDependencies 要求三者版本一致混用不同版本可能导致类型或运行时错误。破坏性变更包内 API 均视为实验性任何 release 都可能改变签名或行为升级前务必阅读 CHANGELOG.md 与 guides 中的迁移文档。生产使用需谨慎README 明确 Nothing in this package is considered stable or production ready如需在正式项目使用应做好充分的测试与锁定版本策略。六、总结angular/material-experimental是 Angular 官方为前沿组件能力提供的一个预览通道通过npm i angular/material-experimental安装、在angular.json中配置 Sass include path、以与常规 Material 组件一致的 API 使用并借助-mdc后缀主题 mixin 完成视觉定制。其底层实现遵循CDK 提供行为、Material 提供样式的架构如 menubar.ts 对CdkMenuBar的扩展主题体系则通过 _index.scss 按组件转发color/typography/density/theme子 mixin。理解这些机制后你就可以安全、可控地在项目中评估和试用这些实验性组件并在其成熟后平滑迁移。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考