Aside

el aside es un componente que informa a los usuarios sobre una tarea específica y puede contener información crítica, requerir decisiones o involucrar múltiples tareas. Los aside se deben usar con moderación porque interrumpen. Su funcionamiento es similar al modal, solo que su despliegue se genera desde la derecha.

Playground

Titulo del asideclose

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Cambiar título

Ruby

Opcion 1 abrir el aside y cargar contenido remoto

<%= btn_primary "Abrir Aside",
                              href: url_contenido_aside,
                              data: {
                                "open-aside-bar": "link",
                                "aside-bar-title": "Titulo del aside",
                              } %>
                  

Opcion 2 utilizar el aside widget y mostrar el template disponible en data-open-aside-bar

<%= aside_bar title: 'Titulo del aside' do |builder| %>
  <%= builder.trigger do %>
    <a type="button"
       title="Abrir Aside"
       id="toggle-aside-show-config-list"
       class="btn btn-primary btn-md">
      <%= md_icon(:settings) %>
    </a>
  <% end %>
  <% builder.content do %>
    <div class="d-flex flex-column justify-content-between flex-nowrap h-100">
      <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. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
      voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
      beatae vitae dicta sunt explicabo.</p>
      <%= footer_actions_widget do |a| %>
        <% a.cancel(nil, data: { close_asidebar: true }) %>
        <% a.primary_action('Aceptar', type: :submit, data: { disable_with: 'Enviando...' }) %>
      <% end %>
    </div>
  <% end %>
<% end %>
                  

Html

<div class="aside-base loaded-aside">
    <div class="aside-mask"></div>
    <div role="dialog" class="aside-container size-md">
      <header class="aside-header">
          <label class="title text-truncate">Titulo del aside</label>
              <a title="Cerrar" class="close-btn">
                  <span class="material-icons notranslate">close</span>
              </a>
      </header>
      <div id="buk-loader-aside" class="aside-loader-container" style="display: none;">
          <div class="buk-loader"></div>
      </div>
      <section class="aside-body">
          <div class="aside-body--content">
              <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. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed
                ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.</p>
              <form>
                  <div class="footer-actions py-3">
                      <div>
                          <button name="button" type="button" class="btn btn-secondary btn-md" data-close-asidebar="true">
                              <span class="btn-label">Cerrar</span>
                          </button>
                      </div>
                      <div>
                          <button name="button" type="submit" class="btn btn-primary btn-md" data-btn-type="submit">
                              <span class="btn-label">Aceptar</span>
                          </button>
                      </div>
                  </div>
              </form>
          </div>
      </section>
    </div>
</div>
                  

Groovy

<g:asideComponent id="" title="Titulo del aside">
  ...
</g:asideComponent>
                

Lista de parámetros

Ruby

Parámetro

Tipo

Detalle

title

String

Texto para el título del aside

Groovy

Parámetro

Tipo

Detalle

id	String	Texto para el selector por ID del aside
title	String	Texto para el título del aside

---

Anatomía

1. Header

Encabezado del Aside. Se conforma por un título H2 y un icono a la derecha con la acción “x” cerrar

2. Contenedor

Es donde se ubica el contenido del Aside.

3. Footer Actions

Uso de componente footer actions.

Casos de uso

El Aside es un componente que se utiliza para mostrar contenido adicional.
A diferencia de un modal, los sidebar no oscurecen el DOM. Muestran contenido adicional que complementa el contenido principal de la pantalla. Permanecen visibles mientras los usuarios interactúan con el contenido principal.