Capas superpuestas
Account Menu Flyout
Account Menu Flyout: Un botón de resumen de perfil que se abre en un menú de cuenta de filas etiquetadas, con una pequeña línea indicadora curva que se endereza cuando el menú está abierto.
Cómo usar Account Menu Flyout
Usa este menú desplegable para agrupar los datos del perfil y las acciones de cuenta detrás de un botón de perfil compacto.
Account Menu Flyout se presenta con el formato de vista previa «tarjeta» y el tema «claro/oscuro».
Proporciona un nombre y correo, elige la alineación del panel y conecta cada fila seleccionada a su destino de cuenta mediante la función de selección.
El menú es un componente de interfaz. Tu aplicación debe implementar la autenticación, los cambios de facturación y la navegación; mostrar una insignia de plan no verifica una suscripción.
Personalizar la vista previa
Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.
| Control | Tipo | Valor inicial | Límites de la vista previa |
|---|---|---|---|
name | text | Eugene An | Hasta 40 caracteres |
plan | text | Pro | Hasta 20 caracteres |
align | select | end | Opciones: start, end |
accent | color | #38BDF8 | Los metadatos no indican otro límite. |
¿Para qué frameworks está disponible Account Menu Flyout?
Account Menu Flyout está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.
¿Qué dependencias tiene Account Menu Flyout?
Los metadatos de React indican estas dependencias npm además de React: motion, clsx, tailwind-merge.
¿Qué detalles de accesibilidad se observan en Account Menu Flyout?
El código React de Account Menu Flyout incluye: elementos nativos (button); atributos y manejadores (aria-activedescendant, aria-expanded, aria-haspopup, aria-hidden, aria-label, onKeyDown, tabIndex); roles explícitos (menu, menuitem, separator); comparaciones de teclas (ArrowDown, ArrowUp, End, Enter, Escape, Home, Space, Tab). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.
¿Cómo maneja Account Menu Flyout el movimiento reducido?
Account Menu Flyout consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: duration: reduced ? 0.08 : 0.16; reduced ? { duration: 0 } : { type: "spring", stiffness: 560, damping: 38 }; reduced ? { opacity: 0 } : { opacity: 0, scale: 0.93 }. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.
