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:

Tabelvoorbeeld meldingen:
Table header heading 1 Table header heading 2 Table header heading 3
Foutmelding op tabelrij Foutmelding op tabelrij Foutmelding op tabelrij
Waarschuwing op tabelrij Waarschuwing op tabelrij Waarschuwing op tabelrij
Bevestiging op tabelrij Bevestiging op tabelrij Bevestiging op tabelrij
Toelichting op tabelrij Toelichting op tabelrij Toelichting op tabelrij
Primair op tabelrij Primair op tabelrij Primair op tabelrij

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>

Benodigdheden

  • table/table-base.scss
  • table/table-base-variables.scss
  • notification/notification.scss
  • notification/notification-variables.scss
  • Bijbehorende melding-type-bestanden. Voor meer informatie en beschikbare types zie: Meldingen