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

问题描述

我有一组切换按钮.它们非常轻，并且在亮度级别较差的显示器上消失在背景中.

我怎样才能正确地设计它们?我更愿意为它们分配 accent 或 primary 颜色，就像您可以为常规按钮做的那样.

在可能的情况下，主色和强调色是深色的.所以他们的文字应该变成白色(有一些透明度).对于普通按钮，它会自动工作.

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

解决方案

matButtonToggle 不支持像 matButton 这样的 color 属性.

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

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

这是一个带有 mat-button-toggle-group 示例的 Stackblitz:Stackblitz角-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, 口音);.mat-button-toggle {背景色:垫色($primary)；颜色:垫色($primary，默认对比度)；}.mat-button-toggle-checked {背景色:垫色($accent)；颜色:垫色($accent，默认对比度)；}}//包含mixin@include mix-app-theme($app-theme);

文档:主题化你的 Angular Material 应用

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

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 does not support the color property like matButton.

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.

Here is a Stackblitz with your mat-button-toggle-group example: Stackblitz angular-t1k1x6

Theming used:

@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);

Documents: Theming your Angular Material app

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