Diálogos
Los diálogos proporcionan indicaciones importantes en un flujo de usuario.
Los diálogos se utilizan para interactuar directamente con el usuario, solicitar
información, confirmaciones o decisiones, y proporcionar feedback y notificaciones.
Controlan el flujo de la interfaz, permiten personalización y opciones, y se pueden
cerrar o gestionar una vez que se completa la interacción.
Los diálogos mejoran la experiencia del usuario al brindar interacciones más enfocadas y
claras en momentos clave de la interacción con la aplicación o el sitio web.
Estas son algunas de las características y funcionalidades clave de los diálogos:
- Interacción: Los diálogos se utilizan para interactuar de manera más directa con el usuario y solicitar información o confirmación. A diferencia de otras partes de la interfaz, los diálogos tienen un enfoque específico y se superponen a la pantalla principal para captar la atención del usuario.
- Decisiones:Los diálogos se utilizan para solicitar información al usuario o para proporcionar información importante. Pueden contener campos de entrada de texto, botones de selección, listas desplegables o cualquier otro elemento que permita la entrada o visualización de datos relevantes.
- Feedback: Los diálogos pueden utilizarse para proporcionar feedback y notificaciones al usuario sobre el resultado de una acción o el estado de un proceso. Pueden mostrar mensajes de éxito, error o advertencia, brindando al usuario información importante sobre lo que está sucediendo.
- Control: Los diálogos a menudo se utilizan para controlar el flujo de la interfaz y permitir al usuario realizar una acción o tomar una decisión antes de continuar. Pueden bloquear el acceso a la pantalla principal hasta que se complete la interacción en el diálogo, asegurando que el usuario esté completamente consciente de la situación antes de avanzar.
- Gestión: Los diálogos generalmente se pueden cerrar o descartar una vez que se completa la interacción. También pueden incluir opciones adicionales de gestión, como guardar cambios, cancelar una acción o proporcionar opciones adicionales para el usuario.
Ventana de Dialogo estándar: título, descriptor y 2 botones de acción
¿Quieres descartar tus cambios?
Al salir de esta ventana perderás la información que seleccionaste y/o ingresaste.
¿Quieres descartar tus cambios?
Al salir de esta ventana perderás la información que seleccionaste y/o ingresaste.
HTML
<div class="dialogo">
<div class="dialogo-cuerpo">
<h4>¿Quieres descartar tus cambios?</h4>
<p>Al salir de esta ventana perderás la información que seleccionaste y/o
ingresaste.</p>
</div>
<div class="grupo-botones">
<button class="terciario"
id="btn-cerrar-dialog">Cancelar</button>
<button class="primario">Descartar</button>
</div>
</div>
CSS
.dialogo {
display: flex;
flex-direction: column;
padding: 40px;
gap: 40px;
height: fit-content;
background: #FFFFFF;
border-radius: 10px;
width: 500px;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
transition: transform 0.3s ease-in-out;
position: fixed;
z-index: 9999;
}
.dialogo .dialogo-cuerpo {
display: flex;
flex-direction: column;
gap: 20px;
}
.dialogo.show {
transform: translate(-50%, -80%);
}
.dialogo h4{
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 32px;
color: #002846;
}
.dialogo p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #002846;
}
.grupo-botones {
display: flex;
justify-content: flex-end;
gap: 20px;
}
@media (max-width: 600px) {
.dialogo {
border-radius: 10px 10px 0 0;
width: 100%;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
transition: transform 0.3s ease-in-out;
position: fixed;
}
.grupo-botones {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
gap: 20px;
}
.grupo-botones button {
width: 100% !important;
justify-content: center;
}
.grupo-botones .primario {
order: 1;
}
.grupo-botones .terciario {
order: 2;
}
.dialogo.show {
transform: translate(-50%, 0);
}
}
JS
const showButton = document.getElementById("show-dialog");
const closeButton = document.getElementById("btn-cerrar-dialog");
const dialog = document.querySelector(".dialogo");
showButton.addEventListener("click", function () {
dialog.classList.toggle("show");
});
closeButton.addEventListener("click", function () {
dialog.classList.toggle("show");
});
Ventana de Dialogo Estándar
¿Quieres descartar tus cambios?
Al salir de esta ventana perderás la información que seleccionaste y/o ingresaste.
¿Quieres descartar tus cambios?
Al salir de esta ventana perderás la información que seleccionaste y/o ingresaste.
HTML
<div class="dialogo">
<div class="dialogo-cuerpo">
<h4>¿Quieres descartar tus cambios?</h4>
<p>Al salir de esta ventana perderás la información que seleccionaste y/o
ingresaste.</p>
</div>
<div class="grupo-botones">
<button class="terciario"
id="btn-cerrar-dialog">Cancelar</button>
<button class="primario">Descartar</button>
</div>
</div>
CSS
.dialogo {
display: flex;
flex-direction: column;
padding: 40px;
gap: 40px;
height: fit-content;
background: #FFFFFF;
border-radius: 10px;
width: 500px;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
transition: transform 0.3s ease-in-out;
position: fixed;
z-index: 9999;
}
.dialogo .dialogo-cuerpo {
display: flex;
flex-direction: column;
gap: 20px;
}
.dialogo.show {
transform: translate(-50%, -80%);
}
.dialogo h4{
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 32px;
color: #002846;
}
.dialogo p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #002846;
}
.grupo-botones {
display: flex;
justify-content: flex-end;
gap: 20px;
}
@media (max-width: 600px) {
.dialogo {
border-radius: 10px 10px 0 0;
width: 100%;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
transition: transform 0.3s ease-in-out;
position: fixed;
}
.grupo-botones {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
gap: 20px;
}
.grupo-botones button {
width: 100% !important;
justify-content: center;
}
.grupo-botones .primario {
order: 1;
}
.grupo-botones .terciario {
order: 2;
}
.dialogo.show {
transform: translate(-50%, 0);
}
}
JS
const showButton = document.getElementById("show-dialog");
const closeButton = document.getElementById("btn-cerrar-dialog");
const dialog = document.querySelector(".dialogo");
showButton.addEventListener("click", function () {
dialog.classList.toggle("show");
});
closeButton.addEventListener("click", function () {
dialog.classList.toggle("show");
});
