Tabs im Browser-Stil
Tabs, die sich aktivieren, beim Schließen zusammenschrumpfen und sich mit dem Plus-Button öffnen wie im Browser.
Einstellungen
Code
<div class="uv-nbr"><div class="st" role="tablist" aria-label="Tabs"><div class="tb" style="--f:#ef4444"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Mail</span></button><button type="button" class="x" aria-label="Mail schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><div class="tb on" style="--f:#3b82f6"><button type="button" role="tab" aria-selected="true" class="lb"><i></i><span>Kalender</span></button><button type="button" class="x" aria-label="Kalender schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><div class="tb" style="--f:#a855f7"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Finales Design</span></button><button type="button" class="x" aria-label="Finales Design schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><button type="button" class="ad" aria-label="Neuer Tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></div><div class="tl"><span class="ur"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg><span class="u">calendario.app</span></span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Arbeits-Apps, Editoren und Dashboards nutzen zunehmend Tabs im Browser-Stil, um mehrere Dokumente offen zu halten. Der aktive Tab verschmilzt mit geschwungenen Ecken mit der Adressleiste, inaktive werden beim Hover heller, der Schließen-Button lässt einen Tab aus der Reihe schrumpfen und aktiviert den Nachbarn, und der Plus-Button schiebt einen neuen Tab herein.
Die Tabs teilen sich die Breite und kürzen lange Titel mit Auslassungspunkten, die Adressleiste zeigt die Adresse des aktiven Tabs. Sie nutzen die Rolle tab mit aria-selected, in der Demo sind bis zu fünf gleichzeitig offen.