Dialog Component

Abrir Dialog

Contenido del Dialog
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt

html

<app-button data-command="show-modal" data-commandTo="dialog">Abrir Dialog</app-button>
<app-dialog id="dialog" data-title="Título del Dialog" data-animation="true">
  Contenido del Dialog
  <br />
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
  <br />
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
  <br />
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
  <br />
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
  <br />
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
  <br />
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
  <br />
  lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt
  <br />
</app-dialog>

Los archivos fuente deben estar ambos en la misma carpeta (por ejemplo, /dialog).

JavaScript:: dialog.js
CSS:: dialog.css

Para usarlo en la página hay que copiar el siguiente código:

javascript

import {DialogComponent} from '/dialog/dialog.js';
customElements.define('app-dialog', DialogComponent);

Para personalizar el componente se pueden modificar las siguientes variables CSS:

css

app-dialog {
  --dlg-width: [width-value, fit-content];
  --dlg-max-width: [width-value];
  --dlg-height: [height-value, fit-content];
  --dlg-max-height: [height-value];
  --dlg-background-color: [color-value];
  --dlg-header-background-color: [color-value];
  --dlg-title-color: [color-value];
  --dlg-close-color: [color-value];
  --dlg-close-hover-color: [color-value];
  --dlg-backdrop-color: [color-value];
  --dlg-content-width: [width-value];
}