Tags

De mogelijkheid om onderliggende elementen visueel als tags weer te geven.

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.
   • Voor horizontale weergave voeg de class horizontal-view toe.
   • Vul de gewenste variabelen in om de uitlijning van horizontaal uitgelijnde tags in te stellen. Voor meer informatie zien: variabelen

Voorbeelden

Tags binnen een lijst

Visueel voorbeeld:

• Lorem ipsum
• Lorem ipsum
• Lorem ipsum

HTML-Voorbeeld:

<ul class="tags horizontal-view">
  <li class="tags-color-1-light">Lorem ipsum</li>
  <li class="tags-color-2-light">Lorem ipsum</li>
  <li class="tags-color-3-light">Lorem ipsum</li>
</ul>

Tags binnen een div

Visueel voorbeeld:

HTML-Voorbeeld:

<div class="tags horizontal-view">
  <p class="tags-color-1-light">Lorem ipsum</p>
  <p class="tags-color-2-light">Lorem ipsum</p>
  <p class="tags-color-3-light">Lorem ipsum</p>
</div>

Tags binnen een section

Visueel voorbeeld:

HTML-Voorbeeld:

<section class="tags horizontal-view">
  <p class="tags-color-1-light">Lorem ipsum</p>
  <p class="tags-color-2-light">Lorem ipsum</p>
  <p class="tags-color-3-light">Lorem ipsum</p>
</section>

Tags op tabel

Tabel-elementen visueel weergegeven als tag. Voor het direct aanspreken van een enkel element zie: tags.

Visueel voorbeeld:

HTML-Voorbeeld:

<div class="horizontal-scroll">
  <table class="tags">
    <caption>Voorbeeld tag binnen tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Licht</th>
        <th scope="col">Medium</th>
        <th scope="col">Donker</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><p class="tags-color-1-light">Label</p></td>
        <td><p class="tags-color-1-medium">Label</p></td>
        <td><p class="tags-color-1-dark">Label</p></td>
      </tr>
    </tbody>
  </table>
</div>

Tags binnen een tabel

Tabel-elementen visueel weergegeven als tag. Voor het direct aanspreken van een enkel element zie: tags.

Visueel voorbeeld:

HTML-Voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Voorbeeld tag binnen tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Licht</th>
        <th scope="col">Medium</th>
        <th scope="col">Donker</th>
      </tr>
    </thead>
    <tbody class="tags">
      <tr>
        <td><p class="tags-color-1-light">Label</p></td>
        <td><p class="tags-color-1-medium">Label</p></td>
        <td><p class="tags-color-1-dark">Label</p></td>
      </tr>
    </tbody>
  </table>
</div>

Bijbehorende bestanden

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

Importeer component via npm

Let op: Tags maakt gebruik van de volgende componenten die ingeladen dienen te zijn voor het tags-component.

• tag

CSS-voorbeeld:

@use "@minvws/manon/tag";
@use "@minvws/manon/tags";

Instelbare variabelen

Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in combinatie met de class horizontal-view.