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 extensies binnen het Widget-platform. Gebruik deze documentatie om de extensie(s) 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 bevindt zich nog in beta-fase en wordt dus nog verder ontwikkeld

Types

...

weergaven

U krijgt de keuze uit 3 types extensies.

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 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:

...