Klaro 除了服务选项之外还自定义了图标

Question

我已经在我的 Angular 项目中使用所有必需的配置配置了 klaro cookie 包，但我想更改除了服务计数之外的图标：

当服务部分打开/关闭时，我需要相应的“+”和“-”图标。有没有办法根据需要定制它？

Answer 1

我们可以使用下面的CSS来解决这个问题，基本上我使用伪选择器

:after

将新图标覆盖在现有图标之上。我使用

::ng-deep

以便组件的子级可以看到组件样式！

    ::ng-deep .cm-caret > a[aria-expanded="true"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="true"] > span:after {
      color: var(--green1, #1a936f);
      content: '-';
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span:after {
      color: var(--green1, #1a936f);
      content: '+';
    }

完整代码：

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { klaroConfig } from './klaro-config';
// we can either import Klaro without styles...
import * as Klaro from 'klaro';
// and the manually load the styles (e.g. to bundle them manually)

// we set up Klaro with the config
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
    <br/>
    <a class="button is-success" (click)="show()"
      >Change consent settings</a
    >
  `,
  styles: [
    `
    ::ng-deep .cm-caret > a[aria-expanded="true"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="true"] > span:after {
      color: var(--green1, #1a936f);
      content: '-';
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span:after {
      color: var(--green1, #1a936f);
      content: '+';
    }
    `,
  ],
})
export class App {
  name = 'Angular';
  klaro!: any;

  constructor() {
    (<any>window).klaro = Klaro;
    (<any>window).klaroConfig = klaroConfig;
    Klaro.setup(klaroConfig);
  }

  show() {
    Klaro.show();
  }
}

bootstrapApplication(App);

Stackblitz 演示