Icon-Tabs mit Beschriftung
Nur der aktive Tab zeigt seinen Text, die anderen bleiben Icons. Das spart auf kleinen Bildschirmen Platz.
Einstellungen
Code
<div class="uv-fti"><button class="on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7v8a2 2 0 0 1-2 2h-3v-6H9v6H6a2 2 0 0 1-2-2z"/></svg><b>Start</b></button><button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4.3-4.3"/></svg><b>Suchen</b></button><button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.5-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 3.5C19 16.5 12 21 12 21z"/></svg><b>Favoriten</b></button><button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0"/></svg><b>Profil</b></button></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 Filter
Wofür du ihn nutzen kannst
Die untere Leiste, die man aus vielen Shopping- und Liefer-Apps kennt: Start, Suche, Favoriten, Profil. Weil nur der aktive Tab seinen Namen zeigt, bleibt die Leiste kompakt und sagt trotzdem, wo man ist. Passt zu einem mobilen Onlineshop oder einer PWA. Man findet so etwas auch unter animierte Bottom Navigation oder Tab Bar.
Nimm Icons, die ohne Text verständlich sind, denn drei von vier stehen allein da. Haus, Lupe und Herz sind sichere Kandidaten. Vier Einträge passen bequem, bei fünf wird es auf kleinen Handys schon eng.