IT Lab App Header

Diese Library funktioniert nur mit Vue v3

Um diese Library zu verwenden, wird zusätzlich das IT Lab Theme System empfohlen, um die benötigten CSS Variablen für die Farbgebung automatisch zu setzen

Navigationsleiste der einzelnen Unterseite

Installation

yarn add itlab-app-header

Importieren des Plugins in der main-Datei

// main.ts
import { createApp } from 'vue';
import App from './App.vue'

import { ITLabAppHeaderPlugin } from 'itlab-app-header';

const app = createApp(App);

app.use(ITLabAppHeaderPlugin);

Andernfalls können die Komponenten auch einzeln importiert und eingesetzt werden

import { createApp } from 'vue';
import App from './App.vue'

import { ITLabAppHeader, ITLabAppHeaderButton } from 'itlab-app-header';

const app = createApp(App);

app.component('itlab-app-header', ITLabAppHeader);
app.component('itlab-app-header-button', ITLabAppHeaderButton);

Liste der verfügbaren Componenten

itlab-app-header

Props

Name	Typ	Beschreibung
breakpoint	number (default: 600)	Ab welcher Bildschirmbreite, können nicht mehr alle Elemente ohne Umbruch angezeigt werden. Danach wird ein faltbares Menu stattdessen angezeigt

Slots

Name	Beschreibung
default	Hier werden die einzelnen Elemente der Navigationsleiste gesetzt (a, href, router-link, etc.)
title	Hierüber kann der Titel (links) angepasst werden. Auch hier kann nur Text oder auch Text + SVG verwendet werden
static	Über diesen Slot können Elemente in der Navigationsleiste gesetzt werden, die im Falle des Erreichens des Breakpoints (statisch) erhalten bleiben und somit nicht ins faltbare Menu verschoben werden

itlab-app-header-button

Props

Name	Typ	Beschreibung
routeName	String	Name der Route, zu der bei einem Klick navigiert werden soll
href	String	Link, der bei einem Klick geöffnet wird
to	RawLocation	Eine geneuere Route, zu der bei einem Klick navigiert werden soll

Events

Name	Typ	Rückgabewert
click	MouseEvent	void

Slots

Name	Beschreibung
default	Text und/oder SVG Icon innerhalb des Knopes