CSS

¿Puede CSS evitar el desbordamiento de sugerencias? | trucos CSS

Supongamos que tiene un elemento con sugerencias CSS y coloca estas sugerencias para que se abra junto al elemento cuando mantiene presionado el mouse (o quizás mejor: cuando hace clic / toca). donde sigue ¿en él? ¿Qué sucede si el elemento ya está muy cerca de la parte superior de la pantalla? En este caso, probablemente debería abrirse debajo. Y viceversa, lo mismo ocurre con los bordes izquierdo y derecho de la pantalla. Definitivamente quieres que sea visible y no abrume la vista.

A veces, cuando abre nuevos elementos de la interfaz de usuario, deben tener en cuenta los límites para evitar la activación de barras de desplazamiento de contenido extraño o, lo que es peor, el recorte de contenido.

¿Lo que es importante? !!

Esta es una vieja pregunta en la web. Recuerdo haber usado deliberadamente las sugerencias de la interfaz de usuario de jQuery debido a su capacidad especial para conocer los bordes. Puedes imaginar JavaScript detrás de él. Tú determinas dónde estará el elemento y usas las matemáticas de posicionamiento para determinar si estará dentro de la vista. Si no, prueba con otra ubicación. hacer encajar.

Como siempre, todo lo viejo es nuevo. interfaz de usuario flotantediseñado para este problema.

La pantalla de inicio de FloatingUI muestra un logotipo que parece una sugerencia de CSS con una sonrisa.

La interfaz de usuario flotante es una herramienta de bajo nivel para colocar elementos flotantes mientras los mantiene a la vista. Sugerencias, ventanas emergentes, menús desplegables, menús y más.

Se ve muy bien hecho. Me gusta el truco, la demo está muy bien hecha y es muy adictiva.

Pero, ¿sabes qué sería más genial? Solo si CSS pudiera hacer todo por sí mismo. Ese es el estado de ánimo. Posicionamiento de anclaje CSS – ahora es solo un archivo «intérprete»:

Al crear aplicaciones o componentes interactivos, los autores suelen querer aprovechar los elementos de la interfaz de usuario que se pueden mostrar «arriba». Los ejemplos de dichos elementos de la interfaz de usuario incluyen selectores de contenido, una interfaz de usuario educativa, sugerencias y menús. Habilitar ventanas emergentes lanzó uno nuevo popup Los elementos facilitan la creación de muchos de estos elementos de nivel superior.

Los autores a menudo desean «fijar» o «anclar» dicha interfaz de usuario de nivel superior a un punto en otro elemento, denominado en este documento «elemento de anclaje». La forma en que se coloca la interfaz de usuario de nivel superior en relación con su elemento de anclaje está más influenciada o limitada por los bordes de la vista de diseño.

Una cuadrícula de cuatro por cuatro que muestra los mismos botones azules en diferentes esquinas de cada celda y una información sobre herramientas que evita el borde de la pantalla donde se encuentran los botones.

Me gusta. La plataforma web en su máxima expresión. Averigüe qué debe hacer el autor y qué está haciendo la biblioteca e intente intervenir y hacerlo de forma natural (con suerte, mejor).

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba