Notificatie binnen tabellen

Introductie

Voor het weergeven van notificaties binnen tabellen.

Snelstart

SCSS importeren:

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

Voorbeelden

    
      
    
    <div class="horizontal-scroll">
  <table>
    <caption>
      Voorbeeldtabel met medische middelen:
    </caption>
    <thead>
      <tr>
        <th scope="col">Middel</th>
        <th scope="col">Voorraad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alcohol wipes</td>
        <td class="warning">
          <div>
            <span class="notification-type">
              <span class="icon icon-warning" aria-hidden="true"></span>
              Waarschuwing:
            </span>
            Onvoldoende op vooraad
          </div>
        </td>
      </tr>
      <tr>
        <td>Steriele gaasjes</td>
        <td class="error">
          <div>
            <span class="notification-type">
              <span class="icon icon-error" aria-hidden="true"></span>
              Foutmelding:
            </span>
            Momenteel niet beschikbaar
          </div>
        </td>
      </tr>
      <tr>
        <td>Chirurgisch mondmaskers</td>
        <td class="explanation">
          <div>
            <span class="notification-type">
              <span class="icon icon-informative" aria-hidden="true"></span>
              Toelichting:
            </span>
            Let op er zijn verschillende types op voorraad
          </div>
        </td>
      </tr>
      <tr>
        <td>Zoutoplossing (fysiologisch serum)</td>
        <td class="confirmation">
          <div>
            <span class="notification-type">
              <span class="icon icon-confirmation" aria-hidden="true"></span>
              Bevestiging:
            </span>
            Voldoende op voorraad
          </div>
        </td>
      </tr>
      <tr>
        <td>Wegwerphandschoenen</td>
        <td class="system">
          <div>
            <span class="notification-type">
              <span class="icon icon-informative" aria-hidden="true"></span>
              Systeembericht:
            </span>
            Momenteel geen status beschikbaar
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
  

Aandachtspunten

De div binnen de tabelcellen maakt het uitlijnen van de tekst met het icoon mogelijk.