angular-material2 相关问题

Angular Material项目是Angular 2/4/5/6中Material Design的实现。该项目基于Material Design系统提供了一组可重用,经过良好测试和可访问的UI组件。请勿将此标记用于AngularJS Material问题。

为什么`setAllSelected`不触发`listbox.valueChange`事件,我们如何让它发出?

为什么 setAllSelected 没有导致 listbox.valueChange 发出?我们怎样才能确保它发射? 从 '@angular/core' 导入 { Component, ViewChild }; 从 '@angular/cdk/l... 导入 { CdkListbox, CdkOption } ...

回答 1 投票 0

向 mat-tab-group 添加按钮

我是 Angular 2/4 的新手,并且一直很喜欢 Material Design 组件 (https://material.angular.io)。我有一个简单的 SPA,它使用选项卡组在动态视图之间切换。 ...

回答 4 投票 0

在外部点击时关闭 mat-sidenav

每当用户单击不在其中的某个位置时,我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定,现在我正在尝试使用 rxjs 的主题 应用程序模板 每当用户单击不在其中的某个位置时,我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定,现在我正在尝试使用 rxjs' Subject 应用程序模板 <app-sidenav [openedSubject]="openedSubject"></app-sidenav> 应用程序组件 openedSubject = new Subject<boolean>(); @HostListener('click', ['$event']) clickedInside($event) { this.openedSubject.next(false); } SidenavComponent @Input() openedSubject: Subject<boolean>; @ViewChild('sidenav') sidenav: MatSidenav; ngAfterContentInit() { this.openedSubject.subscribe(opened => { if(this.sidenav.opened) opened || this.sidenav.toggle(); }); } toggle() { this.openedSubject.next(!this.sidenav.opened); } Sidenav模板 <mat-sidenav-container> <mat-sidenav #sidenav><mat-toolbar color="primary">Menu</mat-toolbar> </mat-sidenav> <mat-sidenav-content> <mat-toolbar color="primary"> <button (click)="toggle()">toggle</button> </mat-toolbar> </mat-sidenav-content> </mat-sidenav-container> https://stackblitz.com/edit/ng-sidenav-experiments 但是好像有逻辑错误。 click 事件 覆盖整个文档,但它应该排除侧边导航和工具栏。 成功了。问题是我对 HostListener 的使用,而我真的只想像这样 (click) : <sidenav [openedSubject]="openedSubject"></sidenav> <fake-route-view (click)="dismissSidebar()"></fake-route-view> 完整工作版本:https://stackblitz.com/edit/ng-sidenav-experiments

回答 1 投票 0

设置 Angular Material Tooltip 的字体大小

我对网络开发非常陌生,我不知道如何解决以下问题,尽管它可能很简单。 我正在使用 Angular 4 和 Angular Material 来实现这样的工具提示:...

回答 13 投票 0

是否可以设置 Angular Material 主题的文本颜色?

使用Material的公共函数而不覆盖CSS是否可以设置文本颜色? Define-palette 函数接受一个名为 text 的参数,这设置了 pal 的文本属性...

回答 1 投票 0

覆盖 md-dialog-container 的 Angular 材质大小和样式

我正在使用 Angular Material,并且我正在使用 md-dialog 作为我的画廊的弹出窗口。默认的动画和样式看起来不错。但是,我想更改 md-

回答 7 投票 0

更改角度材质的默认扩展面板箭头颜色

我有一个角度扩展面板,如下所示。如何将下面箭头的颜色更改为白色? 我的代码(HTML): 我有一个角度扩展面板,如下所示。如何将下面箭头的颜色更改为白色? 我的代码(HTML): <md-expansion-panel> <md-expansion-panel-header> <md-panel-title> Personal data </md-panel-title> <md-panel-description> Type your name and age </md-panel-description> </md-expansion-panel-header> <md-form-field> <input mdInput placeholder="First name"> </md-form-field> <md-form-field> <input mdInput placeholder="Age"> </md-form-field> </md-expansion-panel> 我的代码(TS): import {Component} from '@angular/core'; /** * @title Basic expansion panel */ @Component({ selector: 'expansion-overview-example', templateUrl: 'expansion-overview-example.html', }) export class ExpansionOverviewExample {} 工作代码如下: <md-expansion-panel> <md-expansion-panel-header class="specific-class"> <md-panel-title> Personal data </md-panel-title> <md-panel-description> Type your name and age </md-panel-description> </md-expansion-panel-header> <md-form-field> <input mdInput placeholder="First name"> </md-form-field> <md-form-field> <input mdInput placeholder="Age"> </md-form-field> </md-expansion-panel> import {Component} from '@angular/core'; /** * @title Basic expansion panel */ @Component({ selector: 'expansion-overview-example', templateUrl: 'expansion-overview-example.html', styles: [` ::ng-deep .specific-class > .mat-expansion-indicator:after { color: white; } `], }) export class ExpansionOverviewExample {} 说明: 为了设置 Angular 动态添加的嵌套元素的样式 材质组件需要使用特殊的选择器::ng-deep。 这允许解决视图封装。 为了覆盖动态应用的内置组件样式 您需要增加选择器的CSS 特异性。那是 添加额外 CSS 类special-class的原因。如果你 将使用选择器 ::ng-deep .mat-expansion-indicator:after 扩展组件将覆盖它。 您不必使用 ng-deep。相反,您可以将此代码添加到样式表中: .mat-expansion-panel-header-description, .mat-expansion-indicator::after { color: white; } 请参阅 GitHub 文档 https://github.com/angular/components/tree/master/src/material/expansion 它以这种方式对我有用 HTML <mat-accordion> <mat-expansion-panel class="specific-class"> <mat-expansion-panel-header> <a mat-button>Lorem ipsum dolor sit amet.</a> </mat-expansion-panel-header> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li> </ul> </mat-expansion-panel> </mat-accordion> CSS /deep/ .mat-expansion-indicator::after, .mat-expansion-panel-header-description { color: red;} 您只需将其添加到全局 styles.css 文件中即可。至少在 7.2 版本中对我有用。 .mat-expansion-indicator::after { color: green; } 对于“@角度/材料”:“^10.2.7” 您将 encapsulation: ViewEncapsulation.None 属性添加到您的 @Component 装饰器中 @Component({ selector: '...', templateUrl: '...', styleUrls: ['...'], encapsulation: ViewEncapsulation.None // <---- }) 然后 .mat-expansion-panel-body { padding: 0 !important; } 那么这个 CSS 无论有没有 !important 都可以正常工作 ::ng-deep 和 /deep/ 不适用于新版本的 angular/material 这对我有用 ::ng-deep .mat-expansion-indicator, .mat-expansion-indicator:after { color: green;} 这对我有用 2018 html 文件 <md-expansion-panel> <md-expansion-panel-header class="specific-class"> <md-panel-title> Personal data </md-panel-title> <md-panel-description> Type your name and age </md-panel-description> </md-expansion-panel-header> <md-form-field> <input mdInput placeholder="First name"> </md-form-field> <md-form-field> <input mdInput placeholder="Age"> </md-form-field> </md-expansion-panel> 样式.css .specific-class > .mat-expansion-indicator, .mat-expansion-indicator:after { color: red !important; } 如果您使用 npm 安装了 Angular Material,则可以直接转到应用程序中的material.scss,并使用 class .mat-expansion-indicator:after 更改箭头的颜色。 对我来说这就是有效的: .mat-expansion-indicator::after{ border-color: red; }

回答 9 投票 0

直接使用mat-datepicker,无需输入

我想将日期选择器放在永久侧边栏中,始终可见并且不依赖于输入,这可能吗? 我想只要放置组件并添加opened = true就可以留下

回答 4 投票 0

角度材质样式类不起作用

我正在使用 Angular Material 将日期选择器添加到我的应用程序中。由于某种原因,角度材料没有应用原始的角度材料样式。 它在我的应用程序中的显示方式: 它应该如何显示...

回答 9 投票 0

操纵角度材料输入表单样式

我是 Angular 和 Angular Material (AM) 的新手。默认情况下,AM 输入组件显示调色板的主要颜色,直到您单击表单,然后它会更改占位符值并...

回答 7 投票 0

文本溢出:mat-expansion-panel 标题中的省略号

使用垫扩展面板来显示可以折叠的文本。唯一缺少的是 css text-overflow: ellipsis 样式应提供的 3 个点。然而这并不...

回答 2 投票 0

Angular Material Mat-根据最长选项宽度选择宽度

我有一个带有选项的垫选择,我希望将其内联设置为文本,并且下拉列表的长度与最长的选项一样长。我可能可以用 js / css vanilla 风格做一些黑客行为,但是

回答 4 投票 0

如何在 Angular Mat-Select 中动态禁用特定选项

我有一个列表,其中一个对象具有 name 和 id 属性: [ { “名称”:“打开”, “id”:“1” }, { “名称”:“进行中”, &...

回答 5 投票 0

垫子选择面板最小宽度

我正在尝试使用多个复选框自定义垫选择。 由于某种原因,面板的最小宽度错误,如下所示: 我不知道它在哪里计算这个最小宽度。 我也尝试添加

回答 7 投票 0

使用 mat-menu 作为上下文菜单:正确定位

我正在尝试使用 mat-menu 构建一个上下文菜单,我觉得我已经非常接近了。我希望用户右键单击时弹出菜单。问题是它在用户上次访问的位置弹出...

回答 4 投票 0

在 Angular2 中显示进度条的最佳方式是什么?

当执行 HTTP 请求时,在 Angular2 应用程序中显示进度条的最佳方式是什么? 我使用 AngularMaterial2 进度条尝试了以下操作: 当执行 HTTP 请求时,在 Angular2 应用程序中显示进度条的最佳方式是什么? 我使用 AngularMaterial2 进度条尝试了以下操作: <md-progress-bar mode="determinate" value="myValue"></md-progress-bar> 但是如何找到上述代码的“值”呢? (如果无法找出HTTP请求的实际进度,实现Youtube或Github风格进度条的最佳方法是什么?) 我们无法确定完成HTTP请求所需的时间,这就是为什么indeterminate模式更适合HTTP请求的进度。 Angular 的 Http 服务返回一个 Observable,我们可以订阅并处理响应,但目前没有可用的机制从 Http 服务获取进度。 一种方法是使用 XmlHttpRequest 监听 progress 事件,如果使用其 lengthComputable 属性,则可以相应地显示进度条。 因此实现 Youtube 或 Github 风格进度条的一种方法是 如本答案所示。 如果您有多个请求,您可以使用已完成请求数的百分比。 使用互联网上广泛提供的公共源代码中的库、模块或包 以下是一些 Angular 2 示例: https://embed.plnkr.co/rx4RJUFjHqGYMA3jRxDL/ http://www.angulartypescript.com/angular-2-progress-bar/

回答 2 投票 0

如何设置“未选中”滑动切换组件的颜色?

我可以设置“未选中”滑动切换组件的颜色吗? 文档仅指定如何设置“已检查”的一项。 在 Slide-toggle-configurable-example.html 模板中: 我可以设置“未选中”滑动切换组件的颜色吗? 文档仅指定如何设置“选中”一项。 在 Slide-toggle-configurable-example.html 模板中: <md-slide-toggle class="example-margin" [color]="color"> Slide me! </md-slide-toggle> 在 *.ts 文件中: import {Component} from '@angular/core'; @Component({ selector: 'slide-toggle-configurable-example', templateUrl: 'slide-toggle-configurable-example.html', styleUrls: ['slide-toggle-configurable-example.css'], }) export class SlideToggleConfigurableExample { color = 'accent'; checked = false; } 当滑动切换“未选中”时,我真的很想有一些特定的颜色。可以吗? 为未选中状态设置颜色的唯一可能方法是使用以下规则通过 CSS 设置它: 对于切换栏使用: md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: red; /* set your color here */ } 您还可以根据类型设置不同的颜色: md-slide-toggle.mat-primary:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: pink; } md-slide-toggle.mat-accent:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: yellow; } 要设置拇指的颜色,请使用: md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-thumb { background-color: green; } 要设置 mat-slide-toggle 的颜色,您必须将此代码放入 style.scss 文件中 .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after { background: #F4760B !important; } .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track::after { background: #F4760B !important; }

回答 2 投票 0

如何在 Angular Material 2 中构建自定义组件

是否有任何标准方法可以在 Angular Material 2 之上构建自己的组件或扩展现有组件。 之前我使用过 Sencha/ExtJS 框架,构建自己的框架非常简单

回答 2 投票 0

Angular Material 2:修复多行错误消息

我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时,我遇到了问题。这是照片: 这是代码: 我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时,我遇到了问题。这是照片: 这是代码: <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到,这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗? 问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute,所以它不占用实际空间。 按照 xumepadismal 在 github 上关于此问题的建议,您可以添加此 scss 作为解决我的问题的解决方法: // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点,并将 .mat-form-field-unterline 重新定位在输入字段之后。 正如材料 15 中在 github 讨论中提到的,可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为,您必须使用以下选项更新 angular.module.ts 提供程序: providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到 使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多,从而在顶部留下不必要的空白空间。 使用 Tailwind CSS,这个解决方案对我来说适用于最新的 Angular 17: .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。

回答 4 投票 0

SASS-Loader 中的分号错误:“Angular 应用程序中的缩进语法中不允许使用分号

我的 Angular 项目面临一个问题,其中 SASS 文件在使用 SASS-Loader 编译期间生成错误。错误消息具体指出: 模块构建失败(来自 ./node_m...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.