Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
我正在尝试自定义 MatChip，但无法让它按预期显示。 开箱即用的 MatChip 有 3 种行为，我正在尝试自定义，并添加我自己的第四种行为 默认颜色 悬停
我的 global.scss 文件中有三种 CSS 样式。目前，我正在使用深色模式，但我想有条件地更改它们。我怎样才能在 Ionic 8 和 Angular 18 中做到这一点？ 这是我的 global.scss 代码。 //@
如何隐藏带有嵌套选项卡组的 mat-tab-header，隐藏外部 mat-tab-group 而不隐藏内部
我本质上有html 我基本上有html <mat-tab-group> <mat-tab> <mat-tab-group> <mat-tab> </mat-tab> </mat-tab-group> </mat-tab> </mat-tab-group> 如何使用 css （或任何真正的方法）隐藏外部选项卡组 mat-tab-header 元素，但不影响内部选项卡标题？ 我强烈建议您使用此自定义指令而不是使用 css。 import { Directive, ElementRef, OnInit } from "@angular/core"; @Directive({ selector: "[header-less-tabs]", }) export class HeaderLessTabsDirective implements OnInit { constructor(private eleRef: ElementRef) {} ngOnInit(): void { this.eleRef.nativeElement.children[0].style.display = "none"; } } 非常简单且可重复使用。 使用示例： <mat-tab-group header-less-tabs> <mat-tab> <mat-tab-group> <mat-tab> </mat-tab> </mat-tab-group> </mat-tab> </mat-tab-group> 弄清楚了，只需选择直接子项 <mat-tab-group class="invisible-tabs"> <mat-tab> <mat-tab-group> <mat-tab> </mat-tab> </mat-tab-group> </mat-tab> </mat-tab-group> .invisible-tabs { > .mat-tab-header { display: none; } } 简单的替代解决方案： 将以下内容添加到您的组件 CSS 文件中： ::ng-deep .mat-tab-header { display: none!important; } 使用 ng:deep 的另一种替代解决方案 <mat-tab-group > <mat-tab class="invisible-tabs"> </mat-tab> <mat-tab class="invisible-tabs"> </mat-tab> </mat-tab-group> <!-- in css file --> .invisible-tabs { ::ng-deep .mat-tab-header { display: none !important; } } 在最新版本的 Angular 上，您可以使用 <mat-tab-group class=" header-less-tabs"> <!-- First Tab --> <mat-tab> <p>Tab1 content</p> </mat-tab> <!-- Second Tab --> <mat-tab> <p>Tab2 content</p> </mat-tab> </<mat-tab-group> CSS .header-less-tabs.mat-mdc-tab-group .mat-mdc-tab-header { display: none !important; } TS文件 @Component({ selector: 'app-tab-options', templateUrl: './tab-options.component.html', styleUrls: ['./registration-options.component.css'], imports: [ MatTabsModule, ], 独立：真实， 封装：ViewEncapsulation.None })
想要为所有http请求标头传递Ip、国家/地区并在保存所有数据后
当我一直使用这种方式时，IP和国家/地区在后端传递为空 我需要传递活动日志的值 我使用 Java Spring boot 的后端 并为此使用 AOP 我在下面解决...
在我的 Angular 应用程序登录页面中，密码自动填充功能在 iOS 浏览器上不起作用。它在桌面浏览器上运行良好（手动输入或通过扩展自动填充），在移动浏览器中运行时......
我已经尝试过使用： .mat-扩展-面板-标题{ 颜色：#fff； } .mat-expansion-panel-header::after{ 颜色：#fff； } .mat-扩展面板{ 颜色：#fff； } .mat-expansion-panel::after{ 颜色：...
为什么要在“mat-form-field”标签底部添加额外的空间
我尝试创建一个表，其中一列有一个输入字段，我使用 mat-form-field 来创建该输入字段。以下是我的操作方法： ...
为什么我的 Angular Material 图标看起来与 Google Fonts 图标不同？
我正在开发 Angular 15 项目，我注意到我使用的 mat-icon 组件看起来与 Google Fonts Icons 网站 (https://fonts.google.com) 上显示的图标不同/ico...
我在垫子选项卡组中有 4 个垫子选项卡标签，我想将其中 2 个放置在左侧，另外 2 个标签放置在右侧，如何实现角度 17
我需要在页面左侧放置一到两个垫片标签，在页面右侧放置三个和四个垫片标签。我尝试给予边距，但元素一直向右扩展......
我试图制作一个好看的日期选择器，类似于材料日期选择器文档中的内容 我想要的日期选择器 但我最终得到了一个看起来很奇怪的日期选择器，我可以在上面写文本......
所以我试图创建一个带有一些表单字段的步进器，所有内容都会检查出来，但是表单字段都会被步进器标签剪切掉，无论我给它们多少边距或者如果我设置了...
如何更改 Angular 18 中 mat-select 的下划线颜色？
如果我将鼠标悬停在垫选择上，我想更改它的下划线颜色（白色）。 基本原生选择 如果我将鼠标悬停在垫选择上，我想更改它的下划线颜色（白色）。 <h4>Basic native select</h4> <mat-toolbar class="header"> <mat-form-field style="padding-top:20px"> <mat-label style="color:white">Choose an option</mat-label> <mat-select> <mat-option value="option1">Option 1</mat-option> </mat-select> </mat-form-field> </mat-toolbar> 我有这样的CSS： .mdc-line-ripple::after { transform: scaleX(1) !important; opacity: 1 !important; } 演示：https://stackblitz.com/edit/mpa36f-8pmwyn?file=src%2Fstyles.scss /* Target the underline and change the color on hover */ .mat-form-field-underline { background-color: transparent; /* Default underline color */ } .mat-form-field-underline:hover { background-color: white; /* Hover underline color */ } /* Also change the color of the ripple when focusing or hovering */ .mat-form-field.mat-focused .mat-form-field-ripple, .mat-form-field.mat-form-field-invalid .mat-form-field-ripple, .mat-form-field:hover .mat-form-field-ripple { background-color: white; /* Ripple color when focused or hovered */ } <h4>Basic native select</h4> <mat-toolbar class="header"> <mat-form-field style="padding-top: 20px"> <mat-label style="color: white">Choose an option</mat-label> <mat-select> <mat-option value="option1">Option 1</mat-option> </mat-select> </mat-form-field> </mat-toolbar>
我刚刚开始在我的 Angular 应用程序中使用 Angular Material 主题。 我使用了一些单选按钮，但想对它们进行样式设置，使它们比平常小。我可以设置文本标签的样式...
Angular CDK 上下文菜单 - 如何从 cdkMenu 模板捕获 cdkContextmenuTriggerData？
我需要在上下文菜单中动态传递数据。 cdkContextmenuTriggerData 完成了这项工作，但我对如何在 cdkMenu 中捕获这些数据感到困惑。 这是我的代码 - 我需要在上下文菜单中动态传递数据。 cdkContextmenuTriggerData 完成了工作，但我对如何在 cdkMenu 中捕获这些数据感到困惑。 这是我的代码- <ng-template #menu> <div cdkMenu> <button cdkMenuItem>Edit</button> </div> </ng-template> <div [cdkContextMenuTriggerFor]="menu" [cdkContextMenuTriggerData]="variable">Right click on me..</div> 您传递到 cdkContextMenuTriggerData 输入的对象基本上会传递到 [ngTemplateOutletContext]。有关设置和访问上下文的更多信息，请参阅官方文档此处。 因此可以在模板范围内使用 let- 关键字来访问它（有关结构指令和关键字本身的更多文档此处）。 考虑到您的 variable 看起来像这样： let variable: { $implicit: { value: 'SomeValue' } } 您应该能够像这样访问它： <ng-template #menu let-passedContext> <div cdkMenu> <button cdkMenuItem>Edit {{passedContext.value}}</button> </div> </ng-template> 这是一个 stackblitz 示例。 根据您的情况，您可以这样做： <ng-template #menu let-id='id'> <div cdkMenu> <button cdkMenuItem (click)="onEdit(id)">Edit</button> </div> </ng-template> <div [cdkContextMenuTriggerFor]="menu" [cdkContextMenuTriggerData]="{id: variable}">Right click on me..</div>
尝试找出以下是否可行： https://material.angular.io/components/select/examples （请参阅“使用选项组进行选择”） 在选择的组件中使用 Angular Material 组是...
我已经创建了 18 个有角度的材料主题，并且工作正常。出于好奇，我想知道是否有任何方法可以在 JavaScript 变量中获取主题颜色。我正在使用这样的主题： .
Angular Material Version17 Mat Calendar 未接近日期选择或背景需要刷新以关闭选择器整个屏幕冻结
结束日期<... <div class="ui-lg-3 ui-md-2 ui-g-12 story-section"> <mat-form-field rds-form-field class="w-90"> <mat-label rds-form-field-label>End Date</mat-label> <input #inputEndDate matTooltipClass="mat-tool-cust" matTooltip="End Date" matInput placeholder="End Date" [formControl]="endDate" rds-form-field-input [matDatepicker]="picker2" trim="blur" /> <mat-datepicker-toggle matSuffix [for]="picker2" ></mat-datepicker-toggle> <mat-datepicker #picker2></mat-datepicker> </mat-form-field> <span style="margin-top: -16px; display: block" *ngIf="invalidEndDt.flag" > <mat-error rds-form-field-hint-error> <i-tabler name="exclamation-circle"></i-tabler> {{ invalidEndDt.msg }} </mat-error> </span> </div> 上面的代码片段我使用过，不确定为什么日历没有接近。 我也尝试从 ts 文件关闭，但它不起作用 由于缺少未导入的 BrowserAnimationsModule，我也有同样的行为。
我正在尝试通过主题更改 Angular Material-18、MatDatePicker 组件颜色。我尝试了这些线路，但没有成功。需要一些帮助。 @include mat.datepicker-color(m3-blue-theme.$light-theme, ...
我已经将我的项目从 Angular 材质 2 更新为 Angular 材质 3，并使用最后一次更新（18.2.1），为什么组件的所有变量都没有设置？主题类由“nggenerate@an...
我有一个带分页的 Angular Material 表和一个选择模型来获取一些行来执行操作。 目前我正在使用服务器端分页更改分页，但有了这个我的选择...