'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navegación
AccountFooter
La persona que ha iniciado sesión al pie de un AppSidebar: un avatar pequeño con nombre y rol que abre el menú de cuenta, una segunda acción opcional como los ajustes, y un punto en el avatar para la conexión. Una fila compacta con objetivos de 44 px.
import { AccountFooter, AppSidebar, MenuItem, MenuSeparator } from '@alea-design/ui';
Ejemplos
Pie de cuenta
La persona que ha iniciado sesión al pie de la barra lateral: el nombre y el rol abren el menú de cuenta, un engranaje al lado y un punto para la conexión.
Estados de conexión
El punto del avatar indica con conexión, sin conexión, sincronizando (late) o un problema de conexión. También se lee en voz alta, así que el color nunca es la única señal.
Barra lateral reducida
Con la barra lateral reducida a iconos solo quedan el avatar y su punto; el nombre y el rol siguen siendo el nombre accesible del botón.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-bg…--alea-status-danger…--alea-status-success…--alea-status-warning…--alea-surface-hover…--alea-text…--alea-text-muted…
Space
--alea-space-0-25…--alea-space-0-5…--alea-space-1…--alea-space-2…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-regular…--alea-font-weight-semibold…
Other
--alea-icon-muted…
Props
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
connectionerroronlineofflinesyncingplacementstartendbottom endbottom startbottomtopbottom leftbottom righttop lefttop righttop starttop endl…- Estados
- HoverPressed
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-account-footer-avatar.alea-status-dot.alea-account-footer-dot.alea-account-footer-text.alea-account-footer-name.alea-account-footer-secondary.alea-account-footer-chevron.alea-account-footer.alea-account-footer-person.alea-account-footer-action- Atributos data
data-staticdata-connection=offlinedata-connection=errordata-collapsed
Accesibilidad
- La persona es un botón de menú con el nombre de su texto: nombre, rol y conexión ("Ana Pérez Administrador Con conexión"). El menú toma su nombre del botón (menuLabel reemplaza ambos).
- El punto nunca es la única señal: la conexión se lee en voz alta, y el punto se oculta a los lectores de pantalla.
- Los dos objetivos miden 44 px; cuando el texto se agranda, la acción baja a su propia línea y el nombre se parte en varias, así que nada se corta.
- Con la barra lateral reducida a iconos solo queda el avatar; su nombre sigue siendo el nombre accesible.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Abre el menú de cuenta desde la persona |
| Arriba o Flecha abajo | Opción anterior o siguiente |
| Esc | Cierra el menú y vuelve a la persona |
| Tab | Pasa a la acción que tiene al lado |
Qué hacer y qué evitar
Hacer
- Pásalo como footer de AppSidebar: la cabecera y el pie se quedan quietos mientras los enlaces se desplazan.
- Pon el perfil, el idioma y cerrar sesión en el menú, y los ajustes en la acción.
- Usa connection para con conexión, sin conexión o sincronizando en vez de una fila de texto.
Evitar
- No pongas más de una acción junto a la persona: bajaría de línea en barras laterales estrechas.
- No lo uses en una cabecera: usa AccountMenu ahí.
En Figma
Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.