angular-material2 相关问题

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

将模板代码传递给angular组件中的子组件

我有一个包含formGroup的组件，其中包含以下组件

angular angular-material2 angular-forms

回答 2 投票 0

如何使用Angular材质步进器动态加载步骤

我想动态加载步骤就像我有一个提供组件一样，有两个步骤标签提供详细信息（它应该加载提供详细信息组件）添加用户（它应该显示添加用户...

angular typescript angular-material2

回答 1 投票 0

Angular Material 2 Md-ToolTip有条件显示

我正在尝试使用Angular Material 2的MdToolTip。语法看起来像我有一个工具提示但是，我想在我的锚标签上实现这个功能。 ...

html css angular angular-material2

回答 2 投票 6

应用搜索（过滤器）时，Angular Material 2多选不保留所选值

我正在使用Angular材料2多选和Angular 5.我已经添加了一个搜索过滤器但是当用户搜索特定项目并选择那些时，它会删除所选择的项目...

angular select angular-material2 multi-select

回答 2 投票 1

Angular Material - 如何为禁用的按钮添加工具提示

我注意到指令 matTooltip 在禁用的按钮上不起作用。我怎样才能实现它？例子： ... 我注意到指令 matTooltip 在禁用的按钮上不起作用。我怎样才能实现它？例子： <button mat-raised-button [disabled]="true" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> 对于启用的按钮，它完美地工作： <button mat-raised-button [disabled]="false" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> 这不起作用，因为它是由 mouseenter 事件触发的，大多数浏览器不会为禁用的元素触发该事件。解决方法是将 matTooltip 添加到父元素： <div matTooltip="You cannot delete that" [matTooltipDisabled]="!isButtonDisabled()"> <button mat-raised-button [disabled]="isButtonDisabled()"> <mat-icon>delete</mat-icon> </button> </div> 上面的示例假设有一种方法可以确定是否应启用按钮。通过使用matTooltipDisabled工具提示将仅在按钮被禁用时显示。参考文献： https://github.com/angular/material2/issues/5040 https://github.com/angular/material2/issues/7953 我在禁用图标按钮上显示工具提示时遇到了类似的问题。给定的解决方案对我来说不实用，因为在按钮顶部添加一个额外的 div，弄乱了按钮相对于工具栏中其他按钮的布局。对我来说一个更简单的解决方案是在按钮内的图标内添加工具提示。像这样的东西： <button mat-raised-button [disabled]="true"> <mat-icon matTooltip="You cannot delete that">delete</mat-icon> </button> 由于图标没有被禁用，所以它有效。是的，最简单的解决方案就像above。但就我而言，我需要更大的灵活性。 <button [disabled]="form.invalid"> <span [matTooltip]="form.invalid ? 'some text' : ''">button text</span> </button> 按照其他人的建议在按钮中的垫图标内添加工具提示只有当您将鼠标悬停在图标而不是按钮上时才会起作用。取而代之的是，您可以将按钮包裹在另一个没有任何 css 类的 div 周围，只是工具提示。此外，您还可以添加 matTooltipDisabled 属性以确保您的工具提示永远不会被禁用。 <div matTooltip="You cannot delete that" [matTooltipDisabled]="false"> <button mat-raised-button [disabled]="true"> <mat-icon>delete</mat-icon> </button> </div> 试试这个： <div [matTooltip]="isDisabled ? 'You cannot delete that' : ''"> <button mat-raised-button [disabled]="isDisabled"> <mat-icon>delete</mat-icon> </button> <div> 您可以使用title属性，它会在必要的情况下显示 <button mat-raised-button [disabled]="true" title = "Some text"> <mat-icon>delete</mat-icon> </button> 您可以使用三元运算符进行属性绑定我找到解决办法了！像这样将工具提示放入按钮内容中： <button type="submit" [disabled]="disableEdit()" class="btn btn-primary btn-sm" [routerLink]="['/entity', entity.id, 'edit']"> <div matTooltip="{{ 'entity.placeholders.cantEdit' | translate }}" [matTooltipDisabled]="disableEdit()"> <fa-icon [icon]="'pencil-alt'"></fa-icon> <span class="d-none d-md-inline">{{ 'entity.action.edit' | translate }}</span> </div> </button> 我知道这很丑但你也这样做，使用多个按钮ngIf  <button *ngIf="disable" mat-raised-button matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> <button *ngIf="!disable" mat-raised-button (click)="delete()"> <mat-icon>delete</mat-icon> </button> 只需像这样将样式“指针事件：全部”添加到您的按钮 <button mat-raised-button style="pointer-events: all" [disabled]="true" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> 角和角材料 15 您可以将 matTooltip 添加到子元素，最合乎逻辑的是在材质按钮的情况下，span 包含按钮文本或 mat-icon 带有材质图标。当使用 Material 按钮时，禁用的按钮默认应用样式 pointer-events: none；查看按钮的全局材质样式：图标按钮： .mdc-icon-button:disabled, .mat-mdc-icon-button[disabled] { pointer-events: none; } 普通按钮： .mdc-button[disabled], .mat-mdc-button[disabled] { pointer-events: none; } 如果您希望在悬停按钮时显示工具提示，则需要为子元素取消此设置。这可以像这样轻松解决： <button #myIconButton mat-icon-button [disabled]="!isAllowedDelete"> <mat-icon [style.pointer-events]="'all'" matTooltip="You are not allowed to delete this item" [matTooltipDisabled]="myIconButton.disabled">delete</mat-icon> </button> <button #myButton mat-button [disabled]="!isAllowedDelete"> <span [style.pointer-events]="'all'" matTooltip="You are not allowed to delete this item" [matTooltipDisabled]="myButton.disabled">delete</span> </button> 或者如果你想在你的样式表中使用它： button[disabled] span.mat-mdc-tooltip-trigger button[disabled] mat-icon.mat-mdc-tooltip-trigger { /* Allows for tooltips to be triggered on disabled buttons */ pointer-events: all; } 在我看来，这比将按钮包装在元素中更好，您现在可以使用按钮“禁用”状态 (myButton.disabled) 直接禁用/启用工具提示，并且您不需要添加任何额外的包装器或元素DOM. 不仅matTooltip，甚至title属性在禁用按钮上也不起作用。只需在其包含的 div 上添加工具提示，而不是在按钮本身上。 <div title="Some tooltip message"> <button type="button" [disabled]="!enable()">My Button</button> </div>

angular angular-material2

回答 11 投票 0

角度2材料垫片尺寸

我有以下代码 {{...

angular angular-material angular-material2

回答 1 投票 4

在Angular Material上增加默认字体和字段等大小？

建立一个主要面向老年人的网站。如果我放大到300％它就是正确的。如果没有明确引用每个相关的HTML标记，我该如何设置此默认值？例如：有混合物还是......

angular angular-material accessibility zoom angular-material2

回答 2 投票 0

是否可以为mat-checkbox和mat-checkbox标签制作不同的点击事件？ [关闭]

我需要为mat-checkbox及其标签设置不同的点击事件。任何人帮我解决这个问题。