我可以将默认输入颜色选择器类型设置为检查网格/透明吗？

Posted 2023-03-13

【中文标题】我可以将默认输入颜色选择器类型设置为检查网格/透明吗？

【英文标题】：Can I make the default input color picker type to checker grid/transparent?

【发布时间】：2022-01-05 05:38:29

【问题描述】：

我正在使用Angular 的ngx-color 插件。所以我的目标是在没有选择颜色的情况下使颜色选择器看起来像下面的选择器（检查器网格）。意味着默认情况下这是我想向用户展示的内容。有可能吗？

我的代码

<input class="color-input" [(colorPicker)]="selectedColor"
       [style.background]="selectedColor" (cpSliderDragEnd)="changeColor()">

【参考方案1】：

您可以使用ngClass 为您的组件使用条件类。 当您没有 selectedColor 时，您设置一个类，该类将具有您需要实现的配置，看起来像您的示例。

示例： html:

<input class="color-input" [ngClass]=" 'no-color': selectedColor == null " [(colorPicker)]="selectedColor"
       [style.background]="selectedColor" (cpSliderDragEnd)="changeColor()">

CSS：

.no-color 
   background: white;
   background-image: 'path-to-image';
.
.
.