Diálogo
Un diálogo es una ventana modal con un título y un contenido. No se abre solo: lo abre un botón con una acción dialog y lo cierra
un botón con una acción close situado dentro. El área de pruebas tiene ambos botones y ejecuta esas acciones, así que pulsa Open the
dialog, cambia sus atributos y ábrelo de nuevo. El XML de debajo muestra el diálogo y el botón que lo abre.
<dialog id="demo" label="Edit customer">
<tag type="div"
style="modal-body"
label="Update the data of the customer and save the changes." />
<tag type="div" style="modal-footer">
<button id="Close" label="Close" style="btn-primary">
<button-action type="close" target="demo" />
</button>
</tag>
</dialog>
<button id="Open" label="Open the dialog">
<button-action type="dialog" target="demo" />
</button>
- Atributos
- Eventos y acciones
- Referencia completa
Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD
| Atributo | Control | Valores |
|---|---|---|
label | Título | text |
style | Anchura | modal-smmodal-mdmodal-lg |
tag | Pie con un botón | true / false |
| Evento | Descripción |
|---|---|
open | Se guarda en el diálogo cuando se abre. |
close | Se guarda en el diálogo cuando se cierra. |
| Acción (type) | Qué hace |
|---|---|
dialog | Abre el diálogo indicado en target. |
close | Cierra el diálogo y continúa con las acciones que esperaban. |
close-cancel | Cierra el diálogo y cancela las acciones que esperaban. |
Un diálogo se dibuja sobre toda la página, fuera de la vista previa, así que la capa sigue el modo de color del sitio y no el del interruptor Claro / Oscuro de la vista previa. Ciérralo con su botón, con la cruz de su cabecera o con Esc.
Recetas
Confirmación
Un diálogo modal-sm con dos botones en el modal-footer. close-cancel cierra el diálogo y cancela las acciones
que lo esperaban, así que un botón Cancelar detiene la cadena que lo abrió; close deja que continúe.
<button id="Remove" label="Eliminar cliente" icon="trash" style="btn-danger">
<button-action type="dialog" target="RemoveDlg" />
</button>
<dialog id="RemoveDlg" label="¿Eliminar el cliente?" style="modal-sm">
<tag type="div" style="modal-body" label="Se borrarán el cliente y sus pedidos." />
<tag type="div" style="modal-footer">
<button id="Cancel" label="Cancelar" style="btn-ghost">
<button-action type="close-cancel" target="RemoveDlg" />
</button>
<button id="Confirm" label="Eliminar" style="btn-danger">
<button-action type="close" target="RemoveDlg" />
</button>
</tag>
</dialog>
Formulario en un diálogo
Un diálogo contiene cualquier componente: aquí, dos criterios. Las clases de anchura son modal-sm (300px), modal-md (600px) y modal-lg (900px).
<dialog id="EditDlg" label="Editar cliente" style="modal-md">
<tag type="div" style="modal-body">
<criteria id="Name" component="text" label="Nombre" placeholder="Nombre completo" validation="required" />
<criteria id="Email" component="text" label="Correo" placeholder="nombre@empresa.com" icon="lucide:mail" />
</tag>
<tag type="div" style="modal-footer">
<button id="Save" label="Guardar" style="btn-primary">
<button-action type="close" target="EditDlg" />
</button>
</tag>
</dialog>
Eventos y acciones
El diálogo guarda los eventos open y close cuando se abre y se cierra, así que una dependencia puede reaccionar a ellos. Se abre y se cierra
con acciones de los botones.
| Acción | Descripción |
|---|---|
dialog | Abre el diálogo indicado en target |
close | Cierra el diálogo y continúa con las acciones que esperaban |
close-cancel | Cierra el diálogo y cancela las acciones que esperaban |
Con on-close="reject", la cruz de la cabecera y Esc actúan como close-cancel; por defecto (accept) actúan como close. Con
deferred="true", los datos de los componentes del diálogo se cargan la primera vez que se abre.
Más
- Documentación completa del diálogo: atributos, pie, carga diferida y más.
- Referencia XSD del elemento
dialog.