Dropdown

<sg-dropdown> v0.1.1

Menú flotante con elemento trigger. Soporta posicionamiento automático, header/footer fijos, y cierre inteligente.

Ejemplos

Básico

    
    example.html 
<sg-dropdown align="start">
  <button slot="trigger">Opciones ▼</button>
  <button>Opción 1</button>
  <button>Opción 2</button>
  <button>Opción 3</button>
</sg-dropdown>
    

Con header y footer

    
    example.html 
<sg-dropdown align="start">
  <button slot="trigger">Menú ▼</button>
  <div slot="header">Configuración</div>
  <button>Perfil</button>
  <button>Preferencias</button>
  <button>Cerrar sesión</button>
  <div slot="footer">v1.2.1</div>
</sg-dropdown>
    

Alineaciones

    
    example.html 
<sg-dropdown align="start">...</sg-dropdown>
<sg-dropdown align="center">...</sg-dropdown>
<sg-dropdown align="end">...</sg-dropdown>
    

Playground

Edita el código y ve los cambios en tiempo real:

API Reference

Propiedades

Prop	Tipo	Default	Descripción
`open`	`boolean`	`false`	Si el dropdown está abierto
`position`	`'top' \| 'bottom'`	`'bottom'`	Posición vertical del contenido
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alineación horizontal
`disabled`	`boolean`	`false`	Deshabilita el dropdown
`close-on-select`	`boolean`	`true`	Cerrar al seleccionar un item
`min-width`	`string`	`'200px'`	Ancho mínimo del contenido
`max-height`	`string`	`'320px'`	Altura máxima (con scroll)
`show-backdrop`	`boolean`	`false`	Mostrar overlay de fondo
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Variante de tamaño

Eventos

Evento	Tipo	Descripción
`sgOpen`	`CustomEvent<void>`	Emitido cuando se abre el dropdown
`sgClose`	`CustomEvent<void>`	Emitido cuando se cierra
`sgToggle`	`CustomEvent<boolean>`	Emitido al cambiar el estado

Slots

Slot	Descripción
`trigger`	Elemento que activa el dropdown
`(default)`	Contenido del menú
`header`	Cabecera opcional fija
`footer`	Pie opcional fijo

Métodos

Método	Retorna	Descripción
`openDropdown()`	`Promise<void>`	Abre el dropdown programáticamente
`closeDropdown()`	`Promise<void>`	Cierra el dropdown programáticamente
`toggle()`	`Promise<void>`	Alterna el estado abierto/cerrado

Cómo usar

Control programático

    
    dropdown.js 
const dropdown = document.querySelector('sg-dropdown');

// Abrir
await dropdown.openDropdown();

// Cerrar
await dropdown.closeDropdown();

// Toggle
await dropdown.toggle();
    

Escuchar eventos

    
    events.js 
dropdown.addEventListener('sgOpen', () => {
  console.log('Dropdown abierto');
});

dropdown.addEventListener('sgClose', () => {
  console.log('Dropdown cerrado');
});
    