Libro de recetas de la API web

Capítulo 13. Elementos de IU

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Introducción

Los navegadores modernos tienen incorporados algunos potentes elementos de interfaz de usuario que puedes utilizar en tu aplicación. Antes, estos componentes de IU requerían bibliotecas de terceros (o podías crear las tuyas propias).

Diálogos

Los cuadros de diálogo emergentes son un pilar de muchas aplicaciones, ya que proporcionan información y solicitan datos. Existen innumerables bibliotecas de diálogos, y es posible crear la tuya propia. Los navegadores modernos ya lo han hecho por ti con el elemento <dialog>. Se trata de un diálogo emergente que incluye un fondo que cubre el resto de la página. Puedes aplicar estilos tanto al fondo como al diálogo con un poco de CSS. Por defecto, el diálogo es sólo una caja que aparece con el fondo detrás. De ti depende añadir un título, botones y otros contenidos.

Algunos cuadros de diálogo contienen varios botones, y quieres ejecutar un código diferente según la opción que elijan. Por ejemplo, un modal de confirmación puede tener botones Confirmar y Cancelar. También tendrás que manejar esto tú mismo, añadiendo escuchadores de eventos de clic a los botones. En cada escuchador de eventos, puedes cerrar el diálogo llamando a close sobre él. El método close es un método incorporado en el diálogo que toma un argumento opcional que te permite especificar un "valor de retorno". Esto puede ...