Dropdown

<gstock-dropdown> | GstockDropdown

Ejemplos

Obtener el elemento seleccionado

Cuando los dropdowns se usan con menús, se puede escuchar el evento gstock-select-event para determinar qué elemento del menú fue seleccionado. El elemento del menú se expone en event.detail.item. Se pueden establecer props value para facilitar la identificación de comandos.

<div class="dropdown-selection">
  <gstock-dropdown>
    <gstock-button caret slot="trigger">Edit</gstock-button>
    <gstock-menu>
      <gstock-menu-item value="cut">Cut</gstock-menu-item>
      <gstock-menu-item value="copy">Copy</gstock-menu-item>
      <gstock-menu-item value="paste">Paste</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>
</div>

<script type="module">
  const container = document.querySelector('.dropdown-selection');
  const dropdown = container.querySelector('gstock-dropdown');

  dropdown.addEventListener('gstock-select-event', event => {
    const selectedItem = event.detail.item;
    console.log(selectedItem.value);
  });
</script>

Alternativamente, se puede escuchar el evento click en elementos de menú individuales. Ten en cuenta que, con este enfoque, los elementos de menú deshabilitados seguirán emitiendo un evento click.

<div class="dropdown-selection-alt">
  <gstock-dropdown>
    <gstock-button caret slot="trigger">Edit</gstock-button>
    <gstock-menu>
      <gstock-menu-item value="cut">Cut</gstock-menu-item>
      <gstock-menu-item value="copy">Copy</gstock-menu-item>
      <gstock-menu-item value="paste">Paste</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>
</div>

<script type="module">
  const container = document.querySelector('.dropdown-selection-alt');
  const cut = container.querySelector('gstock-menu-item[value="cut"]');
  const copy = container.querySelector('gstock-menu-item[value="copy"]');
  const paste = container.querySelector('gstock-menu-item[value="paste"]');

  cut.addEventListener('click', () => console.log('cut'));
  copy.addEventListener('click', () => console.log('copy'));
  paste.addEventListener('click', () => console.log('paste'));
</script>

Posicionamiento

La posición preferida del dropdown se puede establecer con el atributo placement. Ten en cuenta que la posición real puede variar para asegurar que el panel permanezca dentro del viewport.

Edit

Cut

Copy

Paste

Find

Replace

<gstock-dropdown placement="top-start">
  <gstock-button caret slot="trigger">Edit</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>Find</gstock-menu-item>
    <gstock-menu-item>Replace</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Distancia

La distancia entre el panel y el trigger se puede personalizar usando el atributo distance. Este valor se especifica en píxeles.

Edit

Cut

Copy

Paste

Find

Replace

<gstock-dropdown distance="30">
  <gstock-button caret slot="trigger">Edit</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>Find</gstock-menu-item>
    <gstock-menu-item>Replace</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Desplazamiento lateral

El desplazamiento del panel a lo largo del trigger se puede personalizar usando el atributo skidding. Este valor se especifica en píxeles.

Edit

Cut

Copy

Paste

Find

Replace

<gstock-dropdown skidding="30">
  <gstock-button caret slot="trigger">Edit</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>Find</gstock-menu-item>
    <gstock-menu-item>Replace</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Submenús

Para crear un submenú, anida un elemento <gstock-menu slot="submenu"> dentro de un elemento de menú.

Edit

<gstock-dropdown>
  <gstock-button caret slot="trigger">Edit</gstock-button>

  <gstock-menu class="dropdown-submenus-menu">
    <gstock-menu-item value="undo">Undo</gstock-menu-item>
    <gstock-menu-item value="redo">Redo</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item value="cut">Cut</gstock-menu-item>
    <gstock-menu-item value="copy">Copy</gstock-menu-item>
    <gstock-menu-item value="paste">Paste</gstock-menu-item>
    <gstock-divider></gstock-divider>
    <gstock-menu-item>
      Find
      <gstock-menu slot="submenu">
        <gstock-menu-item value="find">Find…</gstock-menu-item>
        <gstock-menu-item value="find-previous">Find Next</gstock-menu-item>
        <gstock-menu-item value="find-next">Find Previous</gstock-menu-item>
      </gstock-menu>
    </gstock-menu-item>
    <gstock-menu-item>
      Transformations
      <gstock-menu slot="submenu">
        <gstock-menu-item value="uppercase">Make uppercase</gstock-menu-item>
        <gstock-menu-item value="lowercase">Make lowercase</gstock-menu-item>
        <gstock-menu-item value="capitalize">Capitalize</gstock-menu-item>
      </gstock-menu>
    </gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

<style>
  .dropdown-submenus-menu {
    max-width: 200px;
  }
</style>

Contenido personalizado

El panel del dropdown acepta cualquier contenido HTML, no solo gstock-menu. Esto permite crear popovers enriquecidos con layouts personalizados.

User Profile

John Doe

john.doe@example.com

Settings

Log out

<gstock-dropdown distance="8">
  <gstock-button caret slot="trigger">User Profile</gstock-button>
  <div class="custom-content">
    <div class="custom-content__header">
      <gstock-avatar label="John Doe" initials="JD"></gstock-avatar>
      <div>
        <strong>John Doe</strong>
        <p class="custom-content__email">john.doe@example.com</p>
      </div>
    </div>
    <gstock-divider></gstock-divider>
    <div class="custom-content__footer">
      <gstock-button variant="plain" size="small">Settings</gstock-button>
      <gstock-button variant="plain" size="small" color="danger">Log out</gstock-button>
    </div>
  </div>
</gstock-dropdown>

<style>
  .custom-content {
    padding: 1rem;
    max-width: 280px;
    background-color: var(--gstock-color-surface-overlay);
  }

  .custom-content__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .custom-content__email {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gstock-legacy-color-grayscale-600);
  }

  .custom-content__footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
</style>

Trigger

Utiliza el atributo trigger para controlar cómo se activa el dropdown. Los valores soportados son click (por defecto), hover, focus y manual. Se pueden combinar varios valores separándolos con un espacio.

Trigger hover

Establece trigger="hover" para mostrar el dropdown cuando el usuario pasa el cursor sobre el elemento trigger. El panel permanece abierto mientras el cursor se mueve entre el trigger y el panel gracias a un hover bridge integrado.

Hover Me

Cut

Copy

Paste

<gstock-dropdown trigger="hover" distance="8">
  <gstock-button slot="trigger">Hover Me</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Hover con contenido personalizado

El trigger hover también funciona con contenido arbitrario en el panel, no solo con menús. Esto es útil para patrones de popover enriquecidos como indicadores de almacenamiento o paneles informativos.

Storage usage

7.5 GB of 10 GB used

<gstock-dropdown trigger="hover" distance="8">
  <gstock-icon-button slot="trigger" icon="info" size="large" variant="plain"></gstock-icon-button>
  <div class="hover-custom-content">
    <strong>Storage usage</strong>
    <gstock-progress-bar class="hover-custom-content__progress-bar" value="75" color="warning"></gstock-progress-bar>
    <span class="hover-custom-content__label">7.5 GB of 10 GB used</span>
  </div>
</gstock-dropdown>

<style>
  .hover-custom-content {
    padding: 1rem;
    max-width: 300px;
    background-color: var(--gstock-color-surface-overlay);
  }

  .hover-custom-content__progress-bar {
    --height: 8px;
    margin-top: 0.5rem;
  }

  .hover-custom-content__label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--gstock-legacy-color-grayscale-600);
  }
</style>

Triggers combinados

Se pueden combinar varios modos de trigger. Por ejemplo, trigger="hover click" abrirá el dropdown tanto al pasar el cursor como al hacer clic.

Hover or Click

Cut

Copy

Paste

<gstock-dropdown trigger="hover click" distance="8">
  <gstock-button caret slot="trigger">Hover or Click</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

Personalizar delays

Cuando se usa el modo hover, se pueden personalizar los delays de apertura y cierre con CSS custom properties.

<gstock-dropdown trigger="hover" distance="8" class="dropdown-custom-delays">
  <gstock-button slot="trigger">Custom Delays</gstock-button>
  <gstock-menu>
    <gstock-menu-item>Cut</gstock-menu-item>
    <gstock-menu-item>Copy</gstock-menu-item>
    <gstock-menu-item>Paste</gstock-menu-item>
  </gstock-menu>
</gstock-dropdown>

<style>
  .dropdown-custom-delays {
    --show-delay: 300ms;
    --hide-delay: 500ms;
  }
</style>

Custom Property	Descripción	Default
`--show-delay`	Delay antes de mostrar	`100ms`
`--hide-delay`	Delay antes de ocultar	`200ms`

Hoisting

Los paneles del dropdown se recortarán si están dentro de un contenedor con overflow: auto|hidden. El atributo hoist fuerza al panel a usar una estrategia de posicionamiento fijo, permitiéndole salir del contenedor. En este caso, el panel se posicionará relativo a su bloque contenedor, que normalmente es el viewport a menos que un ancestro use transform, perspective o filter. Consulta esta página para más detalles.

<div class="dropdown-hoist">
  <gstock-dropdown>
    <gstock-button caret slot="trigger">No Hoist</gstock-button>
    <gstock-menu>
      <gstock-menu-item>Item 1</gstock-menu-item>
      <gstock-menu-item>Item 2</gstock-menu-item>
      <gstock-menu-item>Item 3</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>

  <gstock-dropdown hoist>
    <gstock-button caret slot="trigger">Hoist</gstock-button>
    <gstock-menu>
      <gstock-menu-item>Item 1</gstock-menu-item>
      <gstock-menu-item>Item 2</gstock-menu-item>
      <gstock-menu-item>Item 3</gstock-menu-item>
    </gstock-menu>
  </gstock-dropdown>
</div>

<style>
  .dropdown-hoist {
    position: relative;
    border: solid 2px var(--gstock-legacy-color-grayscale-200);
    padding: var(--gstock-legacy-spacing-7);
    overflow: hidden;
  }
</style>