Terug naar hoofdmenu knop

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
  3. Voeg de knop aan het einde van de <main> toe.
  4. 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

Terug naar het hoofdmenu
--> 
<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: ;
}
Terug naar het hoofdmenu