Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel7

Over deze documentatie

Deze technische documentatie is bestemd voor de afnemers van de global header extensie “e-loket” binnen het Widget-platform. Gebruik deze documentatie om deze extensie te implementeren in de global header plugin.

Info

Disclaimer:

  • Deze pagina’s worden regelmatig aangepast zodat ze altijd de meeste recente informatie bevatten. Aarzel niet om feedback te geven mochten er aanpassingen nodig zijn.

  • De global header Deze extensie bevindt zich nog in beta-fase en wordt dus nog verder ontwikkeld .

Elementen

U krijgt de keuze uit 3 elementen om toe te voegen aan de global header.

Titelbar

Enkel de titelbar van de extensie wordt getoond.

Iframe
scrollingyes
srchttps://codepen.io/m44rten/embed/OJvmMJR?default-tab=html%2Cresult&theme-id=light
width100%
frameborderhide
height400px

Broodkruimel

De titelbar en de bar met de broodkruimel(s) worden getoond.

Iframe
srchttps://codepen.io/m44rten/embed/jOzaxMO?default-tab=html%2Cresult&theme-id=light
width100%
frameborderhide
height400px

Navigatie

De titelbar en de bar met navigatie-items worden getoond.

Iframe
srchttps://codepen.io/m44rten/embed/RwMjyGB?default-tab=html%2Cresult&theme-id=light
width100%
frameborderhide
height400px

API

Initieel wordt de header mee ingesteld via de standaardconfiguratie. Op die manier kan de global header extensie gebruikt worden zonder API.

...

  • Om de titel aan te passen: setTitle(title: String): this;.

  • Om het ‘navigationItems’ type te gebruiken en het actieve navigatie-item aan te geven. Dit zorgt ervoor dat de styling up-to-date is: setActiveNavigationItemIndex(activeNavigationItemIndex: number): this;.

  • Om de broodkruimel-items of navigatie-items te gebruiken: setItems(items: Link[]): this;. Hier wordt een object in deze vorm verwacht: { label: String, href: String }.

Link redirect

Wanneer er op één van de broodkruimel-items of navigatie-items wordt geklikt, gebeurt er een redirect naar de link die als href is meegegeven aan dat item.

Gebruik van de API

Om de global header extensie e-loket API te kunnen gebruiken is een referentie naar de global header widget nodig. Die referentie is te vinden via de @govflanders/vl-widget-client-bibliotheek.

Info

Zie ook: Technische documentatie Widget-platform

Codevoorbeeld

Dit is een codevoorbeeld van het gebruik van de API om bepaalde acties uit te voeren:

...