@ugent-ui/navigation NPM

Navigation

Een horizontale navigatie webcomponent voor UGent webapplicaties

Inleiding

Dit pakket exporteert een webcomponent die kan worden geïntegreerd in UGent webapplicaties om een consistente en toegankelijke navigatie-ervaring te bieden.

Demo

https://ugentui.github.io/navigation

Installatie

npm add @ugent-ui/navigation

!NOTE Zorg steeds dat de UGent UI CSS Reset de eerste stylesheet op je pagina is om te zorgen voor een consistente styling. Voeg het data-color-mode attribute toe aan de HTML tag voor light and dark mode ondersteuning. Instaleer indien nodig:

npm add @ugent-ui/css-reset

Gebruik

<!DOCTYPE html>
<html lang="en" data-color-mode="light">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link
      rel="stylesheet"
      href="node_modules/@ugent-ui/css-reset/dist/assets/reset.css"
    />
    <script
      type="module"
      src="node_modules/@ugent-ui/navigation/dist/assets/navigation.js"
    ></script>
  </head>
  <body>
    <ug-navigation></ug-navigation>
  </body>
</html>

Component tag

Gebruik de volgende tag om de component in je HTML op te nemen:

<ug-navigation></ug-navigation>

Component properties

links: Een array van objecten die elk een link vertegenwoordigen. Elk object moet de volgende eigenschappen bevatten:
- name: De naam van de link die wordt weergegeven.
- url: De URL waarnaar de link verwijst.
- active (optioneel): Een boolean die aangeeft of de link actief is.

<script>
  // Definieer de data die je aan de component wilt doorgeven
  const dataLinks = [
    { name: "Home", url: "#", active: true },
    { name: "Features", url: "#" },
    { name: "Projects", url: "#" },
    { name: "Info", url: "#" },
  ];

  // Verkrijg een referentie naar het custom element met behulp van querySelector
  const ugNavigationElement = document.querySelector("ug-navigation");

  // Stel de eigenschap rechtstreeks in
  ugNavigationElement.links = dataLinks;
</script>

@popperjs/core @ugent-ui/css-reset @ugent-ui/design-tokens bootstrap lit

1.0.0-beta.2

1 year ago

1.0.0-beta.1

1 year ago