Hojas y superposiciones

En dispositivos táctiles, las opciones que en escritorio serían un menú desplegable suben desde abajo como una hoja. Una primitiva respalda el menú de índice, el menú de compartir y el selector de idioma.

Anatomía

Un panel con las esquinas superiores redondeadas a 20 píxeles, rematado por un tirador de 36 por 4, sobre un fondo atenuado. Las filas miden 48 píxeles de alto para un pulgar cómodo; la fila activa lleva un leve tinte verde. Entra deslizándose con una curva de muelle, de modo que llega con algo de peso.

Las filas y el tirador de la hoja, a partir de las clases reales.

En escritorio

El mismo selector es un menú desplegable en escritorio, no una hoja. La opción es la misma; solo cambia la superficie para adaptarse a un puntero y a una pantalla más grande. El zoom de medios a pantalla completa es la única superposición que se mantiene igual en todos los dispositivos.

Cuándo usarlo

Hazlo

Recurrir a una hoja cuando un usuario táctil elige de una lista corta.

No lo hagas

Usar una hoja para un simple sí/no; eso es un diálogo.

Hazlo

Mantener las filas en 48 píxeles para que el pulgar acierte con limpieza.

No lo hagas

Reducir las filas por debajo de un tamaño táctil cómodo.

Hazlo

Renderizar la misma opción como menú desplegable en escritorio.

No lo hagas

Atrapar al lector: un toque en el fondo cierra la hoja.

Dónde vive

La familia .post-sheet en global.css: .post-sheet-panel, .post-sheet-grabber, .post-sheet-head, .post-sheet-list, con .sheet-active en la fila actual.

Paleta de búsqueda

La búsqueda del blog es el único overlay que no es ni hoja ni desplegable: una paleta de comandos centrada sobre un fondo desenfocado, abierta desde la barra superior o con Cmd K, gobernada por completo desde el teclado. Ofrece recomendaciones y chips de series y etiquetas antes de escribir, resalta las coincidencias al teclear, y nombra su propia salida. Entre 700 y 1279 píxeles el selector de idioma toma prestada esta forma de panel centrado, en vez de la hoja inferior del móvil.

Consentimiento

El aviso de cookies es una barra fija con tres opciones iguales — aceptar, rechazar, personalizar — y la ruta de personalizar abre una tarjeta de preferencias con el foco atrapado y un único conmutador de analítica. Rechazar es tan fácil como aceptar, y la página de privacidad puede reabrir la decisión en cualquier momento.

¿Has visto algo mal en esta página? Escríbeme