@ugent-ui/navigation
v1.0.0-beta.2
Published
Horizontale navigatie webcomponent voor UGent webapplicaties
Downloads
6
Readme
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-modeattribute toe aan de HTML tag voorlightanddarkmode ondersteuning. Instaleer indien nodig:
npm add @ugent-ui/css-resetGebruik
<!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>