itlab-app-header v2.0.5
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|