Tags kleurenset zes kleuren

Kleurensets voor tags.

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project.
   • Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
   • Voeg de benodigde class toe op de gewenste elementen. Voor meer informatie over het implementeren zie de voorbeelden.

Voorbeelden

Visueel voorbeeld

• Label
• Label
• Label
• Label
• Label
• Label

HTML-voorbeeld

<ul class="tags horizontal-view">
  <li class="tags-color-1">Label</p></li>
  <li class="tags-color-2">Label</p></li>
  <li class="tags-color-3">Label</p></li>
  <li class="tags-color-4">Label</p></li>
  <li class="tags-color-5">Label</p></li>
  <li class="tags-color-6">Label</p></li>
</ul>

Visueel voorbeeld met types

Om de hoogte van alle tags gelijk te houden wordt de class plain toegevoegd. Visueel is er geen omlijning zichtbaar, maar deze wordt wel toegevoegd in de achtergrondkleur van de tag.

• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label
• Label

HTML-voorbeeld

<ul class="tags horizontal-view">
  <li class="tags-color-1 plain">Label</p></li>
  <li class="tags-color-1 solid">Label</p></li>
  <li class="tags-color-1 dashed">Label</p></li>
  <li class="tags-color-1 dotted">Label</p></li>
  <li class="tags-color-2 plain">Label</p></li>
  <li class="tags-color-2 solid">Label</p></li>
  <li class="tags-color-2 dashed">Label</p></li>
  <li class="tags-color-2 dotted">Label</p></li>
  <li class="tags-color-3 plain">Label</p></li>
  <li class="tags-color-3 solid">Label</p></li>
  <li class="tags-color-3 dashed">Label</p></li>
  <li class="tags-color-3 dotted">Label</p></li>
  <li class="tags-color-4 plain">Label</p></li>
  <li class="tags-color-4 solid">Label</p></li>
  <li class="tags-color-4 dashed">Label</p></li>
  <li class="tags-color-4 dotted">Label</p></li>
  <li class="tags-color-5 plain">Label</p></li>
  <li class="tags-color-5 solid">Label</p></li>
  <li class="tags-color-5 dashed">Label</p></li>
  <li class="tags-color-5 dotted">Label</p></li>
  <li class="tags-color-6 plain">Label</p></li>
  <li class="tags-color-6 solid">Label</p></li>
  <li class="tags-color-6 dashed">Label</p></li>
  <li class="tags-color-6 dotted">Label</p></li>
</ul>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Let op: Deze kleurensets horen bij het tags. De tag en tags-bestanden dienen daarom ook ingeladen te zijn binnen het project.

• tag
• tags (Optioneel voor het tonen van meerdere objecten als tags.)

Importeer component via npm

Het voorbeeld maakt gebruik van de kleurenset tag-colors-soft. Dit is optioneel. De variabelen binnen tags-6 kunnen naar keuze met kleuren (hex codes) of variabelen uit kleurensets gevuld worden.

Bij het gebruik van variabelen uit kleurensets dient de kleurenset altijd eerst ingeladen te worden zodat de variabelen uit die set beschikbaar zijn voor het tags-6-bestand. Zie onderstaand voorbeeld voor meer informatie.

CSS-voorbeeld:

/* Color sets */
@use "@minvws/manon/tag-colors-soft";

/* Tags */
@use "@minvws/manon/tag";
@use "@minvws/manon/tags";
@use "@minvws/manon/tags-6";

Instelbare variabelen