标签: angular-material
角度材质:如何设置背景颜色(不含CSS)
我正在使用Angular Material框架开发一个纯Material Design应用程序.
但是,我不明白如何设置容器的背景颜色(例如,具有蓝色背景的登录表单).我当然可以使用CSS,但我想知道是否有一个内置的指令/主题选项来做到这一点.
推荐指数
解决办法
查看次数
设置Angular Material Tooltip的字体大小
我对Web开发很陌生,我无法弄清楚如何解决以下问题,尽管它可能很容易.
我正在使用Angular 4和Angular Material来实现这样的工具提示:
<div mdTooltip="tooltip text" mdTooltipPosition="above">
<span>Show tooltip</span>
</div>
我想使工具提示文本的字体大小更大.但是,我没有设法在Angular Material文档中找到如何执行此操作,也没有在Web中搜索.有没有人知道如何做到这一点？谢谢.
推荐指数
解决办法
查看次数
角度材质2 - 如何将垫子工具栏和垫子锁定到顶部
对于我的网站,我试图将<Mat-Toolbar>锁定到屏幕顶部,然后直接在我想要锁定<Mat-Tabs>.
我遇到的问题是这个位置:固定在CSS中根本没有锁定它,当我实际去网站并检查元素时它放入了一个<div>
我怎么能把这两个元素锁定到顶部,我该如何绕过这个自动创建的Div？我有一个类似于此的先前问题,但我使用固定和绝对定位解决了这个问题,这不适用于这个较新版本的Angular/Angular Material.
推荐指数
解决办法
查看次数
如何在角度材质表的mat-row上添加click事件
我添加了这个但是在使用Chrome DevTools检查元素时,点击功能没有显示!
这是我的代码:
<mat-table [dataSource]="dataSource1" class="mat-table">
<!-- Position Column -->
<ng-container matColumnDef="Objname">
<mat-header-cell *matHeaderCellDef> ObjName </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.objname}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="Successcount">
<mat-header-cell *matHeaderCellDef> Successcount </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.successcount}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)="getRecord(element.objname)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
推荐指数
解决办法
查看次数
Angular Material mat-spinner自定义颜色
有谁知道如何更改Angular材料中的mat-spinner颜色？重写css不起作用.我尝试更改材料文件中的颜色,但它们只能导入,我无法更改任何内容.我希望它是我的自定义颜色,而不是prebiult主题的颜色.
推荐指数
解决办法
查看次数
如何更改Angular Material 2 CSS导入顺序？
在使用Angular CLI构建的Angular 2应用程序中,我按照官方安装指南设置了Angular 2 Material组件.
Angular 2 Material将其主要CSS样式放在页面中,<head>总是低于我的自定义CSS样式.如果我需要覆盖它们,这会对我产生影响.
如何强制Angular 2 Material将其核心CSS样式置于我在Angular CLI main(entry)CSS文件中定义的样式之上？
推荐指数
解决办法
查看次数
如何覆盖角度2材质样式？
我有角度材料选择:
它的代码:
<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
<md-option [value]="null" [disabled]="true">
Descuentos
</md-option>
<md-option *ngFor="let option of discounts" [value]="option">
{{ option }}
</md-option>
<md-option [value]="null" [disabled]="true">
Convenios
</md-option>
<md-option *ngFor="let option of agreements" [value]="option">
{{ option }}
</md-option>
</md-select>
我想在其中有这样的风格:
我尝试将一些类放在md-select和md-option上,但没有用.我想有一个如何放置背景颜色或边框的例子,这会给我一个想法.
先感谢您
推荐指数
解决办法
查看次数
以Angular(2+)包装FormControl
我正在尝试在Angular(v5)中创建自定义表单控件.自定义控件本质上是一个Angular Material组件的包装器,但还有一些额外的东西.
我已经阅读了有关实现的各种教程ControlValueAccessor,但是我找不到任何可以编写组件来包装现有组件的内容.
理想情况下,我想要一个显示Angular Material组件的自定义组件(带有一些额外的绑定和东西),但是能够从父表单传递验证(例如required)并让Angular Material组件处理它.
例:
外部组件,包含表单并使用自定义组件
<form [formGroup]="myForm">
<div formArrayName="things">
<div *ngFor="let thing of things; let i = index;">
<app-my-custom-control [formControlName]="i"></app-my-custom-control>
</div>
</div>
</form>
自定义组件模板
基本上我的自定义表单组件只包含一个Angular Material下拉列表和自动完成.我可以在不创建自定义组件的情况下执行此操作,但这样做似乎是有意义的,因为处理过滤等的所有代码都可以存在于该组件类中,而不是在容器类中(不需要)关心这个的实施).
<mat-form-field>
<input matInput placeholder="Thing" aria-label="Thing" [matAutocomplete]="thingInput">
<mat-autocomplete #thingInput="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
因此,在input更改时,应将该值用作表单值.
我尝试过的事情
我尝试了几种方法,都有自己的陷阱:
简单的事件绑定
绑定到事件keyup和blur事件input,然后通知父更改(即调用Angular传入的函数registerOnChange作为实现的一部分ControlValueAccessor).
这种方式有效,但是从下拉列表中选择一个值时,似乎更改事件不会触发,并且最终会处于不一致状态.
它也不考虑验证(例如,如果它是"必需的",当值为n时; t设置表单控件将正确无效,但Angular Material组件将不会如此显示).
嵌套表格
这有点接近了.我在自定义组件类中创建了一个新表单,它只有一个控件.在组件模板中,我将该表单控件传递给Angular Material组件.在类中,我订阅valueChanges …
推荐指数
解决办法
查看次数
如何组成Angular Material表单控件组件
下面的代码显示了一个允许选择美国州的自动填充表单控件.
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
但是,如果在我的应用程序中我有许多需要这种类型输入的位置,那么将它转换为一个组件(指令？)是有意义的,其中所有样板都不需要重复.但是,我仍然希望能够在模板驱动或模型驱动的表单中使用它,并允许容器组件改变占位符,验证等.
实现这一目标的简单而有力的方法是什么？
我尝试过为Angular推荐的一般方法,但它们没有考虑Angular Material的各种要求.例如,需要实现MatFormFieldControl.Angular Material提供的指导更多地是使用原始元素创建新的表单控件,而不是利用/包装现有的Angular Material表单控件.
目标是能够以这样的形式做这样的事情:
<mat-form-field>
<lookup-state placeholder="State of Residence" required="true" formControlName="resState">
</lookup-state>
</mat-form-field>
推荐指数
解决办法
查看次数
如何制作一个可主题化的Angular Material NPM模块？
是否可以构建一个使用Angular Material的npm模块,并允许它定义的组件由消费应用程序的自定义主题设置样式？
作为一个例子,假设我创建了一个包含具有以下模板的组件的npm模块:
<button mat-raised-button color="accent">Click me!</button>
是否可以将此组件导入两个不同的应用程序,每个应用程序定义一个自定义的Angular Material主题,并使按钮采用当前应用程序主题的"重音"颜色？
目前,我正在使用ng-packagr来构建Angular友好的npm模块.但是,据我所知,此模块包含一个.scss编译阶段作为打包过程的一部分,这意味着模块中定义的任何样式都无法通过使用该模块的应用程序中的主题进行自定义.
推荐指数
解决办法
查看次数
标签 统计
angular-material ×10
angular ×9
css ×4
javascript ×2
angular-cli ×1
forms ×1
html ×1
npm ×1
spinner ×1
tooltip ×1
typescript ×1