web-dev-qa-db-ja.com

angular 5でcdk-focusedを無効化または上書きする方法

以下のようにmat-button-toggle-checkedクラスを上書きして既存のcssを変更したmat-button-toggle-groupに取り組んでいます。今、ボタンを切り替えると、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;
    }
  }
angularangular-materialangular-material-5angular-cdk
10
user3154990

Angular CDK'sFocusMonitor serviceを使用して、サービスのstopMonitoring()メソッドを呼び出すことで、.cdk-focusedおよび.cdk-program-focusedクラスを無効にすることができます。

このドキュメントとAPIのドキュメントは、それぞれ次のリンクにあります。
1） FocusMonitorドキュメント ＆
2） FocusMonitor API

私が抱えていた問題：

私のsidenavには、* ngForを使用して作成された4つのボタンがありました。これらのボタンもそれぞれrouterLinkでした。ルーターリンクがアクティブだったボタンにのみ、主要な背景色が必要です。

これで、4番目のボタンにprimary background colorがあり、1番目のボタンにFocusMonitorによって適用されるfocused stylingクラスと.cdk-focusedクラスがあるため、4番目のボタンに関連付けられたrouterLinkが.cdk-program-focusedを持ち、たとえば、ボタン。

ソリューション：

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

これをニーズに合わせて調整するためのドキュメントをご覧ください。

9
James Antony

私の場合、本当の問題はボタン構造にとどまり、「マテリアル」はさまざまなサブコンポーネントを構築し、最後のサブコンポーネントはCSSクラス「mat-button-focus-overlay」を持つ「div」です。

私の解決策は簡単です。「style.css」ファイルで、「mat-button-focus-overlay」に追加またはサブスクライブします

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

答えを見るには、下にスクロールして太字のテキストにします。

要素のスタイルを変更するときは、要素ではなくクラスで参照することをお勧めします。たとえば、使用する代わりに：

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

あなたは書くだろう

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

繰り返しますが、これは良い方法です。

重要なもう1つのこと（しゃれはありません）は、!importantの使用を控えるべきであることを指摘することです。一般的に言えば、これは特別なEdgeの場合（印刷など）のために予約する必要があります。これは、スタイルシートの管理が難しくなる可能性があるためです。これが問題となる場所の良い例は、これの境界線を変更したいでしょう：

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

!importantをオーバーライドする唯一の方法は、別の!importantを使用する方法だからです。

あなたの答えの可能な解決策

基本的にクラスのスタイル設定をオーバーライドするmaterial-theme-overrides.scssファイルを用意します。この方法は、デフォルトですべてのクラスをこのように動作させる場合に理想的です。すべての.matボタンに半径を持たせたい場合。マテリアルは、そのための優れたガイドを提供します。 https://material.angular.io/guide/theming

別のオプション::ng-deepを使用すると、スタイルを子コンポーネントに強制できます。詳細については、こちらをご覧ください。

:: ng-deepを使用する方法と場所

2
DonDaniel

サイドナビゲーションコンポーネントを使用して同じ問題に直面していました。

ここで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（）メソッドで多かれ少なかれ同じことができますか？

（記録のために、私の開始side-navタグは次のようになります：<mat-sidenav #snav class="menu-sidenav" mode="over" position="end" opened="false" (open)="onSideNavOpened()">）

1
Romano

cdk-focusedおよび!importantのクラスcssセレクターでこの問題を解決します。

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

最も単純な「無効化」は、コンポーネントに次のCSSオーバーライドを追加することです。

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

怠け者のためのCSSメソッド：

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

!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クラスをオーバーライドします。

0
jcmordan