Navigation

Morphing Pill Navbar

Eine Reihe von Navigationsbeschriftungen in einer dunklen Pille, wobei die aktive Beschriftung in ihre eigene gefüllte Pille aufbricht und die verbleibenden Beschriftungen sich zu einer zweiten Pille zusammenschließen, die um sie herum neu fließt.

Fieldbook Studio

Morphing Pill Navbar verwenden

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: accentColor, defaultRoute, invertActivePill

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Vorschau und Beschreibung sind öffentlich. Melde dich mit einem berechtigten Konto an, um Code, Framework-Versionen und Installation zu öffnen.

Verbinde deinen Agenten

Ähnliche Komponenten

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.

1537Pill tabsNavigationEin Tab-Strip, in dem ein einzelnes Tablet auf den ausgewählten Tab gleitet und sich dort ausdehnt, mit Pfeil, Navigationstasten „Pos1“ und „Ende“ und einem Bedienfeld zum Überblenden.

2233Sliding height tabsNavigationIn einer Karte eingerahmte Tabs, bei denen beim Wechseln der Felder der gesamte Inhalt wie bei einem Filmstreifen zur Seite verschoben wird, während die Höhe der Karte an das neue Feld angepasst wird.

2077Underline tabsNavigationEine Reihe von Abschnittsregisterkarten mit einem farbigen Balken, der unter der aktiven Beschriftung verschoben und in der Größe geändert wird, anstelle eines gefüllten Hintergrunds.

1914ARIA Tablist ResizeNavigationEine vollständig zugängliche Roving-Tabindex-Tab-Liste mit einer gleitenden Pillen-Hervorhebung, bei der sich die Größe des Bedienfeldrahmens nahtlos an den angezeigten Tab-Inhalt anpasst.

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.