如何设置切换按钮的颜色 [英] How to set color of toggle buttons

问题描述

我有一组切换按钮.它们非常亮，在背景亮度不高的监视器上会消失在背景中.

I have group of toggle buttons. They are very light and disappear in the background on poor monitors with a high brightness level.

如何正确设置样式?我希望为它们分配 accent 或 primary 颜色，这是常规按钮的使用方式.

How can I properly style them? I would prefer to assign them the accent or primary colors, the way you can do it for regular buttons.

在某些情况下，原色和强调色是深色的.因此，它们的文字应变为白色(具有一定的透明度).对于常规按钮，它会自动工作.

In may case, the primary and accent colors are dark. So they text should become white (with some transparency). For regular buttons, it automatically works.

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

推荐答案

matButtonToggle不支持color属性，例如matButton.

您可以使用css类.mat-button-toggle和.mat-button-toggle-checked设置不同状态的样式.

You can use the css classes .mat-button-toggle and .mat-button-toggle-checked to style the different states.

通过材质主题设置，您可以从主题中提取所需的任何单个调色板，并将背景默认对比度颜色应用于文本颜色，从而获得浅色或深色的最佳对比度.

With material theming you can extract whichever individual palettes you need from the theme and apply the backgrounds default-contrast color to the text color to achieve optimal contrast with light or dark colors.

这是您的mat-button-toggle-group示例的 Stackblitz : Stackblitz angular-t1k1x6

Here is a Stackblitz with your mat-button-toggle-group example: 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应用设置主题

这篇关于如何设置切换按钮的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！