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|