Tag
Visuele labels om bijvoorbeeld groeperingen aan te brengen binnen content en data-sets.
Benodigde stappen:
- 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
p als tag
Visueel voorbeeld:
HTML-Voorbeeld:
<p class="tag tags-color-1">Lorem ipsum</p>span als tag
Visueel voorbeeld:
HTML-Voorbeeld:
<span class="tag tags-color-1">Lorem ipsum</span>li als tag
Lijst-element visueel weergegeven als tag. Voor het direct aanspreken van alle lijstelementen zie: tags.
Visueel voorbeeld:
HTML-Voorbeeld:
<ul>
<li class="tag tags-color-1">Lorem ipsum</li>
</ul>Tags binnen een tabel
Tabel-elementen visueel weergegeven als tag. Voor het direct aanspreken van alle tabelelementen zie: tags.
Visueel voorbeeld:
| Licht | Medium | Donker |
|---|---|---|
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>
<tr>
<td><p class="tag tags-color-1-light">Label</p></td>
<td><p class="tag tags-color-1-medium">Label</p></td>
<td><p class="tag tags-color-1-dark">Label</p></td>
</tr>
</tbody>
</table>
</div>Tag styles
Gebruik van verschillende border-styles.
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.
Visueel voorbeeld:
HTML-Voorbeeld:
<p class="tag tags-color-1 plain">Lorem ipsum</p>Visueel voorbeeld:
HTML-Voorbeeld:
<p class="tag tags-color-1 solid">Lorem ipsum</p>Visueel voorbeeld:
HTML-Voorbeeld:
<p class="tag tags-color-1 dotted">Lorem ipsum</p>Visueel voorbeeld:
HTML-Voorbeeld:
<p class="tag tags-color-1 dashed">Lorem ipsum</p>Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Importeer component via npm
CSS-voorbeeld:
@use "@minvws/manon/tag";Kleurensets
De bruikbare kleuren voor de tags worden toegevoegd via kleurensets. Beschikbare sets zijn:
Instelbare variabelen
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --tag-font-size | font-size | var(--application-base-font-size) | - | - |
| --tag-font-weight | font-weight | bold | - | - |
| --tag-line-height | line-height | var(--application-base-line-height) | - | - |
| --tag-padding | padding | 0.25rem 0.5rem | - | - |
| --tag-border-radius | border-radius | 0.25rem | - | - |
| --tag-border-width | border-width | 1px | - | - |