Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
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 的服务，如下所示： 出口...
CdkVirtualScrollViewport 标头未修复
在我的角度应用程序中，我想将表格标题保持在固定位置并仅将滚动条显示到主体部分。 我正在使用 Angular 的 CdkVirtualScrollViewport 库来绘制表格
有没有办法在 Angular Material 18 中动态更新应用程序排版配置？
我希望将字体大小作为应用程序设置中的配置选项，目前我有一个正在应用程序范围内应用的排版配置集。 @include mat.all-component-
<mat-tab class="StatusTab" label="Status"> <mat-table class="table mat-elevation-z10" [dataSource]="statusDetails"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>Staff-id</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.staff_id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.name}}</mat-cell> </ng-container> <ng-container style="width: 10px;" matColumnDef="status"> <mat-header-cell *matHeaderCellDef>Status</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.status}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="columns"></mat-header-row> <mat-row *matRowDef="let staff;columns:columns"></mat-row> </mat-table> </mat-tab> CSS： .table { width: 100%; margin:50px; } .mat-column-id { width: 32px; border-right: 1px solid black; } 默认宽度太长，无法向右滚动，我想指定宽度。 我尝试使用.mat-column-COLUMNNAME但它不起作用。但这只有在我使用 <table mat-table> 时才有效。 您还应该使用 max-width CSS 规则来强制列的最大宽度。 .mat-column-id { width: 32px; border-right: 1px solid black; max-width: 32px; } 演示@StackBlitz
<mat-tab class="StatusTab" label="Status"> <mat-table class="table mat-elevation-z10" [dataSource]="statusDetails"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>Staff-id</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.staff_id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.name}}</mat-cell> </ng-container> <ng-container style="width: 10px;" matColumnDef="status"> <mat-header-cell *matHeaderCellDef>Status</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.status}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="columns"></mat-header-row> <mat-row *matRowDef="let staff;columns:columns"></mat-row> </mat-table> </mat-tab> css : .table{ width: 100%; margin:50px; } .mat-column-id{ width: 32px; border-right: 1px solid black; } 默认宽度太长，无法向右滚动，我想指定宽度。 我尝试使用 .mat-column-COLUMNNAME 但它不起作用。但这仅在我使用 时才有效。 您还应该使用 max-width CSS 规则来强制列的最大宽度。 .mat-column-id { width: 32px; border-right: 1px solid black; max-width: 32px; } 演示@StackBlitz
如何将 MatBottomSheetRef 注入到 Bottom-Sheet 内加载的 childComponent 中？
在官方的角度材料组件文档中它说 底部工作表内包含的任何组件也可以注入 MatBottomSheetRef。 我想从...调用sheetRef.dismiss()
“mat-toolbar”不是已知元素 - Angular 5
我创建了一个新项目，我正在尝试添加角度材料。 我在我的应用程序文件夹中创建了material.module.ts： 从“@angular/core”导入{NgModule}； 进口 { MatButton 模块，...
错误：编译 Angular 18 应用程序时无法将类型实体 i10.MatLegacyDialogModule 解析为符号
我已将 NX Angular monorepo 从 15.2.0 更新到版本 18.2.7。当我尝试构建我的应用程序时，它抛出以下错误 ./apps/apc/ui/src/main.ts - 错误：模块构建失败（来自 ./