# Tablist Píldora flotante inspirada en el _UITabBar_ de Apple. Permite alternar entre vistas equivalentes manteniendo el contexto. La pestaña activa se eleva sobre un fondo blanco con el texto en morado Lexy. ```tsx const tabs = [ { id: "tab1", label: "Tab 1" }, { id: "tab2", label: "Tab 2" }, { id: "tab3", label: "Tab 3" }, ]; ``` ## Default ### Cuándo usar - Alternar entre vistas equivalentes en una misma pantalla. - Filtros mutuamente excluyentes que afectan al contenido inmediato debajo. - Sub-secciones de un panel, sin necesidad de una página nueva. - Navegación entre causas o documentos abiertos en el espacio de trabajo. ### Cuándo no usarlo - Para acciones primarias: usa botones. - Si la navegación cambia la URL principal: usa el menú lateral o el header. ## Cerrables ### Pestañas con cierre Cuando el usuario abre causas, documentos o vistas dinámicas, cada pestaña incluye una **x** al final para cerrarla. La pestaña activa muestra el icono en morado Lexy; las inactivas en gris. ```tsx const [tabs, setTabs] = useState([ { id: "causa1", label: "C-2984-2025", closable: true }, { id: "causa2", label: "C-1547-2025", closable: true }, { id: "causa3", label: "C-0421-2025", closable: true }, ]); setTabs((t) => t.filter((x) => x.id !== id))} /> ``` ## Con iconos ### Tabs con icono y label Acompaña cada label con un icono cuando ayude a identificar la sección de un vistazo. El icono se rellena en la pestaña activa para reforzar el estado. ```tsx const tabs = [ { id: "causas", label: "Causas", icon: "gavel" }, { id: "agenda", label: "Agenda", icon: "calendar_month" }, { id: "documentos", label: "Documentos", icon: "description" }, ]; ``` ## Tamaño grande ### Tabs grandes (size lg) Usa el tamaño grande cuando las tabs sean el control principal de una vista amplia o el contenido a su lado tenga mucha jerarquía. Celdas de 40 px de alto y tipografía 15 px. ```tsx const tabs = [ { id: "resumen", label: "Resumen", icon: "summarize" }, { id: "escritos", label: "Escritos", icon: "stacks" }, { id: "audiencias", label: "Audiencias", icon: "groups" }, ]; ``` ## Con contador ### Tabs con badge numérico Añade un contador junto al label cuando el número de elementos sea relevante para decidir a qué pestaña entrar. El badge se rellena en morado Lexy con texto blanco cuando la tab está activa. ```tsx const tabs = [ { id: "bandeja", label: "Bandeja", badge: 12 }, { id: "pendientes", label: "Pendientes", badge: 3 }, { id: "archivadas", label: "Archivadas" }, ]; ``` ## Anatomía ### Estructura visual - Contenedor con fondo gris claro (#eeeef0), padding interno 3 px y radio 10 px. - Cada celda mide 30 px de alto, 12 px de padding horizontal y radio 7 px. - La celda activa rellena de blanco con sombra suave; las inactivas usan blanco translúcido para destacar sobre el contenedor. - Texto del activo en morado Lexy 600; inactivos en gris medio 500 para evitar peso visual excesivo. - Iconos opcionales a 18 px, alineados al inicio de la celda. ## Estados ### Activo, inactivo y deshabilitado Las pestañas deshabilitadas se atenúan al 40 por ciento y no responden al clic. Úsalas con moderación; suele ser preferible ocultar la sección. ```tsx const tabs = [ { id: "tab1", label: "Causas" }, { id: "tab2", label: "Agenda" }, { id: "tab3", label: "Archivo", disabled: true }, ]; ``` ## Accesibilidad ### Roles y teclado - El contenedor expone role="tablist" con aria-label descriptivo. - Cada celda usa role="tab" y aria-selected. Solo la activa lleva tabIndex 0; las demás, -1. - El contenido vinculado usa role="tabpanel" con aria-labelledby apuntando al id del tab activo. - Foco visible con anillo Lexy purple translúcido en cualquier celda. - Contraste mínimo AA del texto en cualquier estado. ## Contenido ### Etiquetas - Una sola palabra cuando se pueda. Dos como máximo. - Sustantivos para destinos, no verbos. - Mismo registro y longitud entre todas las celdas.