Onglets à icônes avec libellé
Seul l’onglet actif affiche son texte ; les autres restent en icône, ce qui fait gagner de la place sur petit écran.
Réglages
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>Accueil</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>Rechercher</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>Favoris</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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
C’est la barre du bas qu’on retrouve dans beaucoup d’applis de shopping ou de livraison : Accueil, Recherche, Favoris, Profil. Afficher le libellé uniquement sur l’onglet actif garde la barre compacte tout en indiquant où l’on est. Il convient à une boutique mobile ou à une PWA. On parle aussi de barre de navigation inférieure animée.
Choisissez des icônes compréhensibles sans texte, puisque trois sur quatre seront seules. Une maison, une loupe et un cœur ne laissent aucun doute. Quatre entrées tiennent à l’aise ; à cinq, un petit téléphone commence à manquer d’air.