Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用,经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material,即旧版AngularJS框架的Material Design实现。
我有一个 Angular 18 中的应用程序,其中包含一个包含材料日期选择器的页面。 当我弹出日期选择器时,一切都很好,但是当我用左/右箭头或年份更改月份时,数据就会消失......
我使用有角度的材料 18。在我们的应用程序中,我们使用带有不同颜色的日志的按钮。如何使用调色板中未定义的颜色? 假设我们有一个用于批准文档的绿色按钮...
Angular Material 和 CSS Flex 布局
我有一个有角材料卡内的组件。该组件有两个 div,内容和页脚都包装在容器 div 中 .包装器{ 显示:柔性; 弯曲方向:
我有一个奇怪的情况,深度嵌套的 HTML 代码段可能会从我无法预测或控制的父级继承一些样式。该小部件非常简单...... 我有一个奇怪的情况,深度嵌套的 HTML 代码段可能会从父级继承一些我无法预测或控制的样式。该小部件非常简单...... <mat-form-field appearance="fill" class="full-width-input" *ngIf="!isMultiSelect"> <mat-label>{{ selectListForm.get('commonSettings').get('label')?.value }}</mat-label> <mat-select [value]="data?.state?.defaultValue"> <mat-option *ngFor="let option of options.controls" [value]="option.get('value')?.value"> {{ option.get('label')?.value }} </mat-option> </mat-select> <mat-hint class="custom-mat-hint">{{ selectListForm.get('commonSettings').get('suggestedText')?.value }}</mat-hint> </mat-form-field> .scss 样式也不是那么狂野... .preview-section { position: relative; mat-form-field { display: block; margin-bottom: 0.5rem; } .custom-mat-hint { display: block; margin-left: 24px; font-size: 0.75rem; color: rgba(0, 0, 0, 0.54); } } .preview-title { color: #5c9edb; /* Light blue color */ font-weight: bold; /* Make it bold for emphasis */ } .preview-wrapper{ margin-left: 15px; margin-top: 8px; } 但是每当选择列表的宽度大于 280 像素时,右侧的下拉箭头似乎会在 270 像素左右撞到墙上并粘在那里。因此,如果对象为 400 像素,则箭头看起来位于对象的中间而不是右侧。这是可以覆盖的内部材料限制吗? 我认为 mat-select 通过父 CSS 具有 280px 的宽度。因此,您可以手动设置高度,从而覆盖父级 CSS。 ::ng-deep的使用是不受欢迎的,所以你也可以将此样式添加到全局样式中。 ::ng-deep mat-select.full-width { width:100% !important; } 我们可以添加一个类 full-width 来单独限制对此选择的更改。 <mat-form-field appearance="fill" class="full-width-input"> <mat-label>Favorite food</mat-label> <mat-select class="full-width"> @for (food of foods; track food) { <mat-option [value]="food.value">{{food.viewValue}}</mat-option> } </mat-select> <mat-hint class="custom-mat-hint">some hint</mat-hint> </mat-form-field> Stackblitz 演示
正如您在 stackblitz 示例中所看到的,普通 html 选择在水平可滚动 div 中工作正常,但在 mat-select(或材质菜单)中则不行。 要重现,请滚动到左侧并单击
将 Angular 项目从 Angular 11 迁移到 Angular 18:CSS 和 Angular Material 问题(mat 与 mat-mdc)
我最近将我的项目从 Angular 11 迁移到 Angular 18,更新了所有相关包,包括 Angular Material。完成迁移后,我遇到了一些问题需要帮助
我认为这是一个非常常见的问题,尽管我无法找到解决方案。 我定义了一个深色和一个浅色主题,例如: 样式.scss @使用“@angular/material”作为垫子; // 包括
我一直在为 Angular 组件编写一个组件测试,用于检查表单验证。现在,我面临的问题是,当我正常加载表单时,通过浏览器,f...
我有这段代码,正如你所见,ngModel 已被弃用 我也从此网页尝试过此操作,但随后我的复选框未选中: 然后我尝试了 [checked]="checked" 这也不是
我想要一个甘特图库,当我们将鼠标悬停在时间线中时,该库具有显示特定日期正在工作的资源数量的功能 我在 dhtmlx、ej2.syncfusion、devexpress ... 中搜索
我正在寻找一个带有卡片自动高度的网格,如下所示: 我正在使用 Material Design 和 Angular 4,如果有一些使用 React 或 VueJS 的解决方案也很好。 我开始...
我正在开发一个 Angular 组件,如果输入字段被触摸并且无效,我想在该组件中显示错误消息。但是,错误消息并未按预期出现。 错误消息&q...
我有 FrontDesk/FrontDesk.UserInterface 项目已将所有包更新到 Angular 15。您可以查看下面的屏幕截图。 我执行了以下命令 nggenerate@angular/material:mdc-
我有compareWith方法 比较对象() { 返回(o1:任何,o2:任何)=> { if (this.displayKey) { 如果(o1 && o2){ return o1[this.displayKey] === o2[this.displayKey]; } ...
我正在从事个人 Angular 项目(使用 Angular Material),但我找不到此问题的解决方案。 例如,我有一个长文本,如下所示: 当你采取闪避动作时,你会...
在此页面上,有示例代码及其渲染。 特别是,使用示例代码: 已检查 在此页面上,有示例代码及其渲染。 特别是示例代码: <mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox> 我原本希望选中该复选框,但在他们的页面上,它是空白的。当在我的代码中使用时,它起作用了,并且现在默认选中复选框。但是,它将 ngModel 划掉为已弃用。我应该采取不同的做法吗? 在您共享的示例中,属性名称为checked,实际值来自角度信号readonly checked = model(false);,其中 false 是在复选框上设置的实际值,因此其工作查找。 了解有关模型信号的更多信息 Angular 文档 - 与信号的双向绑定 至于已弃用的错误,这是由于将 formControl 与 ngModel 一起使用所致。 了解有关弃用的更多信息。 Angular 文档 - 已弃用的 API 和功能 - 具有反应式表单的 ngModel
将自定义类应用于 mat-tab-group 中的 mat-tab
我想根据条件将自定义样式应用于 mat-tab-group 内的一些 mat-tabs。 默认情况下,父 mat-tab-group 已经具有可按预期工作的自定义样式。这是怎么做的...
我将身体方向更改为rtl。 目录=“rtl” 并且具有外观“轮廓”的 mat-form-field 效果不佳。 您可以在 https://material.angular.io 网站的“表单字段示例”、“表单字段”中尝试一下
我有一个员工列表显示在primeng的一个卡片类中。 我有一张primeng的卡片类中显示的员工名单。 <ng-template pTemplate="gridItem"> <div class="grid grid-nogutter"> <div *ngFor="let employee of employees" class="col-12 md:col-4"> <div class="card m-3 surface-border" [ngClass]="{'alert-card': employee.hasAlert}"> 如果我将其添加到我的 scss 中 .alert-card { border: 2px solid rgba(231, 8, 100, 0.55) !important; } 我正确地看到了边框(仅当我在末尾添加 !important 时) 我现在想要的是在该边界上有一个脉冲效果,使它慢慢变成红色,红色循环消失,所以我尝试了这个 .alert-card { animation: fadeColor 1s infinite; } @keyframes fadeColor { 0%, 100% { border-color: transparent; } 50% { border-color: rgba(231, 8, 100, 0.55) !important; } } 或者我也尝试过这个 .alert-card { border-width: 3px; border-style: solid; border-color: transparent; animation: fadeColor 1s infinite; } @keyframes fadeColor { 0%, 100% { border-color: transparent; } 50% { border-color: rgba(231, 8, 100, 0.55); } } 也没有效果。在这种情况下,我可以看到至少一个 3px 的大边框,它是灰色的(默认颜色),但没有应用任何效果。 但不幸的是它没有效果。预先感谢您的贡献。 您可以删除 !important 并直接应用样式。 这个来自 w3 的 示例 有助于让 CSS 恰到好处。 我们可以指定默认的边框颜色(确保不设置为 important),那么动画只需要设置 50% 就会跳动。 .alert-card { border-width: 2px !important; border-style: solid !important; border-color: transparent; animation: fadeColor 1s infinite; border-radius: 6px; } @keyframes fadeColor { 50% { border-color: rgba(231, 8, 100, 0.55); } } Stackblitz 演示
我怎样才能让上面标题中的“mat-card-subtitle”变成红色?
我学习 Angular 材料并且我有这段代码 搜索书籍 搜索时按 Enter 我学习 Angular 材料并且我有这个代码 <mat-card-header> <mat-card-title>Search for books</mat-card-title> <mat-card-subtitle>press enter on search</mat-card-subtitle> </mat-card-header> 还有这个CSS .mat-card-subtitle { font-size: 10px; color: red; } 问题是现在所有<mat-card-subtitle>都变成红色了。我怎样才能让上面标题中的mat-card-subtitle变成红色? 添加自定义 CSS 类 HTML <mat-card-header> <mat-card-title>Search for books</mat-card-title> <mat-card-subtitle class="red-text">press enter on search</mat-card-subtitle> </mat-card-header> CSS .red-text { font-size: 10px; color: red !important; text-align: center !important; } 向 mat-card-subtitle 添加一个类,并为特定类指定颜色 .classname{color:red} 您只需删除 mat-card-subtitle 前面写的点即可。 类选择器:.class-name 选择具有类属性“class-name”的所有元素。 标签名称:直接写入标签名称(例如,“p”代表段落)会选择页面上该类型的所有元素。