Terug naar hoofdmenu knop

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 knop aan het einde van de <main> toe.
Voeg de link naar de hoofdnavigatie toe.
- Voeg aan de hoofdnavigatie een id toe. Bijvoorbeeld: "main-content".
- Voeg binnen de link de corresponderende verwijzing toe. Zie het HTML-voorbeeld voor meer informatie.

Voorbeelden:

Visueel voorbeeld:

Zie de knop rechtsonder in beeld voor het visuele voorbeeld.

HTML-voorbeeld:

To-top link

<a href="#main-content" class="button to-top icon icon-ascending" title="Terug naar het hoofdmenu">Terug naar het hoofdmenu</a>

Structuur

<main id="main-content">
  <!-- content within the main component -->
  <a href="#main-content" class="button to-top icon icon-ascending" title="Terug naar het hoofdmenu">Terug naar het hoofdmenu</a>
</main>

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/button-to-top";

Instelbare variabelen

Beschikbare instelbare variabelen:
Variabele	CSS-attribuut	Manon ingestelde waarde	Breekpunt	Class
--button-to-top-position	position	fixed	-	to-top
--button-to-top-background-color	background-color	var(--application-base-accent-color)	-
--button-to-top-text-color	color	var(--application-base-accent-color-text-color)	-
--button-to-top-bottom	bottom	1rem	-
--button-to-top-right	right	1rem	-
--button-to-top-left	left	auto	-
--button-to-top-font-size	font-size	0	-
--button-to-top-width	width	2.75rem	-
--button-to-top-height	height	2.75rem	-
--button-to-top-min-height	min-height	var(--button-to-top-width)	-
--button-to-top-min-width	min-width	var(--button-to-top-height)	-
--button-to-top-border-radius	border-radius	50%	-
--button-to-top-border-width	border-width	0	-
--button-to-top-border-style	border-style	solid	-
--button-to-top-border-color	border-color	transparent	-
--button-to-top-hover-background-color	background-color	var(--application-base-accent-color-hover)	-
--button-to-top-hover-text-color	text-color	var(--application-base-accent-color-hover-text-color)	-
--button-to-top-hover-border-color	text-border-color	transparent	-

CSS

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

:root {
  --button-to-top-position: ;
  --button-to-top-background-color: ;
  --button-to-top-text-color: ;
  --button-to-top-bottom: ;
  --button-to-top-right: ;
  --button-to-top-left: ;
  --button-to-top-font-size: ;
  --button-to-top-width: ;
  --button-to-top-height: ;
  --button-to-top-min-width: ;
  --button-to-top-min-height: ;
  --button-to-top-border-radius: ;
  --button-to-top-border-width: ;
  --button-to-top-border-style: ;
  --button-to-top-border-color: ;

  /* Hover */
  --button-to-top-hover-background-color: ;
  --button-to-top-hover-text-color: ;
  --button-to-top-hover-border-color: ;
}