Layout form

Weergave opties voor pagina's met als formulieren als hoofdfunctie.

Het is ook mogelijk om de weergave van alle formulieren aan te passen. Gebruik daarvoor: Basis formulieren.

Benodigde stappen:

Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
Voeg de class de-emphasized toe aan de gewenste elementen. Voor meer informatie zie: Voorbeelden.

Voorbeelden:

Div

HTML-voorbeeld:

`div`:

-->

<div class="layout-form">
  <!-- Content -->
</div>

`section`:

-->

<section class="layout-form">
  <div>
    <!-- Content -->
  </div>
</section>

`article`:

-->

<article class="layout-form">
  <div>
    <!-- Content -->
  </div>
</article>

`form`:

-->

<form class="layout-form">
  <!-- Content -->
</form>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Aandachtspunten:

De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie.

Importeer component via NPM

CSS-voorbeeld:

@use "@minvws/manon/layout-form";

Instelbare variabelen

Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in combinatie met de class horizotal-view.

Beschikbare instelbare variabelen:
Variabele	CSS-attribuut	Manon ingestelde waarde	Breekpunt	Class
--layout-form-padding	padding	var(--content-padding-top, 0)	-	layout-form
--layout-form-padding-right	padding-right	var(--content-padding-right, 0)
--layout-form-padding-bottom	padding-bottom	var(--content-padding-bottom, 0)
--layout-form-padding-left	padding-left	var(--content-padding-left, 0)
--layout-form-max-width	max-width	50rem
--layout-form-breakpoint-1-padding	padding	var(--layout-form-padding-top)	24rem
--layout-form-breakpoint-1-padding-right	padding-right	var(--layout-form-padding-right)
--layout-form-breakpoint-1-padding-bottom	padding-bottom	var(--layout-form-padding-bottom)
--layout-form-breakpoint-1-padding-left	padding-left	var(--layout-form-padding-left)
--layout-form-breakpoint-1-max-width	max-width	var(--layout-form-max-width)
--layout-form-breakpoint-2-padding-top	padding-top	var(--layout-form-breakpoint-1-padding-top)	42rem
--layout-form-breakpoint-2-padding-right	padding-right	var(--layout-form-breakpoint-1-padding-right)
--layout-form-breakpoint-2-padding-bottom	padding-bottom	var(--layout-form-breakpoint-1-padding-bottom)
--layout-form-breakpoint-2-padding-left	padding-left	var(--layout-form-breakpoint-1-padding-left)
--layout-form-breakpoint-2-max-width	max-width	var(--layout-form-breakpoint-1-max-width)

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
    --layout-form-padding-top: ;
    --layout-form-padding-right: ;
    --layout-form-padding-bottom: ;
    --layout-form-padding-left: ;
    --layout-form-max-width: ;

    /* After breakpoint 1 */
    --layout-form-breakpoint-1-padding-top: ;
    --layout-form-breakpoint-1-padding-right: ;
    --layout-form-breakpoint-1-padding-bottom: ;
    --layout-form-breakpoint-1-padding-left: ;
    --layout-form-breakpoint-1-max-width: ;

    /* After breakpoint 2 */
    --layout-form-breakpoint-2-padding-top: ;
    --layout-form-breakpoint-2-padding-right: ;
    --layout-form-breakpoint-2-padding-bottom: ;
    --layout-form-breakpoint-2-padding-left: ;
    --layout-form-breakpoint-2-max-width: ;
}