如何设置“未选中”滑动切换组件的颜色？

Question

我可以设置“未选中”滑动切换组件的颜色吗？ 文档仅指定如何设置“选中”一项。

在 Slide-toggle-configurable-example.html 模板中：

<md-slide-toggle
      class="example-margin"
      [color]="color">
    Slide me!
</md-slide-toggle>

在 *.ts 文件中：

import {Component} from '@angular/core';

@Component({
  selector: 'slide-toggle-configurable-example',
  templateUrl: 'slide-toggle-configurable-example.html',
  styleUrls: ['slide-toggle-configurable-example.css'],
})
export class SlideToggleConfigurableExample {
  color = 'accent';
  checked = false;
}

当滑动切换“未选中”时，我真的很想有一些特定的颜色。可以吗？

Answer 1

为未选中状态设置颜色的唯一可能方法是使用以下规则通过 CSS 设置它：

对于切换栏使用：

md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: red; /* set your color here */
}

您还可以根据类型设置不同的颜色：

md-slide-toggle.mat-primary:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: pink;
}

md-slide-toggle.mat-accent:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: yellow;
}

要设置拇指的颜色，请使用：

md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: green;
}

Answer 2

要设置 mat-slide-toggle 的颜色，您必须将此代码放入 style.scss 文件中

.mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after { background: #F4760B !important; }

.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track::after { background: #F4760B !important; }