web-dev-qa-db-ja.com

トグルボタンの色を設定する方法

トグルボタンのグループがあります。これらは非常に明るく、高輝度レベルの貧弱なモニターではバックグラウンドで消えます。

enter image description here

どうすればそれらを適切にスタイルできますか？私は彼らにaccentまたはprimary色を割り当てたい通常のボタンに対して行うことができます。

場合によっては、原色とアクセントの色は暗いです。したがって、テキストは白になります（ある程度透明になります）。通常のボタンの場合、自動的に機能します。

<div class="output-size">
  <mat-button-toggle-group>
    <mat-button-toggle value="letter">Letter</mat-button-toggle>
    <mat-button-toggle value="legal">Legal</mat-button-toggle>
    <mat-button-toggle value="a4">A4</mat-button-toggle>
    <mat-button-toggle value="a5">A5</mat-button-toggle>
  </mat-button-toggle-group>
</div>
angularangular-materialangular5
18
Codo

matButtonToggleは、colorのようなmatButtonプロパティをサポートしていません。

CSSクラスを使用できます.mat-button-toggleおよび.mat-button-toggle-checkedさまざまな状態をスタイルします。

マテリアルテーマを使用すると、テーマから必要な個別のパレットを抽出し、背景のデフォルトのコントラスト色をテキストの色に適用して、明るい色または暗い色との最適なコントラストを実現できます。

これは、Stackblitzとmat-button-toggle-group例： Stackblitz angular-t1k1x6

使用されるテーマ：

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-Indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }

  .mat-button-toggle-checked {
    background-color: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

ドキュメント： テーマAngular Material app

44
Sashel Niles Gruber

他の答えが示すように、独自のテーマSASSを使用してプレゼンテーションをカスタマイズすることは、優れた短期的なソリューションであり、プレゼンテーションに対する強力な機能を提供します。理想的には、これはコアテーマ宣言の一部になるため、<mat-button-toggle-group color="primary">（おそらく<mat-button-toggle color="primary">）追加のステップなしで機能します。

将来これをより簡単にしたい場合は、 この問題 に賛成をお願いします。

3
Coderer
mat-button-toggle-group {
  box-shadow: none;
}

mat-button-toggle {
    border: 1px rgba(0,0,0,0) solid !important;
    margin-top: 5px !important;
    padding: 0 5px !important;
    z-index: 3 !important;
}

mat-button-toggle:hover {
    border: 1px #000 solid !important;
    background-color: #FFF !important;
    border-radius: 5px !important;
}

.mat-button-toggle-checked {
          box-shadow: 0 0 30px #000 !important;
    border: 1px #000 solid !important;
    border-radius: 5px !important;
    background-color: #FFF !important;
}

.mat-button-toggle-input {
    background-color: none !important;
    padding-left: 32px !important;
}

チェックされたスタイルのみを変更したい場合

0
juliana fernandez

回避策は次のようなものです。

<mat-button-toggle-group>
  <mat-button-toggle value="letter">
    <button mat-button color="primary" style="pointer-events:none;">
      Letter
    </button>
  </mat-button-toggle>
  <mat-button-toggle value="legal">
    <button mat-button color="accent" style="pointer-events:none;">
      Legal
    </button>
  </mat-button-toggle>
</mat-button-toggle-group>
0
Sergiu Starciuc