Directives
Usa directivas cuando necesitas comportamiento de interaccion a nivel elemento sin crear logica custom para cada componente.
Antes de empezar
- El plugin de NuvexUI ya esta instalado en tu app.
- Necesitas comportamiento de interaccion a nivel elemento, no una nueva abstraccion de componente.
- Quieres que click, foco y ripple se comporten de forma consistente en toda la UI.
Overview
NuvexUI exporta tres directivas. Elige cada una segun el disparador de interaccion y el comportamiento UX que necesitas.
v-ripple
Agrega feedback visual por puntero y teclado en elementos interactivos.
v-click-outside
Ejecuta un handler cuando el usuario hace click fuera del limite objetivo.
v-focus-outside
Ejecuta un handler cuando el foco sale del limite actual.
Ripple
Usa ripple para mostrar feedback visual inmediato en botones, filas de lista y otras superficies accionables.
Configura keyboard: true cuando el elemento sea accionable por teclado para mantener la misma respuesta visual que con puntero.
Button with ripple options
Click Outside
Usa click outside para cerrar UI transitoria como menus, popovers o quick actions cuando el usuario interactua en otro lugar.
Close dropdown when user clicks outside
Keep trigger button inside include list
Focus Outside
Usa focus outside cuando el comportamiento debe reaccionar a transiciones de foco, especialmente en flujos de teclado y validacion diferida.
Validate field group when focus leaves it
Keep teleported helper inside focus boundary
Siguientes pasos recomendados
Continua con la pagina que mejor encaje con lo que necesitas despues de aplicar directivas.