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 gewenste velden toe. Zie onderstaand voorbeeld voor meer informatie. Alle binnen html beschikbare formulier-elementen kunnen gebruikt worden. Voor een overzicht van beschikbare voorbeelden binnen Manon zie formulierelementen.
  3. Groepeer bij elkaar horende elementen in een div. Bijvoorbeeld een label en een input.

Voorbeelden

Het basisvoorbeeld met een invoerveld en een verzendknop.

Basis

Voorbeeld

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post" class="horizontal-view">
<div>
<label for="form-example-1">Voorbeeld text input</label>
<input id="form-example-1" name="form-example-1" type="text">
</div>
<button type="submit">Verzend</button>
</form>

fieldset

Aandachtspunten:

  • Een fieldset is een groep met bij elkaar horende formuliervragen. Groepeer deze vragen binnen een fieldset met in de legend een omschrijvende naam.
  • Fieldsets kunnen geen gebruik maken van flex-box. Hierdoor hebben fieldset andere styling nodig dan de overige elementen. Voeg het .scss bestand: form-horizontal-view-fieldset.scss toe aan het project om gebruik te maken van fieldsets en een horizontaal weergegeven formulier.
  • Voeg optioneel het bestand:form-horizontal-view-fieldset-variables.scss toe om de uitlijning van de labels ten opzichte van de velden aan te passen.

Visueel voorbeeld:

Fieldset test

HTML-voorbeeld:

<form action="" method="post" class="horizontal-view">
<fieldset>
<legend>Fieldset test</legend>
<div>
  <label for="form-example-2">Voorbeeld text input</label>
  <input id="form-example-2" name="form-example-2" type="text">
</div>
</fieldset>
<button type="submit">Verzend</button>
</form>

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/form-base";
@use "@minvws/manon/form-horizontal-view";

/* Optional */
@use "@minvws/manon/form-horizontal-view-fieldset";
Optioneel:
@use "@minvws/manon/form-horizontal-view-fieldset";

Instelbare variabelen

Bijbehorende elementen: