angular - 如何在 Angular 中禁用或覆盖 cdk-focused

Question

我正在研究 mat-button-toggle-group，我通过覆盖 mat-button-toggle-checked 类来修改现有的 css，如下所示。现在，当我在按钮之间切换时，css 在我获得焦点之前无法工作，那是因为当单击的按钮处于焦点时添加了 2 个 cdk 类 'cdk-focused' 和 'cdk-program-focused' 。有什么方法可以使这些类禁用或使它们不应用或用相同的 mat-button-toggle-checked 覆盖它们？

<mat-button-toggle-group #group="matButtonToggleGroup" value="line">
    <mat-button-toggle (click)="showLine()" value="line">Line</mat-button-toggle>
    <mat-button-toggle (click)="showChart()" value="chart">Chart</mat-button-toggle>
</mat-button-toggle-group>

和CSS

mat-button-toggle-group {
    border: solid 1px #d1d8de;
    width:260px;
    height:41px;
    text-align: center;
    .mat-button-toggle-checked{
      background-color: #ffffff;
      font-weight: bold;
    }
    .mat-button-toggle{
      width:50%;
      font-size: 15px;
    }
  }

score 23 · Accepted Answer

您可以通过调用服务的方法Angular CDK's FocusMonitor service来使用禁用.cdk-focused和类。.cdk-program-focusedstopMonitoring()

这个和 API 的文档可以分别在以下链接中找到：
1）FocusMonitor 文档和
2）FocusMonitor API

我遇到的问题：

我sidenav有 4 个使用 *ngFor 创建的按钮。这些按钮中的每一个也是一个routerLink. 只有路由器链接处于活动状态的按钮才应具有主要背景颜色。

现在，如果与我的第 4 个按钮关联的 routerLink 处于活动状态，因为第 4 个按钮将具有primary background color和第 1 个按钮，focused styling因为按钮.cdk-focused上.cdk-program-focused应用了类，这会变得令人困惑FocusMonitor。

解决方案：

import { Component, AfterViewInit } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';

@Component({
    selector   : 'test-component',
    templateUrl: 'test-component.template.html',
})

export class TestComponent implements AfterViewInit {
    constructor(private _focusMonitor: FocusMonitor) {}

    ngAfterViewInit() {
        this._focusMonitor.stopMonitoring(document.getElementById('navButton_1'));
    }
}

您可以查看文档以根据您的需要进行定制。

score 9 · Accepted Answer

就我而言，真正的问题在于按钮结构，“材质”构建各种子组件，最后一个是带有 CSS 类“mat-button-focus-overlay”的“div”：

我的解决方案很简单，在“style.css”文件中，添加或订阅“mat-button-focus-overlay”

.mat-button-focus-overlay { 
background-color: transparent!important; 
}

score 4 · Accepted Answer

4

懒人的 CSS 方法：

.your-elements-class-name:focus {
  outline: 0px solid transparent;
}

于 2019-04-29T21:33:50.347 回答

score 2 · Accepted Answer

最简单的“禁用”只是将以下 css 覆盖添加到您的组件中。

:host {
  /deep/ .mat-button-toggle-focus-overlay {
    display: none;    
  }
}

score 2 · Accepted Answer

摆脱由 cdk-focused、cdk-program-focused、cdk-mouse-focused 和 cdk-touch-focused 创建的轮廓的最简单方法是添加

button:focus { outline: none; }

在你的styles.css文件中

前

后

score 1 · Accepted Answer

我在使用侧导航组件时遇到了同样的问题。

在阅读了 Aravind 在此处如何使用 Sidenav 的 EventEmitter(onClose)提供的解决方案后，我决定调用以下方法：

onSideNavOpened() {
    let buttonsList = document.getElementsByClassName('mat-button');

    for(let currentButton of buttonsList) {
      currentButton.classList.remove("cdk-focused");
      currentButton.classList.remove("cdk-program-focused");
    }
  }

例如，也许您可以在 ngOnInit() 方法中或多或少地做同样的事情？

（作为记录，我的打开侧导航标签如下所示 <mat-sidenav #snav class="menu-sidenav" mode="over" position="end" opened="false" (open)="onSideNavOpened()">：）

score 1 · Accepted Answer

I solve this issue with the class css selector of cdk-focused and !important:

.cdk-focused {
  background-color: transparent!important;
}

score 1 · Accepted Answer

如果按钮包含在父 mat 元素中，则可以选择使用autoFocus某些元素的 @input 属性禁用自动对焦。例如，mat dialog或mat sidenav都有。

score 1 · Accepted Answer

向下滚动到粗体文本以获取答案。

好的做法是在更改元素样式时不要按元素引用，而是按类引用。例如，而不是使用：

mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

你会写

.mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

同样，这只是一个好习惯。

另一件重要的事情（不是双关语）是要指出的是，您应该避免使用!important. 一般来说，这应该保留用于特殊的边缘情况（如打印）。这是因为它会导致更难维护样式表。一个很好的例子就是想要改变它的边界：

.mat-button-toggle-group {
    border: solid 1px #d1d8de !important;
}

因为覆盖 an 的唯一方法!important是使用 another !important。

您的答案的可能解决方案

有一个 material-theme-overrides.scss 文件，它基本上覆盖了类的样式。当您希望所有类默认以这种方式运行时，此方法是理想的。就像您希望所有 .mat 按钮都具有半径一样。Material 提供了一个很好的指导： https ://material.angular.io/guide/theming

另一个选项 使用::ng-deep它允许您将样式强制到子组件。在此处阅读更多相关信息：

如何以及在何处使用 ::ng-deep？

score 0 · Accepted Answer

对于 mat-radio-button 作品：

.mat-radio-button .mat-radio-ripple {
  height: 0px !important;
  width: 0px !important;
}

score 0 · Accepted Answer

最干净的解决方案是删除 box-shadow：

.mat-raised-button, .mat-flat-button {
  background-color: #4bcd3e;
  color: #ffffff;
  border-color: #4bcd3e;
  box-shadow: none;
}

.mat-raised-button:not([disabled]).cdk-keyboard-focused,
.mat-raised-button:not([disabled]).cdk-program-focused {
  background-color: #41b336;
  border-color: #41b336;
  color: #ffffff;
  box-shadow: none;
}

score 0 · Accepted Answer

对于以 cdk 为重点的类作为问题的基础，请使用：

.cdk-focused, .cdk-mouse-focused {
  outline: 0 !important;
}

score 0 · Accepted Answer

如果你使用 sass，你可以这样做：

::host {
  &::ng-deep {
    .cdk-program-focused {
      background-color: transparent !important;
    }
  }
}

score -1 · Accepted Answer

您是否尝试添加!important到选择器的属性：

mat-button-toggle-group {
    border: solid 1px #d1d8de !important;
    width:260px !important;
    height:41px !important;
    text-align: center !important;
    .mat-button-toggle-checked{
      background-color: #ffffff !important;
      font-weight: bold !important;
    }
    .mat-button-toggle{
      width:50% !important;
      font-size: 15px !important;
    }
  }

这样，您将覆盖cdk-focused和cdk-program-focused类。

angular - 如何在 Angular 中禁用或覆盖 cdk-focused

14 回答 14

Related

Reference