Diálogo

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los componentes MDX, bloques de código y términos técnicos:

Un cuadro de diálogo se utiliza para mostrar contenido adicional, así como para llamar la atención del usuario sobre una acción o escenario específico. El cuadro de diálogo bloquea la interacción del usuario con la página principal hasta que se cierra o se ejecuta la acción especificada en esta ventana.

§Punto de entrada

El punto de entrada al cuadro de diálogo puede ser un clic en un desencadenador específico (por ejemplo, un botón en la interfaz) o ciertas acciones o condiciones en la interfaz (por ejemplo, un intento de salir de una página sin guardar datos, o cambiar una cuenta en otra pestaña).

§Tamaños

El tamaño del cuadro de diálogo se determina por su contenido.

Tamaño S - 480 px: Se utiliza para notificaciones/confirmaciones pequeñas y formularios.

Tamaño M – 720 px: Se utiliza para formularios pequeños y medianos.

Tamaño L – 900 px: Se utiliza para grandes cantidades de datos y flujos dentro de una ventana modal.

Tamaño personalizado: Se utiliza cuando ninguna de las tres opciones (S, M o L) es adecuada.

§Área de contenido

La ventana de diálogo puede contener cualquier tipo de contenido. El diseño se elige según los requisitos del usuario.

Si el cuadro de diálogo contiene un formulario, se recomienda uno de los dos diseños de elementos:

§Botones

En la mayoría de los casos, se requiere un botón de acción. Si el usuario no completa las acciones especificadas en el cuadro de diálogo, el botón estará Deshabilitado. En el lado izquierdo, hay una sección para controles personalizados, donde puedes colocar botones secundarios y enlaces. Por ejemplo, referencias.

En algunos casos, se puede usar un botón de Peligro en lugar de un botón de Acción (por ejemplo, en un cuadro de diálogo para eliminar una entidad).

El botón de acción no es necesario si no hay una acción objetivo y el cuadro de diálogo es solo para fines informativos. En este caso, puedes usar el botón Cerrar de estilo Normal.

El botón secundario se utiliza siempre como botón de cancelación. Puede usarse para realizar acciones adicionales (por ejemplo, continuar sin cambios).

Puede que no haya botones en absoluto. Típicamente, se debe hacer una selección dentro del área de contenido; de lo contrario, la interfaz principal no estará disponible.

§Navegación dentro del diálogo

Si el cuadro de diálogo incluye varios pasos, utiliza el botón "Atrás" para volver al paso anterior.

Si el cuadro de diálogo está anidado pero los pasos no son lineales, puedes usar breadcrumbs en el área de contenido de la ventana.

§Posicionamiento del cuadro de diálogo en la página

El cuadro de diálogo se alinea con el centro de la pantalla tanto vertical como horizontalmente.

Al escalar la ventana gráfica, su posicionamiento permanece sin cambios, y el tamaño de la ventana de diálogo puede reducirse siempre que no afecte al contenido.

El espaciado mínimo permitido desde los bordes superior e izquierdo de la pantalla es de 20px.

En casos donde la ventana no cabe dentro de la ventana gráfica, el espaciado superior e izquierdo permanece sin cambios, mientras que los bordes derecho e inferior de la ventana de diálogo se extienden más allá de los bordes de la pantalla. Sin embargo, esto no es recomendable. Por eso, el cuadro de diálogo debe diseñarse de manera que quepa dentro de la ventana gráfica y que el espaciado en todos los lados sea de al menos 20px desde el borde de la pantalla.

§Cierre de una ventana

Además de la acción objetivo, la ventana modal se puede cerrar de las siguientes maneras:

Si la ventana no es modal, se puede cerrar utilizando uno de los siguientes métodos:

• Al hacer clic fuera de la ventana modal
• Al presionar la tecla Esc

Los botones 'cancelar' y 'X' son elementos familiares, ya que se utilizan ampliamente en los cuadros de diálogo. Hacer clic fuera de la ventana modal facilita al usuario su cierre, ya que no tiene que apuntar el cursor del ratón a un elemento específico. Presionar la tecla Esc permite cerrar la ventana sin usar el ratón.

Dado que solo se espera interactuar con el cuadro de diálogo, el contenido de la página principal no debería desplazarse.

§Prevención de pérdida de datos del usuario

Dado que es fácil cerrar una ventana modal, siempre existe la posibilidad de hacerlo accidentalmente. Si el usuario seleccionó solo casillas de verificación en la ventana modal, es más fácil recuperar los datos perdidos que si el usuario dedicó un tiempo considerable a escribir código o a volver a escribir el código VIN de 12 dígitos del vehículo. Por lo tanto, es mejor evitar tales situaciones. Sin embargo, no debemos impedir que el usuario cierre la ventana modal de la manera habitual.

Para evitar el riesgo de pérdida de datos, recomendamos usar una ventana de confirmación adicional para la eliminación de datos. En este caso, la acción debe ser confirmada por el usuario.

Al cerrar la ventana modal, usa el sentido común para determinar si se requiere otra ventana de confirmación. Es importante lograr un equilibrio entre la seguridad y hacer demasiadas preguntas que puedan molestar al usuario. El propósito de la confirmación es evitar la pérdida de la entrada del usuario y, al mismo tiempo, permitirle ejecutar el script.