Horizontaal uitgelijnd

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Voeg de class horizontal-view toe op het horizontaal uit te lijnen element.

Suggesties:

  1. Voor het horizontaal uitlijnen van meerdere objecten binnen een element voeg de class horizontal-view-group. Voor meer informatie zie: Object met horizontaal uitgelijnde componenten

Voorbeelden

Horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-view">
  <button class="ghost">Terug</button>
  <button>Verder</button>
</div>

HTML-structuur-voorbeeld:

<div class="horizontal-view">
  <!-- horizontaal uit te lijnen content -->
</div>

Object met horizontaal uitgelijnde elementen

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-view-group">
  <div>
    <button class="ghost">Terug</button>
    <button>Verder</button>
  </div>

  <div>
    <button class="ghost">Terug</button>
    <button>Verder</button>
  </div>
</div>

HTML-structuur-voorbeeld:

<div class="horizontal-view-group">
  <div>
      <!-- horizontaal uit te lijnen content -->
  </div>

  <div>
     <!-- horizontaal uit te lijnen content -->
  </div>
</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/horizontal-view";

Instelbare variabelen