horizontal-scroll

Introductie

Voor componenten die breder zijn dan het scherm maar wel horizontaal weergegeven dienen te worden.

Snelstart

SCSS importeren:

    
      
    
    @use "@minvws/manon/components/horizontal-scroll";

// Optioneel: voor het voorkomen van tekstomloop
@use "@minvws/manon/components/nowrap";
  

Voeg de class horizontal-scroll toe om het element over de horizontale as te laten scrollen als de content niet meer binnen de breedte van het scherm past.

Voorbeelden

Voorbeeld: Tabeltitel op een regel

    
      
    
    <div class="horizontal-scroll">
  <table>
    <caption>
      Basisvoorbeeld tabel:
    </caption>
    <thead class="nowrap">
      <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>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
    </tbody>
  </table>
</div>
  

Tip: Om te voorkomen dat de tabeltitels op meerdere regels getoond kan de class nowrap toegevoegd worden aan de <thead>.

Voorbeeld: Tabeltitel en content op een regel

    
      
    
    <div class="horizontal-scroll nowrap">
  <table>
    <caption>
      Basisvoorbeeld tabel:
    </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>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
        <td>Dolor sit</td>
      </tr>
    </tbody>
  </table>
</div>
  

Tip: Om te voorkomen dat de tabeltitels op meerdere regels getoond kan de class nowrap toegevoegd worden aan de <thead>.