Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Navigation

Panel Tab Switcher

Panel Tab Switcher: Eine abgerundete Tab-Leiste, in der sich ein Hintergrundindikator an die exakte Größe und Position des aktiven Tabs anpasst und einen deutlichen Inhaltsbereich darunter freigibt.

Panel Tab Switcher verwenden

Panel Tab Switcher verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
accentColorcolor#9BE15DKeine weitere Grenze in den Metadaten.
variantselectfilledOptionen: filled, underline
tabCountnumber3Von 2 bis 5; Schrittweite 1
Für welche Frameworks ist Panel Tab Switcher verfügbar?

Panel Tab Switcher ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Panel Tab Switcher?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx.

Welche Details zur Barrierefreiheit sind in Panel Tab Switcher erkennbar?

Der React-Quellcode von Panel Tab Switcher enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-controls, aria-hidden, aria-label, aria-labelledby, aria-selected, onKeyDown, tabIndex); explizite Rollen (tab, tablist, tabpanel); Tastenvergleiche (ArrowLeft, ArrowRight, End, Home). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Panel Tab Switcher reduzierte Bewegung?

Panel Tab Switcher liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Auto height tabs von Fieldbook aus der Kategorie Navigation.
1916Auto height tabsNavigationEine Registerkartengruppe, deren Inhaltscontainer beim Wechseln der Registerkarten die Höhe stufenlos an die Größe jedes Panels anpasst, anstatt zu springen oder leeren Raum zu hinterlassen.
Standbild der UI-Komponente Card blur tabs von Fieldbook aus der Kategorie Navigation.
1928Card blur tabsNavigationTabs, eingerahmt von einer umrandeten Karte, deren Inhalt kurzzeitig verschwimmt und überblendet, wenn Sie zwischen den Panels wechseln, mit einer verschiebbaren Pille hinter der aktiven Tab-Beschriftung.
Standbild der UI-Komponente Sliding Panel Tabs von Fieldbook aus der Kategorie Navigation.
2044Sliding Panel TabsNavigationZwei Registerkarten in einer abgerundeten Pillenspur mit einer Hervorhebung, die dazwischen gleitet und ein darunter liegendes Bedienfeld im Einstellungsstil überblendet, ohne dass es zu einem Layoutsprung kommt.
Standbild der UI-Komponente View mode toggle switch von Fieldbook aus der Kategorie Navigation.
2081View mode toggle switchNavigationEin Schalter mit zwei Zuständen, der eine Ansicht zwischen zwei benannten Modi umschaltet, mit einem verschiebbaren Daumen, der bei Druck kleiner wird und ein kleines Symbol darin austauscht.
Standbild der UI-Komponente Bubble burst menu von Fieldbook aus der Kategorie Navigation.
2309Bubble burst menuNavigationEine schwebende Logo-Pille und ein Umschalter, die sich zu einer bildschirmfüllenden Überlagerung übergroßer Pillen-Links erweitern, die jeweils mit einer federnden Staffelung an ihren Platz platzen.
Standbild der UI-Komponente Chameleon pill navbar von Fieldbook aus der Kategorie Navigation.
2120Chameleon pill navbarNavigationEine Reihe von Navigationslinks in einer dunklen Kapsel, wobei sich der aktive Link in seine eigene Pille aufteilt und der Rest sich wieder um ihn herum schließt.