Stratton.Cologne

Appearance

Dropdown ​

Ein zugängliches, headless Dropdown mit Trigger-Slot und frei definierbarem Panel-Inhalt. Unterstützt optionales Teleport (z. B. an body).

Live-Demo ​

Das UI-Paket @stratton-cologne/ui ist nicht installiert.

Basisbeispiel ​

vue
<script setup lang="ts">
import { Dropdown } from '@stratton-cologne/ui/dropdown'

function onSelect(value: string) {
  console.log('selected', value)
}
</script>

<template>
  <Dropdown @select="onSelect">
    <template #trigger="{ open, toggle }">
      <button type="button" @click="toggle" aria-haspopup="menu" :aria-expanded="open">
        Menü ▾
      </button>
    </template>

    <ul role="none">
      <li><button type="button" data-dropdown-item data-value="profile">Profil</button></li>
      <li><button type="button" data-dropdown-item data-value="settings">Einstellungen</button></li>
      <li><button type="button" data-dropdown-item data-value="logout">Abmelden</button></li>
    </ul>
  </Dropdown>
</template>

Props ​

  • placement: Position des Panels. Werte: bottom-start | bottom-end | top-start | top-end (Default: bottom-end).
  • offset: Abstand in Pixeln zwischen Trigger und Panel (Default: 6).
  • teleportTo: Selector oder HTMLElement für Teleport; null = kein Teleport.
  • closeOnOutside: Schließt bei Klick außerhalb (Default: true).
  • closeOnItemClick: Schließt nach Auswahl mit data-dropdown-item (Default: true).
  • useTransition: Aktiviert Transition-Hooks (Default: true).
  • transitionName / enterActiveClass / enterFromClass / enterToClass / leaveActiveClass / leaveFromClass / leaveToClass: Feintuning der Transition.

Events ​

  • select(value): Emittiert bei Klick auf ein Element mit data-dropdown-item (liest data-value).
  • open: Panel geöffnet.
  • close: Panel geschlossen.

Slots ​

  • trigger: Erhält { open, toggle, close } und open-State.
  • default: Inhalt des Panels; erhält { open, close }.

Styling (Tailwind, data-Attribute) ​

  • Root: [data-component="sc-dropdown"]
  • Trigger: [data-role="trigger"]
  • Panel: [data-role="panel"][data-placement="bottom-end"|…]

Beispiel: Panel optisch gestalten

css
[data-component="sc-dropdown"] [data-role="panel"] {
  @apply rounded-xl border bg-white shadow-lg p-2;
}