clr-checkbox 不同颜色的动态复选框集 AngularJs

Question

我遵循 https://vmware.github.io/clarity/documentation/v0.13/checkboxes 并且需要在选中复选框时使用不同的颜色。

代码HTML:

<div class="form-group">
  <label>With a list of objects</label>
  <clr-checkbox *ngFor="let item of items$"
                    [(clrChecked)]="item.running"
                    [clrDisabled]="item.disabled">
                    {{ item.name }}
                </clr-checkbox>

</div>

代码控制器：

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

@Component({
  selector: 'app-checkboxgroup',
  templateUrl: './checkboxgroup.component.html',
  styleUrls: ['./checkboxgroup.component.scss']
})
export class CheckboxgroupComponent implements OnInit {

  items$: Object;
  constructor() { }

  ngOnInit() {
    this.items$ = [{id:1,name:'Custom',color:'cyan'},
  {id:2,name:'Primary',color:'green',running:false,disabled:false},
{id:3,name:'Info',color:'blue',running:false,disabled:false},
{id:4,name:'Warning',color:'yellow',running:false,disabled:false},
{id:5,name:'Danger',color:'red',running:false,disabled:false}];
  }

}

Answer 1

您可以借助 CSS 中的 currentColor 关键字和对默认 Clarity 复选框模板稍作更改来实现。模板如下所示：

<clr-checkbox *ngFor="let item of items$" [style.color]="item.color" [(clrChecked)]="item.running" [clrDisabled]="item.disabled">
        <span class="checkbox-label">{{ item.name }}</span>
</clr-checkbox>

然后在您的组件 CSS 中应用以下 CSS。

.checkbox-label {
   color: #000;
}

clr-checkbox ::ng-deep input[type=checkbox]:checked+label::before {
   background-color: currentColor;
}

您可以看到我在 clr-checkbox 的颜色属性上使用了样式绑定。因此，选中复选框的颜色将通过 currentColor.

继承该颜色

顺便说一句，如果您在全局样式文件中添加上述 CSS 片段而不是组件样式，则不需要 ::ng-deep.

这是工作示例：

https://stackblitz.com/edit/clr-checkbox-checkbox-multi-color

clr-checkbox 不同颜色的动态复选框集 AngularJs

clr-checkbox dynamic set of checkboxes with different colors AngularJs

angularjs

vmware-clarity