Pestañas de icono con texto
Solo la pestaña activa enseña su texto; el resto se queda en icono y así ahorras espacio en pantallas pequeñas.
Ajustes
Código
<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>Inicio</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>Buscar</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>Favoritos</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>Perfil</b></button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Es la barra inferior que ves en muchas apps de compras o de comida a domicilio: Inicio, Buscar, Favoritos y Perfil. Mostrar el texto solo en la pestaña activa deja la barra compacta y aun así dice dónde estás. Encaja en una tienda online para móvil o en una PWA. También lo encontrarás como barra de navegación inferior animada.
Elige iconos que se entiendan sin texto, porque tres de los cuatro irán solos. Una casa, una lupa y un corazón son apuestas seguras. Cuatro elementos caben con holgura; con cinco, un móvil pequeño ya va justo.