Meldingen op tabel-elementen

Tabelelementen kunnen een meldig weergeven. Denk hierbij aan een foutmelding of een toelichting.

Benodigde stappen:

1. Voeg de checkbox toe aan de benodigde cellen. Voor het voorbeeld zie: Voorbeelden

Aandachtspunten

• Voeg een van de melding-classes toe aan een volledige tabelrij tr of aan een losse cel th / td. Beschikbare classes zijn:
  • error
  • warning
  • confirmation
  • explanation
  • primary
  Zie Notifications voor meer informatie.

Voorbeelden

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld meldingen:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="error">Foutmelding op tabelrij</td>
        <td class="error">Foutmelding op tabelrij</td>
        <td class="error">Foutmelding op tabelrij</td>
      </tr>
      <tr>
        <td class="warning">Waarschuwing op tabelrij</td>
        <td class="warning">Waarschuwing op tabelrij</td>
        <td class="warning">Waarschuwing op tabelrij</td>
      </tr>
      <tr>
        <td class="confirmation">Bevestiging op tabelrij</td>
        <td class="confirmation">Bevestiging op tabelrij</td>
        <td class="confirmation">Bevestiging op tabelrij</td>
      </tr>
      <tr>
        <td class="explanation">Toelichting op tabelrij</td>
        <td class="explanation">Toelichting op tabelrij</td>
        <td class="explanation">Toelichting op tabelrij</td>
      </tr>
      <tr>
        <td class="primary">Primair op tabelrij</td>
        <td class="primary">Primair op tabelrij</td>
        <td class="primary">Primair op tabelrij</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

CSS-voorbeeld:

@use "@minvws/manon/table";
@use "@minvws/manon/notification";

Bijbehorende melding-type-bestanden. Voor meer informatie en beschikbare types zie: Notificaties

Gerelateerde pagina's