Cuando teníamos muchos componentes en la biblioteca de eLama, notamos que los hovers no tienen un sistema: el color de relleno, el color del marco, el color del texto cambia, aparece una sombra, etc.
No lo hicimos por malicia, funcionó mejor en algunos proyectos, pero mirando la interfaz en su conjunto, quedó claro que esto era un problema.
No todo es lo que parece
Al desarrollar interfaces, nos basamos en el principio de que lo que hace debe funcionar como espera el usuario. Si el usuario ve un botón frente a él, esperará el comportamiento del botón, lo que significa que debería comportarse como se esperaba.
Por ejemplo, en nuestra biblioteca tenemos un enlace y un botón que visualmente se parece a un enlace. Debido al hecho de que no hubo una gran diferencia en su comportamiento al pasar el mouse, podría surgir la pregunta, ¿qué sucederá cuando se haga clic? ¿Saltará a otra página o la acción estará en la página actual? Al principio, incluso hubo casos en los que los desarrolladores usaron un botón como enlace, guiados por el hecho de que se ve y se comporta como un enlace cuando se desplaza.
¿Qué tipo de hovers hay?
1. ( )
2. ( )
3.
4.
5. (, ..)
6. ( , ..)
, , , , , -.
Button, SelectList, Table, Chip, Lable, Switch, Pagination,
:
— 3 .
, . .
(: tooltip ) , (, toast)
Rating
:
, . -, , . , , .
RadioLine, CheckLine Tab
:
RadioLine, CheckLine — .
: RadioLine — , .
Checkbox
:
: — — — .
Input, MultiInput, TextArea, Select, Radiobutton
:
- — . , , , .
InputFile
— . , , .
Link Button
, .
, .
, . , . , , . , .
Pero puede haber una animación parcial, por ejemplo, como hicimos para la paginación: cuando pasa el mouse sobre un número de página, el fondo aparece sin problemas, pero cuando el cursor lo deja, el fondo desaparece instantáneamente. Esto se hizo para evitar la situación en la que mueve el cursor sobre los números rápidamente y varios sustratos son visibles al mismo tiempo, porque aparecen nuevos cuando los anteriores aún no han desaparecido.