angular-material2 相关问题

我尝试向某些日期（日期数组）添加自定义类，有什么建议吗？（突出显示一些日期 - 活动） html: 我尝试向某些日期（日期数组）添加自定义类，有什么建议吗？（突出显示一些日期 - 活动） html: <mat-card-content> <div class="date-picker"> <mat-calendar [selected]="selectedDates" (selectedChange)="selectedDates = $event" #calendar> </mat-calendar> </div> ts： this.selectedDates = [new Date('2014-08-28T11:13:59'), new Date('2014-07-27T11:13:59')]; 有什么想法吗？ html: <mat-calendar [minDate]="minDate" [maxDate]="maxDate" [selected]="selectedDates" (selectedChange)="selectedChange($event)" [headerComponent]="displayMonth()" [startAt]="startDate"></mat-calendar> .ts: import { Component, OnInit, Input, OnChanges, ViewEncapsulation, ElementRef, Renderer2 } from '@angular/core'; constructor( private elRef: ElementRef, private renderer: Renderer2 ) {} displayMonth() { let HeaderElsClass = this.elRef.nativeElement.getElementsByClassName('mat-calendar-body-cell'); let orderDate = this.convertDate.dateFormat(this.tempOrdersDate, 'MMMM D, YYYY'); // tempOrderDate is epoch array, i convert from epoch to date for(let index in HeaderElsClass) { if(typeof HeaderElsClass[index] === 'object') { let headerClass = HeaderElsClass[index].getAttribute('aria-label'); orderDate.find(each => { if(each === headerClass) { this.renderer.addClass(HeaderElsClass[index], 'mat-calendar-body-active'); this.renderer.setStyle(HeaderElsClass[index], 'font-weight', '900'); } return false; }) } } } 这在我的代码中运行良好。我希望对你有用。谢谢阿卜杜拉

angular angular-material2 angular6

回答 1 投票 0

$font-family 是 Angular 17 和 Material 17 中的“未定义变量”

我遵循了有关从以前版本迁移到新版本的 Angular 和 Material 文档，但遇到了一个对我来说没有意义的问题。看一下官方文档...

angular sass angular-material angular-material2

回答 1 投票 0

升级到 Angular v18 后，Angular Material 主题样式不起作用

我正在尝试从 v16 - v17 然后更新我的应用程序 v18。在案例 17 和 18 中，我发现材质主题 css 不起作用。侧面板、按钮、下拉菜单等组件没有

javascript angular angular-material angular-material2

回答 1 投票 0

Angular：在 mat-table 中使用 ng-content 进行 matSort

我正在尝试创建一个可重用的垫表组件，具有分页、排序和搜索功能。我制作的可重用组件显示一些简单的列，并根据情况投影一些自定义列...

angular angular-material angular-material2 angular2-template

回答 1 投票 0

Angular 5 在单击或悬停在任意位置之前不会渲染组件

我现在遇到这个问题，这让我很头疼，我不知道问题出在哪里。我有一个名为 device-form 的表单，它是使用路由从仪表板调用的。该设备...

javascript html angular highcharts angular-material2

回答 4 投票 0

角度材质 - 带图像的 mat-optgroup

尝试找出以下是否可行： https://material.angular.io/components/select/examples （请参阅“使用选项组进行选择”）在选择的组件中使用 Angular Material 组是...

angular angular-material angular-material2

回答 1 投票 0

使用动态列排序 - Angular 材料

我正在使用这个URL并且我正在排序。排序工作正常，但是，我有 2 个数字列权重 - 它的值通过 API 调用来自数据库，并且存在于数据源中。（这里，排序是

angular angular-material2

回答 3 投票 0

如何从 <mat-chip-option>

我想删除的切换效果。当我单击“Accent Fish”芯片（此处为视频）时，它应该如视频中所示被选中，但是当我再次单击它时......

angular angular-material angular-material2 angular17 mat-chip

回答 1 投票 0

材质角度手风琴标题/标题高度

所以我一直在尝试在我的 Web 应用程序开发中采用 Materials Accordion。然而，随着内容的增长，使标题的大小扩大会遇到一些麻烦。我的标题预计...

angular angular-material angular-material2

回答 7 投票 0

Angular-Material2：垂直对齐文本和 md-icon 以匹配垂直样式？

我知道我可能在这里遗漏了一些东西。我正在尝试垂直对齐 md-icon 和一些文本，现在“示例文本”一词显示在图标下方。家我知道我可能在这里遗漏了一些东西。我正在尝试垂直对齐 md-icon 和一些文本，现在“示例文本”一词显示在图标下方。 <div> <md-icon>home</md-icon> Sample Text </div> 输出：我确实尝试使用跨度在示例文本上进行垂直对齐，但无法让任何东西正常工作，而且无论如何都感觉有点hacky。有人知道如何达到这个效果吗？这是使用<md-icon>时的常见问题。要对齐图标和文本，您可以将文本放在跨度内并对其应用样式： <div> <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span> </div> 在你的component.css中： .aligned-with-icon{ position: absolute; margin-top: 5px; margin-left: 5px; /* optional */ } 如果您要将多个图标放在同一个 div 中，也可以使用 relative 位置。这是CSS： .aligned-with-icon-relative{ position: relative; top: -5px; margin-left: 5px; /* optional */ } 另一种选择是在外部 div 上使用 flex 显示，并使用 align-items 到 center：在你的html中： <div class="with-icon"> <md-icon>home</md-icon>Sample Text </div> 在你的CSS中： .with-icon { display: flex; align-items: center; } 这是一个 Plunker 演示我使用 inline 属性。这将使图标根据按钮的大小正确缩放。 <button mat-button> <mat-icon inline=true>local_movies</mat-icon> Movies </button>  <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a> 我将此添加到我的 styles.css 中：解决按钮内图标垂直对齐问题与按钮文本相比，材质图标字体总是有点太小了 button.mat-button .mat-icon, a.mat-button .mat-icon, a.mat-raised-button .mat-icon, a.mat-flat-button .mat-icon, a.mat-stroked-button .mat-icon { vertical-align: top; font-size: 1.25em; } 你可以使用 div { display: flex; vertical-align: middle; } 或 span { display: inline-flex; vertical-align: middle; } 这可以使用 CSS flexbox 来实现  <div class="outer-div"> <mat-icon>home</mat-icon> <span>Home</span> </div>  .outer-div { display: flex; flex-direction: column; align-items: center; } .outer-div > span { font-size: 10px; } 我必须说，这么简单的事情应该可以开箱即用。但您可以使用 position: absolute 将图标垂直居中，如下所示：您可以在这里找到演示 button { /* manually making space for mat-icon because mat-icon is not position: absolute */ padding-left: 30px; } ::ng-deep .mat-icon{ font-size: 16px !important; /*change this as per your needs*/ position: absolute; top: 50%; transform: translate(-22px, -50%); /*centering image inside mat-icon box*/ display: flex !important; justify-content: center; align-items: center; } 按照@rynop给出的答案，但对于简单的div的情况，将其放入src\styles.scss足以修复对齐： .mat-icon.mat-icon-inline:not(:only-child) { vertical-align: top; }

angular angular-material angular-material2

回答 6 投票 0

将带有 mat-expansion-panel 的组件添加到 mat-accordian

我有一个带有垫子扩展组件的组件，我想将该组件放置在垫子手风琴中。除了样式之外，这都有效。我有一个带有 mat-expansion-component 的组件，我想将此组件放在 mat-accordian 中。除了样式之外，这都有效。 <mat-accordion> <app-panel1></app-panel1> <app-panel2></app-panel2> </mat-accordion> app-panel.html panel1 和 panel2 具有相同的格式。 <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> <mat-expansion-panel-header> <mat-panel-title> Title </mat-panel-title> <mat-panel-description> Description </mat-panel-description> </mat-expansion-panel-header> <ng-template matExpansionPanelContent> Content </ng-template> </mat-expansion-panel> 发生了什么：我想要什么：取自角度材料文档您的问题来自： .mat-accordion .mat-expansion-panel:last-of-type { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .mat-accordion .mat-expansion-panel:first-of-type { border-top-right-radius: 4px; border-top-left-radius: 4px; } 既然这样显示，那就是在申请开始和结束 <app-panel1> <mat-expansion-panel></mat-expansion-panel> </app-panel1> 因此您可以在组件中覆盖该属性，使其不被应用。例如在 app-panel1.component.scss :host{ .mat-expansion-panel:last-of-type { border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } } 但这也会破坏需要圆角矩形的扩展情况下的样式。

html angular typescript angular-material angular-material2

回答 2 投票 0

为什么使用自定义全局验证器时，mat-error 不会显示在 Angular Material 6 中的 mat-form 字段内

我正在使用角材料6，我在mat-form-field内有一个验证，当在mat-form-field之后移动到正确显示的mat-error时，不显示mat-error。无效代码：...

angular angular-material2 angular6 angular-material-6

回答 5 投票 0

mat-slide-toggle 不应更改其状态

当我检查滑动开关时，它应该按预期工作。但是当我尝试取消选中它时，会出现一个确认窗口，询问您是否确定。当我在确认窗口中单击“取消”时，仍然...

angular angular-material angular5 angular-material2

回答 4 投票 0

角料滑块降序运动

有没有办法将滑块从 100 移动到 1，而不是从 1 移动到 100 目前我看到我们只有一个 min 属性和 max 属性，因此滑块值按升序移动 https://