Modales

Los modales enfocan la atención del usuario exclusivamente en una tarea o información a través de una ventana que se encuentra en la parte superior del contenido de la página.

Playground

Esta demostración le permite obtener una vista previa del componente de la tabla de datos y sus opciones de configuración.

Título de Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

mdlgxl

Footer

Cambiar título

Ruby

Opcion 1: usar el widget del modal

<%= btn_primary("Abrir Modal", data: { toggle: 'modal', target: "#id_modal" }) %>


  <%= modal_widget id: 'id_modal', show: false, size: 'md' do |modal| %>
      <% modal.title 'Título del modal' %>
      <% modal.body do %>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      <% end %>
      <%= modal.footer do %>
          <%= footer_actions_widget do |footer| %>
              <% footer.cancel_modal "Cerrar" %>
              <% footer.primary_action "Guardar", type: :submit %>
          <% end %>
      <% end %>
  <% end %>
                  

Opcion 2: Usar el modal JS

<%= footer_actions_widget do |a| %>
    <% a.primary_action("Ver Modal",
                          data: {
                            modal: true,
                            modal_size: 'md',
                            modal_title: "titulo del modal",
                            turbolinks: false,
                            toggle: 'tooltip'
                          }) %>
    <% end %>

Html

  <div class="modal fade show" id="modal-doc" aria-labelledby="exampleModalLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-md modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="alert_container__title mb-1">Título del modal</h2>
          <button class="close" data-dismiss="modal" aria-label="Close">
            <span class="material-icons notranslate" aria-hidden="true">close</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        <div class="modal-footer d-flex justify-content-between">
            <button class="btn btn-secondary btn-md" type="submit" data-dismiss="modal">
              <span class="btn-label">Cancelar</span>
            </button>
              <button class="btn btn-primary btn-md" type="submit">
              <span class="btn-label">Guardar</span>
            </button>
          </div>
      </div>
    </div>
  </div>
                  

Groovy

<g:modalComponent
        id=""
        title="Título del modal"
        size="md"
>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class="modal-footer modal-footer-onboarding">
    <g:buttonComponent id="button" label="Guardar" />
  </div>
</g:modalComponent>
                

Lista de parámetros

Ruby

Parámetro

Tipo

Detalle

title	String	Define el titulo que tendrá el modal
body	block	Permite tener un block para el contenido del body
footer	block	Permite tener un block para el contenido del footer
id	String	El id vincula el activador con el modal que abre
show	Boolean	Permite que al entrar a esta vista el modal este abierto, false para tener que activar el modal para abrir
backdrop	Boolean	True: permite salir del modal con clicks fuera false: no permite salir del modal con clicks fuera y oscurece detrás la pantalla
size	md | lg | xl	Determina el tamaño del modal

Groovy

Parámetro

Tipo

Detalle

id	String	Determina el ID dentro del DOM del componente
title	String	Determina el título del modal
size	md | lg	Determina el tamaño del modal

---

Visión General

Los modales se utilizan para presentar información crítica o solicitar la entrada del usuario necesaria para completar un flujo de trabajo. Los modales interrumpen el flujo de trabajo de un usuario, abriéndose sobre la vista principal de trabajo. Cuando está activo, el usuario no puede acceder al contenido de la página y no puede volver a su flujo de trabajo anterior hasta que se completa la tarea dentro del modal o el usuario descarta el modal cerrándolo o cancelándolo desde el footer actions.  Si bien son efectivos cuando se usan correctamente, los modales deben usarse con moderación para limitar la interrupción del usuario.

Anatomía

1. Header

Encabezado del modal. Se conforma por un título H2 y una acción a la derecha para cerrar el modal.

2. Contenedor

Es donde se ubicará el contenido del modal.

3. Footer Actions

Uso de componente footer actions. Puede tener una o dos acciones (Cancelar/cerrar - Guardar/aceptar)

---

Cuando usar

Requerir una respuesta inmediata del usuario

Para solicitar información que impide que el sistema continúe con un proceso iniciado por el usuario.

Confirmar una decisión de usuario

Para confirmar las decisiones del usuario. Describe claramente la acción que se está confirmando y explica las posibles consecuencias que puede causar. Tanto el título como los botones deben reflejar la acción que ocurrirá. Si la acción es destructiva o irreversible utiliza botones destructivos especificados en el helper de botones del componente footer_actions.

Continuar procesos

Para realizar acciones sobre una tarea específica sin la necesidad de cambiar de vista.

Dimensiones

Hay tres tamaños de modales en Buk:

Modal MD, LG Y XL. Se adapta al contenido del modal. Los modales con mensajes cortos deben usar un modal pequeño para controlar mejor los espacios vacíos. Para componentes complejos, como por ejemplo un data table, el modal lg u xl , sería el más indicado. El alto mínimo de los modales es de 300px. Los modales pueden contener distintos componentes, el uso xl se utiliza para casos puntuales dentro de la plataforma, donde el contenido es muy extenso, por ejemplo el componente “agregar participantes”.

Comportamiento del scroll

Los modales, como vimos en el ejemplo anterior, difieren en ancho, mientras que la altura está determinada por el contenido. Una vez que alcanza un cierto umbral (tamaño por definir), el contenido del cuerpo se desplazará dentro de un scroll mientras el encabezado y el pie de página permanecen fijos hasta que se alcance la parte inferior del diálogo modal.

El contenido modal nunca debe desplazarse horizontalmente, solo verticalmente.

Ejemplo de modal con contenido dentro de un scroll.

Alineación de contenido

Para ayudar a los usuarios a ordenar la información, el texto del cuerpo del modal en la gran mayoría de los casos, se alinea hacia la izquierda, pero también puede ir alineado al centro, sobre todo cuando se trata de un modal informativo. En el caso del Header, el título siempre debe ir alineado a la izquierda.

Comportamiento responsivo

Footer Actions en modales

El modal puede llevar distintos tipos de acciones, para ello se utiliza el componente “footer_Actions” como helper.

Ver la documentación completa del Footer Actions Haciendo clic aquí

Acciones Primarias permitidas

• Aceptar
• Guardar
• Crear
• Enviar
• Siguiente
• Agregar
• Descargar (Ej: En exportadores e importadores)
• Exportar (Caso puntual en el modal de exportadores)
• Descargar template / Seleccionar archivo
• Añadir

Acciones Secundarias permitidas

• Cancelar
• Volver
• Cerrar

Cuando no usar modales

En conclusión, los modales afectan la experiencia del usuario, ya que los visitantes deben interactuar con ellos. Sin embargo, no siempre tiene que ser un efecto negativo. En general, solo deberíamos usar modales cuando sea estrictamente necesario y de una manera que no frustre a los usuarios.

Cuando se requiera mostrar una gran cantidad de información y que el usuario se enfrente a varias decisiones o se necesite mostrar una gran cantidad de componentes dentro del modal, es mejor centralizar todo en una vista, ya que el usuario podrá disponer de un mayor espacio para realizar tareas complejas.

Ahora bien, existen excepciones dentro de la plataforma, como el modal de la ficha del postulante, el cual funciona como punto medio para interactuar con un postulante, puesto que una vista nueva cortaría el flujo existente y el usuario tendría que volver a cargar la vista del proceso para volver.

El modal de 1200px de ancho dispone de un espacio más amplio para que el reclutador evalúe e interactúe con el postulante, entregando una mayor fluidez para abordar acciones sin tener que salir de la vista principal.