Dialog
<gstock-dialog>
|
GstockDialog
Examples
Básico
Un dialog básico con un título, contenido y un botón de cierre en el pie.
<gstock-dialog label="Dialog" class="dialog-basic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-basic');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>Ancho personalizado
Utilice la propiedad CSS personalizada --width para establecer el ancho del dialog.
<gstock-dialog label="Dialog" class="dialog-width">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-width');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>
<style>
.dialog-width {
--width: 50vw;
}
</style>Desplazamiento
Por diseño, la altura de un dialog nunca excederá la del viewport. Por lo tanto, los dialogs no se desplazarán con la página, lo que garantiza que el encabezado y el pie estén siempre accesibles para el usuario.
Desplázate hacia abajo para probarlo.
<gstock-dialog label="Dialog" class="dialog-scrolling">
<div class="dialog-scrolling__content">
<p>Desplázate hacia abajo para probarlo.</p>
</div>
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-scrolling');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>
<style>
.dialog-scrolling__content {
height: 150vh;
border: dashed 2px var(--gstock-legacy-color-grayscale-200);
padding: 0 1rem;
}
</style>Acciones en el encabezado
El encabezado muestra un botón de cierre funcional por defecto. Puede utilizar el slot header-actions para agregar botones de icono adicionales si es necesario.
<gstock-dialog label="Dialog" class="dialog-header-actions">
<gstock-icon-button class="new-window" slot="header-actions" icon="link" variant="plain"></gstock-icon-button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-header-actions');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
const newWindowButton = dialog.querySelector('.new-window');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
newWindowButton.addEventListener('click', () => window.open(location.href));
</script>Etiqueta personalizada
Utilice el slot label para personalizar el título del dialog con contenido HTML, como iconos u otros elementos.
<gstock-dialog class="dialog-custom-label">
<span slot="label">
<gstock-icon name="info"></gstock-icon>
Información importante
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-custom-label');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>Sin encabezado
Utilice el atributo no-header para ocultar el encabezado del dialog. Tenga en cuenta que el atributo label sigue siendo necesario por motivos de accesibilidad.
Este dialog no tiene encabezado visible. El atributo
label
sigue siendo necesario por accesibilidad.
<gstock-dialog label="Dialog" no-header class="dialog-no-header">
<p>
Este dialog no tiene encabezado visible. El atributo
<code>label</code>
sigue siendo necesario por accesibilidad.
</p>
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-no-header');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>Prevenir el cierre del dialog
Por defecto, los dialogs se cerrarán al hacer clic en el botón de cierre, en el overlay o al presionar la tecla Escape. En la mayoría de los casos, este es el comportamiento ideal en términos de UX. Sin embargo, existen situaciones en las que puede no ser deseable, como cuando podría provocar pérdida de datos.
Para mantener el dialog abierto en estos casos, puede cancelar el evento gstock-request-close-event. Cuando se cancela, el dialog permanecerá abierto y pulsará brevemente para llamar la atención del usuario.
Puede utilizar event.detail.source para determinar qué provocó la solicitud de cierre. Este ejemplo evita que el dialog se cierre al hacer clic en el overlay, pero permite cerrarlo con el botón de cierre o la tecla Escape.
<gstock-dialog label="Dialog" class="dialog-deny-close">
Este dialog no se cerrará al hacer clic en el overlay.
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-deny-close');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
dialog.addEventListener('gstock-request-close-event', event => {
if (event.detail.source === 'overlay') {
event.preventDefault();
}
});
</script>Foco inicial personalizado
Por defecto, el panel del dialog recibirá el foco cuando se abra. Esto permite que una pulsación posterior de la tecla Tab enfoque el primer elemento navegable del dialog. Si desea que un elemento diferente reciba el foco, añádale el atributo autofocus como se muestra a continuación.
<gstock-dialog label="Dialog" class="dialog-focus">
<gstock-input autofocus placeholder="Este campo recibirá el foco al abrir el dialog"></gstock-input>
<gstock-button slot="footer">Cerrar</gstock-button>
</gstock-dialog>
<gstock-button>Abrir Dialog</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-focus');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('gstock-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
</script>Puede personalizar aún más el comportamiento del foco inicial cancelando el evento gstock-initial-focus-event y estableciendo el foco manualmente dentro del manejador de eventos.
Dialog de confirmación
Ejemplo de un dialog de confirmación con acciones de cancelar y confirmar en el pie.
¿Está seguro de que desea eliminar este elemento? Esta acción no se puede deshacer.
<gstock-dialog label="Confirmar eliminación" class="dialog-confirmation">
<p>¿Está seguro de que desea eliminar este elemento? Esta acción no se puede deshacer.</p>
<div slot="footer" class="confirmation-footer">
<gstock-button class="cancel-btn" variant="plain">Cancelar</gstock-button>
<gstock-button class="confirm-btn" variant="solid" color="danger">Eliminar</gstock-button>
</div>
</gstock-dialog>
<gstock-button>Abrir confirmación</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-confirmation');
const openButton = dialog.nextElementSibling;
const cancelButton = dialog.querySelector('.cancel-btn');
const confirmButton = dialog.querySelector('.confirm-btn');
openButton.addEventListener('click', () => dialog.show());
cancelButton.addEventListener('click', () => dialog.hide());
confirmButton.addEventListener('click', () => dialog.hide());
</script>
<style>
.confirmation-footer {
display: flex;
gap: var(--gstock-space-gap-sm);
justify-content: flex-end;
width: 100%;
}
</style>Dialog con formulario
Ejemplo de un dialog que contiene un formulario con campos de entrada y acciones en el pie.
<gstock-dialog label="Formulario de contacto" class="dialog-form">
<div class="form-fields">
<gstock-input label="Nombre" placeholder="Introduzca su nombre"></gstock-input>
<gstock-input label="Email" type="email" placeholder="ejemplo@correo.com"></gstock-input>
</div>
<div slot="footer" class="form-footer">
<gstock-button class="cancel-btn" variant="plain">Cancelar</gstock-button>
<gstock-button class="submit-btn" variant="solid">Enviar</gstock-button>
</div>
</gstock-dialog>
<gstock-button>Abrir formulario</gstock-button>
<script type="module">
const dialog = document.querySelector('.dialog-form');
const openButton = dialog.nextElementSibling;
const cancelButton = dialog.querySelector('.cancel-btn');
const submitButton = dialog.querySelector('.submit-btn');
openButton.addEventListener('click', () => dialog.show());
cancelButton.addEventListener('click', () => dialog.hide());
submitButton.addEventListener('click', () => dialog.hide());
</script>
<style>
.form-fields {
display: flex;
flex-direction: column;
gap: var(--gstock-space-gap-md);
}
.form-footer {
display: flex;
gap: var(--gstock-space-gap-sm);
justify-content: flex-end;
width: 100%;
}
</style>