Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用,经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material,即旧版AngularJS框架的Material Design实现。
我无法更改 Angular 中切换按钮的颜色。 这是我的代码: 切换 ::ng-deep .custom-toggl...
Angular 18 中是否有可用材质 3 的组件 mixin 的列表?
我一直在尝试制作自定义 Material 3 主题,我在制作类和使用 mat.get-theme-color 方面取得了一些成功。然而,在示例中,使用分页器会对按钮产生连锁反应......
我无法将输入值垂直居中。 当密度为 -3 且字体大小为 1em 时,输入的值未正确居中。 还有标签对齐时...
(Angular Material)mat-error 消息未显示在 mat-form-field 中
我正在使用 Angular Material 对 mat-form-field 输入进行一些验证。问题是 mat-error 消息没有显示,输入字段周围的轮廓也没有显示。我明白了...
Angular Material - 元素叠加在图像上(在 MD 卡中)
我正在尝试使用角度材料重现以下内容(也就是说,在图像上添加动态文本): 文字覆盖图像 我想用md卡,因为方便。 我的问题...
当我们在 Angular 中使用日期选择器输入出生日期时如何显示年龄? (使用打字稿)
这是我的 HTML 代码, ` 选择日期 这是我的 HTML 代码, ` <mat-form-field class="datepicker"> <mat-label>Pick a date</mat-label> <input matInput #resultPickerModel="ngModel" [matDatepicker]="resultPicker" [(ngModel)]="date" [min]="minDate" [max]="maxDate" (input)="ageFromDateOfBirthday($event)"> <mat-datepicker-toggle matSuffix [for]="resultPicker"></mat-datepicker-toggle> <mat-datepicker #resultPicker> </mat-datepicker> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerParse')"> "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date! </mat-error> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMin')"> Minimum date should be {{minDate | date }}</mat-error> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMax')"> Maximum date should be {{maxDate | date }} </mat-error> </mat-form-field> </mat-grid-tile> <mat-grid-tile> <mat-form-field appearance="fill" class="age"> <mat-label>Age</mat-label> <input type="number" matInput > </mat-form-field> </mat-grid-tile>` 在这里,当我们在日期选择器中选择年龄时,我必须在输入文本框中提供AGE。 请让我知道任何解决方案。 也许这段代码可以帮助你: getAge(birthDate: Date): number { const ageTilNowInMilliseconds = Date.now() - birthDate.getTime(); const ageDate = new Date(ageTilNowInMilliseconds); return Math.abs(ageDate.getUTCFullYear() - 1970); // Because computers count the today date from the 1st of January 1970 } 希望对您有帮助。
我正在 Angular 中创建一个自定义包装器组件来扩展 Angular Material 的 MatDivider,但我遇到了问题,MatDivider 中的组件样式和属性未应用到...
如何使<mat-tab-group>的标题粘/固定在顶部? (角材料18)
我有以下代码: 我有以下代码: <div class="flex-auto overflow-y-auto"> <mat-tab-group [animationDuration]="'0'" headerPosition="below" mat-stretch-tabs="false" > <div cdkScrollable> <!-- Tab #1 --> <mat-tab label="List 1"> <!-- TAB CONTENT GOES HERE --> <app-leads></app-leads> </mat-tab> <!-- Tab #2 --> <mat-tab label="List 2"> <!-- TAB CONTENT GOES HERE --> <inventory-list></inventory-list> </mat-tab> </div> </mat-tab-group> </div> 这会产生以下结果: 问题是每当选项卡中的内容向上或向下移动时,选项卡组的标题不可见(不粘)。 如何解决? 使用CSS粘性属性“position:sticky”
当用户尝试在 mat-select 中选择另一个值时,我想显示弹出窗口以确认用户是否确实想要选择另一个值。我及时显示弹出窗口的问题是所选值是......
为什么 Angular Material 工具提示会破坏我的单元测试?
我有以下单元测试文件,它是另一个类似组件的工作文件的副本,与样板 Angular CLI 输出相距不远: 导入 { 异步,ComponentFixture,Te...
如何在单击已选择的项目时重置 mat-radio-group? (切换功能)
我有一个垫子无线电组中的项目列表。当我单击已选择的单选按钮时,我想要一个组范围的切换功能。 如果选择 A 并单击 B,则 B 会被选中....
Angular Reactive Form - 使用对象而不是值修补表单控件时出现问题
我在 Angular 表单中使用 mat-select 来让用户选择多个国家/地区作为具有 id 和 name 属性的对象。但是,我需要用完整的国家/地区对象来修补表单控件...
使用对象而不是 Angular 响应式表单中的值来修补表单控件的问题
我在 Angular 表单中使用 mat-select 来让用户选择多个国家/地区作为具有 id 和 name 属性的对象。但是,我需要用完整的国家/地区对象来修补表单控件...
更新到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 进行测试,小吃栏仍然显示。如何让它自动关闭?代码