Dialog

Muestra contenido superpuesto como formularios, mensajes o confirmaciones.

Estructura

Un dialog está constituido por:

• dialog: Contenedor
  • dialog-content: Contenedor del dialog
    • dialog-card: Card contenedor, puedes usar las clases de card. Más info aquí
      • dialog-header: Cabecera del dialog, donde va el título y el botón de cerrar
      • dialog-body: Contenido del dialog
      • dialog-footer: Zona de accion del dialog, puedes agregar botones

Uso básico

Por defecto el dialog se muestra alineado a la parte superior

info

Para que el dialog se muestre se debe usar la clase is-active

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

<div class="dialog is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Centrado

Para centrar el dialog a la pantalla usar la clase dialog-centered en conjunto con la clase dialog

Preview

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

Code

<div class="dialog dialog-centered is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Cuerpo escrolleable

Para convertir el cuerpo de un dialog en scrollable usar la clase dialog-scrollable en conjunto con la clase dialog

Preview

Título del dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec dicuntur inconstantissime. At coluit ipse amicitias. Memini me adesse P. Id est enim, de quo quaerimus.

Quae sequuntur igitur? Sed quid sentiat, non videtis. Idemne potest esse dies saepius, qui semel fuit? Memini vero, inquam;

Sit hoc ultimum bonorum, quod nunc a me defenditur; Bork Cur haec eadem Democritus? Huius, Lyco, oratione locuples, rebus ipsis ielunior.

Tecum optime, deinde etiam cum mediocri amico. Multoque hoc melius nos veriusque quam Stoici. Maximus dolor, inquit, brevis est. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Satis est ad hoc responsum. Respondeat totidem verbis. Quo modo autem philosophus loquitur? Quare attende, quaeso.

Duo Reges: constructio interrete. Memini vero, inquam; Sed ea mala virtuti magnitudine obruebantur. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Que Manilium, ab iisque M. Summus dolor plures dies manere non potest?

Code

<div class="dialog dialog-scrollable is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec
            dicuntur inconstantissime. At coluit ipse amicitias. Memini me
            adesse P. Id est enim, de quo quaerimus.
          </p>
          <p>
            Quae sequuntur igitur? Sed quid sentiat, non videtis. Idemne potest
            esse dies saepius, qui semel fuit? Memini vero, inquam;
          </p>
          <p>
            Sit hoc ultimum bonorum, quod nunc a me defenditur; Bork Cur haec
            eadem Democritus? Huius, Lyco, oratione locuples, rebus ipsis
            ielunior.
          </p>
          <p>
            Tecum optime, deinde etiam cum mediocri amico. Multoque hoc melius
            nos veriusque quam Stoici. Maximus dolor, inquit, brevis est. Quae
            hic rei publicae vulnera inponebat, eadem ille sanabat. Satis est ad
            hoc responsum. Respondeat totidem verbis. Quo modo autem philosophus
            loquitur? Quare attende, quaeso.
          </p>
          <p>
            Duo Reges: constructio interrete. Memini vero, inquam; Sed ea mala
            virtuti magnitudine obruebantur. Diodorus, eius auditor, adiungit ad
            honestatem vacuitatem doloris. Que Manilium, ab iisque M. Summus
            dolor plures dies manere non potest?
          </p>
        </div>
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Clases del card

Puedes usar todas las clases del componente card en el dialog-card por ejemplo

• is-outlined: Para que no tenga elevación y solo maneje bordeado
• elevation-{number}: Para dar un efecto de elevación

info

Mas información visita el componente card

Outlined

Preview

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

Code

<div class="dialog is-active">
  <div class="dialog-overlay">
    <div class="dialog-card is-outlined">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Image

Preview

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

Code

<link rel="preload" as="image" href="/pucoui/img/pucoui-img-1-lg.jpeg" />
<div class="dialog is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Image  -->
      <figure class="image is-16by9">
        <img src="/pucoui/img/pucoui-img-1-lg.jpeg" />
      </figure>

      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>