更改清晰度切换开关的颜色

时间:2019-03-14 07:21:19

标签: css angular clarity

我有一个以.Net为核心的Angular项目,并且我也在使用Clarity,我想知道是否有办法更改Clarity拨动开关的颜色?

我到目前为止尝试过的无效代码:

 <input type="checkbox" formControlName="validateAll" Color="red" clrToggle />

 <input type="checkbox" formControlName="validateAll" style="background-color:red"  clrToggle />

<input type="checkbox" formControlName="validateAll" style="color:red"  clrToggle />

1 个答案:

答案 0 :(得分:1)

向包装的div中添加一个自定义类,按照documentation

中所述将样式更改为输入

使用import java.util.Map; import java.util.concurrent.*; import java.util.concurrent.atomic.AtomicBoolean; import java.util.function.BiFunction; public class TaskProcessor implements ITaskProcessor { //This map will contain all the tasks which are in queue and not yet completed //If there is scenario where there may be multiple tasks corresponding to same uniqueIdentifier, in that case below map can be modified accordingly to have the list of corresponding tasks which are not completed yet private final Map<String, Task> taskInProgresssByUniqueIdentifierMap = new ConcurrentHashMap<>(); private final int QUEUE_SIZE = 100; private final BlockingQueue<Task> taskQueue = new ArrayBlockingQueue<Task>(QUEUE_SIZE); private final TaskRunner taskRunner = new TaskRunner(); private Executor executor; private AtomicBoolean isStarted; private final DBManager dbManager = new DBManager(); @Override public void start() { executor = Executors.newCachedThreadPool(); while(isStarted.get()) { try { Task task = taskQueue.take(); executeTaskInSeperateThread(task); } catch (InterruptedException e) { e.printStackTrace(); } } } private void executeTaskInSeperateThread(Task task) { executor.execute(() -> { taskRunner.execute(task, new ITaskProgressListener() { @Override public void onTaskCompletion(TaskResult taskResult) { task.setCompleted(true); //TODO: we can also propagate the taskResult to waiting users, Implement it if it is required. notifyAllWaitingUsers(task); } @Override public void onTaskFailure(Exception e) { notifyAllWaitingUsers(task); } }); }); } private void notifyAllWaitingUsers(Task task) { taskInProgresssByUniqueIdentifierMap.computeIfPresent(task.getUniqueIdentifier(), new BiFunction<String, Task, Task>() { @Override public Task apply(String s, Task task) { synchronized (task) { task.notifyAll(); } return null; } }); } //User thread @Override public ITaskResult getTaskResult(String uniqueIdentifier) { TaskResult result = null; Task task = taskInProgresssByUniqueIdentifierMap.computeIfPresent(uniqueIdentifier, new BiFunction<String, Task, Task>() { @Override public Task apply(String s, Task task) { synchronized (task) { try { // task.wait(); } catch (InterruptedException e) { e.printStackTrace(); } } return task; } }); //If task is null, it means the task was not there in queue, so we direcltly query the db for the task result if(task != null && !task.isCompleted()) { return null; // Handle this condition gracefully, If task is not completed, it means there was some exception } ITaskResult taskResult = getResultFromDB(uniqueIdentifier); // At this point the result must be already saved in DB if the corresponding task has been processed ever. return taskResult; } private ITaskResult getResultFromDB(String uniqueIdentifier) { return dbManager.getTaskResult(uniqueIdentifier); } //Other thread @Override public void enqueueTask(Task task) { if(isStarted.get()) { taskInProgresssByUniqueIdentifierMap.putIfAbsent(task.getUniqueIdentifier(), task); taskQueue.offer(task); } } @Override public void stop() { isStarted.compareAndSet(true, false); } } 标签上的::before::after创建拨动开关。因此,如果您为div label命名包装类,则CSS应该如下所示:

custom-styles

并选中

.custom-styles input[type=checkbox]+label::before {
  border-color: blue;
  background-color: blue;   
}