Dropdowns

General

Base

Los dropdowns muestran una lista de opciones en una superficie temporal, estos son heredados de Bootstrap, por lo que las mecánicas y funcionalidad son muy similares.

Dropdowns

Shared Design System

Bottom sheet

Para mobile, y al igual que los modales, usamos la versión --bottom-sheet.

Mobile Tablet Desktop

          
            <div class="dropdown --bottom-sheet">
              <a class="button --outline" data-toggle="dropdown">
                <i class="far fa-cog"></i> Opciones
              </a>
              <div class="dropdown-menu">
                <div class="dropdown-content">
                  <a class="dropdown-item">Opción 1</a>
                  <a class="dropdown-item">Opción 2</a>
                  <a class="dropdown-item">Opción 3</a>
                </div>
              </div>
            </div>

El modificador --bottom-sheet solo aplica para mobile y a diferencia de los Modales, esta opción no es por defecto.

Posición

Alineación

Podemos cambiar la alineación del dropdown usando las clases utilitarias para cambiar la posición en la que se justifica el dropdown, esto es muy útil cuando el toggler está cerca de algún borde del viewport. Esto solo aplica para desktop

Code

          
            <div class="dropdown --bottom-sheet">
              <div class="button --outline --icon dropdown-toggle" data-toggle="dropdown">
                Derecha
                <i class="far fa-angle-down"></i>
              </div>
              <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-content">
                  <div class="dropdown-header">
                    <div class="dropdown-title">
                      <div>Dropdown</div>
                    </div>
                  </div>
                  <section>
                    <a class="dropdown-item" href="#">Item A</a>
                    <a class="dropdown-item" href="#">Item B</a>
                    <a class="dropdown-item" href="#">Item C</a>
                  </section>
                </div>
              </div>
            </div>

Tipos

Icono

Code

          
            <div class="dropdown --bottom-sheet">
              <div class="button --outline --icon dropdown-toggle" data-toggle="dropdown">
                Iconos
                <i class="far fa-angle-down"></i>
              </div>
              <div class="dropdown-menu">
                <div class="dropdown-content">
                  <div class="dropdown-header">
                    <div class="dropdown-title">
                      <div>Iconos</div>
                    </div>
                  </div>
                  <section>
                    <a href="#" class="dropdown-item"><i class="fal fa-fw fa-tennis-ball mr:066"></i>Tennis</a>
                    <a href="#" class="dropdown-item"><i class="fal fa-fw fa-baseball mr:066"></i>Baseball</a>
                    <a href="#" class="dropdown-item"><i class="fal fa-fw fa-bowling-ball mr:066"></i>Bowling</a>
                  </section>
                </div>
              </div>
            </div>

Se debe usar la clase utilitaria fa-fw para dar un ancho fijo a los iconos y así el contenido esté siempre alineado en relación al texto.

Descripción

Usado generalmente cuando una acción es más compleja o requiere explicar el contexto de la acción.

Code

          
            <div class="dropdown --bottom-sheet">
              <div class="button --outline --icon dropdown-toggle" data-toggle="dropdown">
                Descripción
                <i class="far fa-angle-down"></i>
              </div>
              <div class="dropdown-menu --minw-2xl">
                <div class="dropdown-content">
                  <div class="dropdown-header">
                    <div class="dropdown-title">
                      <div>Dropdown</div>
                    </div>
                  </div>
                  <section>
                    <a class="dropdown-item" href="#">Título
                      <span class="d-block text-secondary text-sm">Descripción.</span>
                    </a>
                    <a class="dropdown-item" href="#">Título
                      <span class="d-block text-secondary text-sm">Descripción</span>
                    </a>
                  </section>
                </div>
              </div>
            </div>

Select

Usamos easy-select para construir nuestro propio select tipo dropdown. También tenemos una versión para forms.

En easy_select.rb puedes encontrar la configuración completa del dropdown.

Code

Rails

          
            <%= easy_select_tag(
                  value: value,
                  choices: choices,
                  placeholder: t('title'),
                  mobile_header_title: t('.mobile_title'),
                  id: :some_id,
                  search: {
                    placeholder: t('.placeholder'),
                  }
                )
            %>