angular-material2 相关问题

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

如何更改 Angular 6 材质单选按钮外部波纹颜色

我想更改 Angular Material Radio 按钮的默认颜色。我只能更改为单选按钮颜色。选项一我想更改 Angular Material Radio 按钮的默认颜色。我只能更改为单选按钮颜色。 <mat-radio-group> <mat-radio-button value="1">Option 1</mat-radio-button> <mat-radio-button value="2">Option 2</mat-radio-button> </mat-radio-group> 但是当我们单击选项时，我无法更改外部波纹效果颜色。有人请帮我解决这个问题。这里是完全风格垫单选按钮的解决方案 ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { opacity: 0.5 !important; /*click effect color change*/ background-color: blue !important; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: blue!important; /*inner circle color change*/ } ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { border-color:blue!important; /*outer ring color change*/ } 希望有帮助。自定义 Angular 材质的唯一方法是覆盖 css 规则，因此解决方案是覆盖单选按钮的 css 波纹规则： .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { background-color: rgba(0, 0, 0, .1) !important; } 我的默认主题是金色（白色），我需要将其更改为棕色（白色）。选中时我需要内圈和外圈棕色，未选中时需要外圈棕色。我还需要涟漪效应来匹配。这是有效的结果： & .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { background-color: brown !important; // Override material } & .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: brown !important; // Override material z-index: 3; } & .mat-radio-button .mat-radio-outer-circle { border-color: brown !important; // Override material z-index: 3; } 不需要改变不透明度。在我的场景中： // CSS :host ::ng-deep .mat-radio-button.mat-mycolor.mat-radio-checked .mat-radio-outer-circle { border-color: blue !important; } :host ::ng-deep .mat-radio-button.mat-mycolor .mat-radio-inner-circle { background-color: blue !important; } :host ::ng-deep .mat-radio-button.mat-mycolor .mat-ripple-element { background-color: blue !important; } // HTML <mat-radio-group [(ngModel)]="selectedAction"> <mat-radio-button [color]="radioColor" [style.color]="textColor" [value]="action" *ngFor="let action of actions">{{action}}</mat-radio-button> </mat-radio-group> // TS textColor: string = "#ff0000"; radioColor: string = "mycolor"; actions: string[] = ["Take a walk", "Mow the lawn"]; selectedAction: string = this.actions[0]; 更改垫子单选按钮的颜色将以下内容粘贴到您的模块中。单选按钮的默认颜色可以使用全局配置 MAT_RADIO_DEFAULT_OPTIONS 提供商供应商：[{ 提供：MAT_RADIO_DEFAULT_OPTIONS， useValue: { color: 'primary' }, }]

css angular angular-material material-design angular-material2

回答 5 投票 0

ngModelOptions 从 Angular 模板驱动表单中删除表单控制

我有一个只有 1 个可编辑字段（日期字段）的网格，我想在其中添加一些验证逻辑（用户不能输入随机字符串等）。我正在使用模板驱动的表单，这样我就可以使用我有一个只有 1 个可编辑字段（日期字段）的网格，我想在其中添加一些验证逻辑（用户不能输入随机字符串等）。我正在使用 template driven form 以便我可以使用 <mat-error> 向用户显示实际错误。现在，我遇到了一个问题，即日期字段（截止日期）没有绑定到从服务器获取的数据，尽管其他列（请注意，我没有将其他列作为表单控件）。添加 [ngModelOptions]="{standalone: true}" 时，数据绑定问题已修复，但控件不再添加到表单中。下面语句的控制台日志记录显示我为空，而不是未添加 ngModelOptions 时：因此，我不能再使用我的验证逻辑，因为（据我所知）它与表单控件结合在一起。我在这里做错了什么，可以做些什么来补救？我的代码片段相同： <form #myForm="ngForm"> <mat-table matSort [dataSource]="dataSource" #table> <ng-container matColumnDef="col1">....</ng-container> <ng-container matColumnDef="col2">....</ng-container> ..... <ng-container class="form-group" matColumnDef="dueDate"> <mat-header-cell *matHeaderCellDef mat-sort-header="dueDate"> <div> <div style="display: flex; align-items: center; cursor: pointer"> Due Date </div> </div> </mat-header-cell> <mat-cell *matCellDef="let element;"> <mat-form-field appearance="fill" style="width:100px"> <mat-label>Choose Due Date</mat-label> <input matInput type="text" [matDatepicker]="picker1" name="dueDate" #dueDate="ngModel" class="form-control" [(ngModel)]="element.dueDate" autocomplete="off" (ngModelChange)="onDueDateChanges($event, element)" [ngModelOptions]="{standalone: true}" [matDatepicker]="picker1"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> </mat-form-field> </mat-cell> </ng-container> ...... </mat-table> </form>

html angular typescript angular-material2

回答 0 投票 0

Angular material design - 如何添加自定义按钮颜色？

我想添加自己的自定义颜色，类似于“primary”、“warn”等。例如，我为橙色背景添加了一个类，但我将其用作类而不是颜色属性...

angular material-design angular-material2

回答 10 投票 0

Mat-datepicker呈现在内容下方。

我在Angular中的素材设计datepicker呈现在内容下方。我有一个组件是模块的一部分，渲染在app-root里面。在这个里面我有mat-stepper，而在一个...

angular material-design angular-material2

回答 1 投票 0

Angular Material2 Mat-Table服务器端分页跨页行选择。

使用服务器端分页时，如何在Angular Material 2 mat-table上实现跨页选行？我有一个工作的Angular Material表，使用了服务器端分页。但是，...