webentwicklung-frage-antwort-db.com.de

deaktivieren oder Überschreiben von CDK-Fokus in Winkel 5

Ich arbeite an einer Matte-Button-Toggle-Gruppe, für die ich vorhandene CSS geändert habe, indem die Mat-Button-Toggle-Klasse wie folgt überschrieben wurde. Wenn ich nun zwischen den Schaltflächen umschalte, funktioniert die CSS nicht, bis ich den Fokus herausbekomme. Das liegt daran, dass die beiden cdk-Klassen 'cdk-fokussiert' und 'cdk-programmorientiert' hinzugefügt werden, wenn die angeklickte Schaltfläche den Fokus hat. Gibt es eine Möglichkeit, diese Klassen zu deaktivieren oder sie nicht mit demselben CSS-Code von mat-button-toggle-checked zu überschreiben?

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

und 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;
    }
  }
5
user3154990

Sie können Angular CDK'sFocusMonitor service verwenden, um die Klassen .cdk-focused und .cdk-program-focused zu deaktivieren, indem Sie die stopMonitoring()-Methode des Dienstes aufrufen.

Die Dokumentation für dieses API finden Sie unter den folgenden Links:
1) FocusMonitor-Dokumentation &
2) FocusMonitor API

Das Problem hatte ich:

Mein sidenav hatte 4 Schaltflächen, die mit * ngFor erstellt wurden. Jede dieser Schaltflächen war auch eine routerLink. Nur die Schaltfläche, deren Router-Link aktiv war, sollte eine primäre Hintergrundfarbe haben. 

Nun wurde dies verwirrend, wenn beispielsweise der mit meiner vierten Taste verknüpfte RouterLink aktiv war, da die 4. Taste primary background color und die 1. Taste focused styling hatte, weil .cdk-focused und .cdk-program-focused Klassen von der FocusMonitor-Taste auf die Schaltfläche angewendet wurden.

Die Lösung:

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

Sie können sich die Dokumentationen ansehen, um diese an Ihre Bedürfnisse anzupassen.

5
James Antony

In meinem Fall bleibt das eigentliche Problem bei der Tastenstruktur, dem 'Material'-Aufbau verschiedener Unterkomponenten und dem letzten ist ein' div 'mit der CSS-Klasse' mat-button-focus-overlay ':

Meine Lösung ist einfach: In der Datei "style.css" können Sie das "mat-button-focus-overlay" hinzufügen oder abonnieren.

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

Ich hatte das gleiche Problem mit einer Side-Nav-Komponente.

Nach dem Lesen der von Aravind bereitgestellten Lösung hier How to use EventEmitter (onClose) von sidenav habe ich beschlossen, folgende Methode aufzurufen:

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

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

Vielleicht können Sie beispielsweise in Ihrer ngOnInit () -Methode mehr oder weniger dasselbe tun?

(Für die Aufzeichnung sieht mein öffnendes Navi-Tag wie folgt aus: <mat-sidenav #snav class="menu-sidenav" mode="over" position="end" opened="false" (open)="onSideNavOpened()">)

2
Romano

Scrollen Sie nach unten zum fettgedruckten Text für Antworten.

Bei der Änderung des Stils eines Elements wird empfohlen, nicht nach Elementen, sondern nach Klassen zu referenzieren. Zum Beispiel anstelle von:

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

du würdest schreiben 

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

Auch dies ist nur eine gute Praxis.

Wichtig ist (kein Wortspiel beabsichtigt), darauf hinzuweisen, dass Sie !important nicht verwenden sollten. Im Allgemeinen sollte dies für spezielle Edge-Fälle (wie Drucken) reserviert sein. Dies liegt daran, dass es schwieriger werden kann, Stylesheets zu verwalten. Ein gutes Beispiel dafür, wo dies problematisch wäre, wäre, die Grenze davon ändern zu wollen:

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

weil ein Weg !important nur durch einen anderen !important überschrieben werden kann. 

Mögliche Lösungen für Ihre Antwort

Verfügen über eine Datei "material-theme-overrides.scss", die im Wesentlichen die Formatierung von Klassen überschreibt. Diese Methode ist ideal, wenn Sie möchten, dass sich alle Klassen standardmäßig so verhalten. Wie wenn Sie möchten, dass alle Ihre .mat-Buttons einen Radius haben. Das Material bietet dazu eine gute Anleitung: https://material.angular.io/guide/theming

Eine weitere Option Verwenden Sie ::ng-deep, um einen Stil für untergeordnete Komponenten festzulegen. Lesen Sie hier mehr darüber: 

Wie und Wo? :: ng-deep?

1
DonDaniel

Ich löse dieses Problem mit dem Klassen-CSS-Selektor von cdk-focused und !important:

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

Das einfachste "Deaktivieren" besteht darin, Ihrer Komponente den folgenden CSS-Override hinzuzufügen.

:Host {
  /deep/ .mat-button-toggle-focus-overlay {
    display: none;    
  }
}
0
codenamezero

CSS-Methode für die faulen Leute:

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

Haben Sie versucht, !important zu den Attributen Ihres Selektors hinzuzufügen:

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

Auf diese Weise überschreiben Sie die Klassen cdk-focused und cdk-program-focused.

0
jcmordan