clr-复选框动态复选框集与不同颜色的 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