Modals

General

Base

La composición de un modal es básicamente de un header, body y un footer. Actualmente este componente toma de base la estructura de Bootstrap pero nosotros ponemos una capa extra para moldear el estilo. El contenido mínimo de un modal es el header y el body.

Modals

Pincali/EB Design System

Code

Mobile Tablet Desktop

          
            <div class="button --primary" data-toggle="modal" data-target="[data-modal-target-example]">
              Modal toggler
            </div>

            <div class="eb-modal --sm modal fade" data-modal-target-example tabindex="-1" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <div class="modal-header__left">
                      <%= tag.button icon(:fas, :xmark), class: 'button --ghost --icon', data: { dismiss: :modal } %>
                    </div>
                    <%= tag.h5 'Title' %>
                    <div class="modal-header__right">
                      <%= tag.button class: 'button --ghost' do %>
                        <%= tag.span 'Button', class: 'underline' %>
                      <% end %>
                    </div>
                  </div>
                  <div class="modal-body">
                    <p>...</p>
                  </div>
                  <div class="modal-footer">
                    <%= tag.button t('globals.save'), class: 'button --primary' %>
                    <%= tag.div t('globals.cancel'), class: 'button --inline d-none d-md-flex', data: { dismiss: :modal } %>
                  </div>
                </div>
              </div>
            </div>

Tipos

Hero

Utilizamos el modal hero cuando queremos que el encabezado se integre visualmente con el contenido. Este enfoque es ideal para anuncios, tutoriales o interacciones que necesiten captar la atención del usuario.

Code

Mobile Tablet Desktop

          
            <div class="button --primary" data-toggle="modal" data-target="[data-modal-target-example]">
              Modal toggler
            </div>

            <div class="eb-modal --sm modal fade" data-modal-target-example tabindex="-1" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-hero">
                    <div class="button --inverted --icon" data-dismiss="modal">
                      <%= icon(:fas, :xmark) %>
                    </div>
                    <section>...</section>
                  </div>
                  <div class="modal-body">
                    <p>...</p>
                  </div>
                  <div class="modal-footer">
                    <%= tag.button t('globals.save'), class: 'button --primary' %>
                    <%= tag.div t('globals.cancel'), class: 'button --inline d-none d-md-flex', data: { dismiss: :modal } %>
                  </div>
                </div>
              </div>
            </div>

Reemplazamos modal-header por modal-hero.

Fullscreen

Si usamos el modificador fullscreen podemos transformar la altura del modal para usar todo el viewport disponible en mobile. El modal-body crecerá según el espacio disponible.

Code

          
            <div class="eb-modal --fullscreen modal fade" role="dialog">...</div>

El modificador --fullscreen solo aplica para mobile.

Tamaños

Extensión

Para desktop y tablet se puede usar modificadores para adaptar el tamaño en relación a valores estáticos o dinámicos según el viewport. Para mobile siempre usamos el ancho completo del dispositivo.

Tamaño

Code

Html

            
              <div class="eb-modal --sm modal fade" role="dialog">...</div>

            
              <div class="eb-modal --md modal fade" role="dialog">...</div>

            
              <div class="eb-modal --lg modal fade" role="dialog">...</div>

Los modificadores contextuales de tamaño solo cambian el ancho y aplican solo para los breakpoints tablet y desktop.

Composición

Header

La estructura es una grid de 3 fracciones: [left], [title] y [right]. La sección izquierda está reservada para cerrar el modal, el título ocupa el espacio central y se truncará si no tiene espacio. Por último, la sección derecha se usa para acciones.

Footer

El footer utiliza el estilo estandarizado para elementos sticky en mobile. Su composición varía según el dispositivo; en mobile se muestra únicamente un CTA, mientras que en desktop siempre se presentan dos acciones [CTA] y [Cancelar] para facilitar la interacción.

En mobile, el padding inferior integra la función env(safe-area-inset-bottom) que agrega un espacio seguro entre el contenido y Home Indicator de iOS.

Device