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

如何设置“未选中”幻灯片切换组件的颜色？

1 个答案: