如何在角度5中禁用或覆盖cdk-focused

问题描述 投票:6回答:5

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

<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;
    }
  }
angular angular-material angular-material-5 angular-cdk
5个回答
7
投票

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

可以在以下链接中找到此文档和API的文档: 1)FocusMonitor documentation& 2)FocusMonitor API

我遇到的问题:

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

现在,如果说,与我的第四个按钮相关联的routerLink是活动的,这会让人感到困惑,因为第四个按钮会有primary background color而第一个按钮有focused styling,因为按钮上的.cdk-focused应用了.cdk-program-focusedFocusMonitor类。

解决方案:

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'));
    }
}

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


2
投票

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

在阅读了Aravind提供的解决方案之后,How to use EventEmitter(onClose) of the sidenav我决定调用以下方法:

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()">


1
投票

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

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

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;
}

因为覆盖!important的唯一方法是使用另一个!important

您的答案的可能解决方案

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

另一个选项使用::ng-deep,这允许您将样式强制转换为子组件。在这里阅读更多相关信息:

How and Where to use ::ng-deep?


0
投票

您是否尝试将!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-focusedcdk-program-focused类。


0
投票

懒人的CSS方法:

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