Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
更新到Angular 18和Material后，应用CSS的方法发生了变化
我通过扩展 MatCheckbox 创建了一个自定义组件。 在更新之前，我可以使用以下命令应用默认 CSS： CSS @use '@material/checkbox/mdc-checkbox'; 然而，升级 Angular 和
Angular Material Datepicker - Material18+ 的本地化
我使用 Angular Material 18 和 Datepicker 组件。我尝试使用局部变化并尽量避免时刻。其原因是该时刻已被弃用。我尝试使用 DateFns
如何以最简洁的方式更改某些 CDK 角度材质组件（如 mat-menu-item 和 mat-select）的悬停、文本和背景颜色？
例如，如何让它使用主题的主色和强调色？ 我已经使用材质 2 自定义调色板设置了我的主题。为了简洁起见，我排除了调色板设置 $主题：mat.m2-
我现在的情况是，我想给一个复选框不同的颜色，也许只是背景颜色，但如果可能的话，还有边框和/或文本颜色 我现在的情况是，我想给一个复选框不同的颜色，也许只是背景颜色，但如果可能的话，还有边框和/或文本颜色 使用颜色属性，我只能设置“primary”、“accent”和“warn”。 现在我只改变了边框如下 ::ng-deep .mat-mdc-checkbox-checked .mdc-checkbox__background { border-color: #fff!important; } 但这不是一个理想的解决方案，感觉有点老套，所以我想知道 Angular Material 是否有内置的方法来做到这一点，也许是通过 CSS 变量？ 检查文档，他们有一个非常相似的案例的示例： .some-container { --mdc-checkbox-unselected-hover-state-layer-color: #fff; --mdc-checkbox-unselected-hover-icon-color: #fff; } 为其 CSS 变量提供新值是首选解决方案，因为内部使用的 DOM 元素和类可能随时更改。
Cypress - 角度 MDC 升级后元素被另一个元素覆盖
我最近将 Angular 升级到了版本 16，材质也随之更新。材料 16 引入了 MDC，因此我现有的 E2E 测试用例失败了。 我正在尝试输入...
我有一个 ngx-material 垂直堆叠图表，我的数据非常简单，但我发现对于稍大的数据集，x 轴标签的两侧会出现很大的间隙。 知道我是什么吗...
当我测试 Angular Material 小吃栏时，将持续时间设置为 3000 毫秒，然后在勾选 3000 后尝试使用 fakeAsync 进行测试，小吃栏仍然显示。如何让它自动关闭？代码
Angular Material mdTabs：是否可以有垂直选项卡？
我正在寻找从上到下显示的选项卡，选项卡导航位于左侧。无论如何，这可以在 Angular Material 库中实现吗？
如何像MatPaginator一样使用MatPaginatorIntl作为MatTableDataSource上的分页器？
我正在使用 Material Angular 18.2.8 并遇到以下问题： 我有我的自定义分页器类，它像这样扩展 MatPaginatorIntl （不要介意它只是用于调试目的的字符串......
Angular 15 中的外观=“标准”属性不再起作用。除标准外，所有外观均运行良好。 为什么这不再起作用了？ 结果： 需要： Angular 15 中的 appearance="standard" 属性不再起作用。除了standard之外，所有外观都运行良好。 为什么这不再起作用？ 结果： 需要： <mat-form-field class="form-field" Appearance="Standard"> <input matInput formControlName="email" matInput placeholder="email" name="email" type="text" required> </mat-form-field> 您正在使用的属性的 API 从 v14 更改为 v15 。具体来说，删除了 legacy 和 standard 外观。 导入路径 变更摘要 ... ... @angular/material/form-field 样式更改、删除一些外观、API 更改 ... ... API 更改的原因在博客中进行了解释： 我们很高兴地宣布基于 Web 材料设计组件 (MDC) 的 Angular 材料组件重构现已完成！这一更改使 Angular 能够更接近 Material Design 规范，重用 Material Design 团队开发的原语代码，并使我们能够在最终确定样式标记后采用 Material 3。 从 v14 文档来看，Angular 14 中的有效值是： type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline'; 从 v15 文档来看，Angular 15 中的有效值是： type MatFormFieldAppearance = 'fill' | 'outline'; 如果您想继续使用appearance="standard"，您可以尝试导入MatLegacyFormFieldModule而不是MatFormFieldModule。该博客提到，只要您不同时导入两者，它们目前是可以互换的。这是为了让您能够按照自己的节奏升级各个模块（包括您自己的模块和 Angular Material）。 每个新组件的旧实现现已弃用，但仍可通过“旧版”导入使用。例如，您可以通过导入旧按钮模块来导入旧的 mat-button 实现。 import {MatLegacyButtonModule} from '@angular/material/legacy-button'; 访问迁移指南了解更多信息。 在 Angular 15 中，不鼓励使用样式来定制材质库。但是，对于这么小的要求，您可以使用： .mat-mdc-form-field-focus-overlay { background-color: white!important; } .mdc-text-field--filled:not(.mdc-text-field--disabled) { background-color: white!important; }
从 '@angular/common/http' 导入 { HttpInterceptorFn }; 导出 const customInterceptor: HttpInterceptorFn = (req, next) => { 调试器; console.log('你好'); 返回下一个（请求）； }; 我...
对于 Angular Material Snackbar，我只使用官方示例并为组件编写单元测试。 在测试中，我使用带有 documentRootLoader 和 MarSnackbarHarness 的 loader 来检查 sna...
Angular 6 Mat-Dialog 隐藏了部分后台网页
所以，我一直在使用Mat-Dialog来显示弹出窗口和对话框，我刚刚发现了这个问题。当我向下滚动时，背景页面的一部分（我打开模式的页面）会被隐藏......
我在日期范围选择器中有一个重置按钮，但是当我尝试使用重置按钮重置所选日期时，它会重置模型，但不会重置日期范围选择器小部件中的选择。 堆栈B...
我正在使用 cdk-virtual-scroll-viewport 显示大量元素列表，如下所示 我正在使用 cdk-virtual-scroll-viewport 显示大量元素列表，如下所示 <cdk-virtual-scroll-viewport itemSize="115px" class="scrollable-card"> <div *cdkVirtualFor="let project projects"> <app-project-card [project]="project"></app-project-card> </div> </cdk-virtual-scroll-viewport> 我在 app-project-card 组件中定义了一个上下文菜单，如下所示 <mat-card class='project-card' (contextmenu)="onRightClick($event)"> //other elements inside which are irrelavant </mat-card> <div style="visibility: hidden; position: fixed;" [style.left]="menuTopLeftPosition.x" [style.top]="menuTopLeftPosition.y" [matMenuTriggerFor]="menu"></div> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="onEdit(project.id)"><mat-icon>edit</mat-icon>Edit</button> <button mat-menu-item (click)="onDelete(project.id)"><mat-icon>delete_outline</mat-icon>Delete</button> </mat-menu> 下面是我的 onRightClick 函数的代码。 onRightClick(event: MouseEvent) { event.preventDefault(); // Prevent the browser's default context menu // Set the position of the context menu this.menuTopLeftPosition.x = `${event.clientX}px`; this.menuTopLeftPosition.y = `${event.clientY}px`; // Open the context menu this.matMenuTrigger.openMenu(); } 我面临的问题是我的上下文菜单没有显示在正确的坐标上。坐标似乎是相对于视口计算的，我不确定。 滚动视口会更改 y 坐标偏离的值。 x 坐标保持不变但已关闭。如果您需要更多背景信息，请告诉我。谢谢你 我觉得你的.html可以是这样的 <mat-card class="project-card"> <mat-card-content> {{data()?.name}} {{data()?.id}} <div #menuTrigger="cdkContextMenuTriggerFor" class="fill example-standalone-trigger" (mouseup)="open(menuTrigger)" [cdkContextMenuTriggerFor]="menu" ></div> </mat-card-content> </mat-card> <ng-template #menu> <div class="example-menu" cdkMenu (closed)="open(null)"> <button class="example-menu-item" cdkMenuItem>Refresh</button> <button class="example-menu-item" cdkMenuItem>Settings</button> <button class="example-menu-item" cdkMenuItem>Help</button> <button class="example-menu-item" cdkMenuItem>Sign out</button> </div> </ng-template> 哪里 .fill{ position:absolute; top:0; bottom:0; width:100%; } .mat-mdc-card{ position:relative; } 还有 export class CardComponent { data = input<{ id: number; name: string }>(); menuOpened = output<CdkContextMenuTrigger | null>(); open(menu: any) { if (menu) setTimeout(() => { this.menuOpened.emit(menu); }); else this.menuOpened.emit(null); } } 我制作了当菜单打开/关闭时发出触发器以允许在滚动时关闭（我真的很疯狂，因为对我（打开）和（关闭）事件不起作用。 “父母”喜欢 <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport" #scroller> <div *cdkVirtualFor="let item of items" class="example-item"> <app-card [data]="item" (menuOpened)="trigger=$event" /> </div> </cdk-virtual-scroll-viewport> 还有 trigger!: CdkContextMenuTrigger | null; @ViewChild('scroller', { static: true }) scroller!: CdkVirtualScrollViewport; items: any[] = Array(100) .fill('') .map((x, index) => { return { id: index, name: 'name ' + index }; }); constructor(private ngZone: NgZone) {} ngOnInit() { this.scroller .elementScrolled() .pipe(filter((_: any) => this.trigger != null)) .subscribe((_) => { this.ngZone.run(() => { this.trigger?.close(); }); }); } stackblitz
我正在将我的 agular 应用程序从 13 升级到 18 在升级每个版本的过程中，我在应用程序中遇到以下包错误 1.SatDatepicker模块 SatDatepickerModule' 似乎没有...
全局定制 Angular Material UI 外观的方法和最佳实践？
我在项目中使用 Angular 16 和 Angular Material UI 组件，我想应用自定义样式，如圆角、双边框输入、自定义字体等。我已经通过
我正在尝试将一些代码从我的 Angular 16 项目迁移到现在的 Angular 18 更新版本 以下是已实现的内容，我不断收到编译错误 @使用'@角度/
焦点箭头指示器上的角度材质扩展面板应带有下划线。这是可访问性的要求 在手风琴切换上，当焦点箭头指示器（向上或向下）应该处于未显示状态时...
Angular 材质：无法使用 dateAdapter 更改 datePicker 中的 matDateLocale
我有一个 Angular 18（独立）项目，我在其中使用 DatePicker。 我需要动态地改变语言。 为此，我使用注入 DateAdapter 的服务，如下所示： 出口...