Opgelet! We hebben een nieuwe documentatiesite en dit artikel is herschreven.

Bekijk de laatste versie van dit artikel →

De kleurenfilter van de javascript implementatie ondersteunt standaard de volgende basiskleuren: blauw, bruin, geel, oranje, grijs, groen, paars, rood, roze, wit en zwart.

Het is mogelijk om extra kleuren toe te voegen aan de Javascript implementatie. Dit kan via de volgende stappen:

1. Voeg het kleuren script toe:

var customColors = {
  kleurnaam: "waarde"};
(function (d, c) {
  var s = d.createElement("style");
  s.type = "text/css";
  Object.keys(c).forEach(function(n) {
    s.innerHTML += `.twn-facet-collection__glyph.is-${n} { background-color: ${c[n]}; }`;
  });
  d.head.appendChild(s);
})(document, customColors);

2. Breid het customColors object in het script uit met de gewenste kleuren:

Het object customColors bevat de namen van de gewenste kleuren en de bijbehorende waardes. De naam moet hierbij gelijk zijn aan de naam van de optie in de filter.

Verschillende formaten worden als kleurwaarde ondersteund. Het is mogelijk om bijvoorbeeld een hexadecimale of rgb notatie te gebruiken.

Een voorbeeld van dit object zou er als volgt uit kunnen zien:

var customColors = {
  goud: "#FFD700", // Hexadecimale notatie  zilver: "#C0C0C0",
  brons: "rgb(205, 127, 50)", // Rgb notatie};