Dropdowns · GEDISA UI

Verwendung

Ein Dropdown öffnet ein Menü an einem Auslöser. Der erste Slot-Inhalt ist der Auslöser, darauf folgt das Menü.

Standard-Dropdown

blade

<gedisa:dropdown>
    <gedisa:button icon:trailing="chevron-down">Optionen</gedisa:button>
    <gedisa:menu>
        <gedisa:menu.item icon="pencil-square">Bearbeiten</gedisa:menu.item>
        <gedisa:menu.item icon="document-duplicate">Duplizieren</gedisa:menu.item>
        <gedisa:menu.separator />
        <gedisa:menu.item icon="trash" variant="danger">Löschen</gedisa:menu.item>
    </gedisa:menu>
</gedisa:dropdown>

Position

position und align steuern, wo das Menü erscheint.

Oben und rechts ausgerichtet

blade

<gedisa:dropdown position="top" align="start">
    <gedisa:button icon:trailing="chevron-up">Oben</gedisa:button>
    <gedisa:menu>
        <gedisa:menu.item>Erste Aktion</gedisa:menu.item>
        <gedisa:menu.item>Zweite Aktion</gedisa:menu.item>
    </gedisa:menu>
</gedisa:dropdown>
<gedisa:dropdown align="end">
    <gedisa:button icon:trailing="chevron-down">Rechts</gedisa:button>
    <gedisa:menu>
        <gedisa:menu.item>Erste Aktion</gedisa:menu.item>
        <gedisa:menu.item>Zweite Aktion</gedisa:menu.item>
    </gedisa:menu>
</gedisa:dropdown>

Profilmenü

gedisa:menu.profile zeigt Avatar, Name und E-Mail als Kopf des Menüs, optional mit Status-Punkt. Mit circle erhält ein Eintrag ein hinterlegtes rundes Icon.

Menü mit Profilkopf

Anna Schmidt a.schmidt@stadtwaldbach.de

blade

<gedisa:dropdown align="end">
    <gedisa:button variant="ghost" icon:trailing="chevron-down">Anna Schmidt</gedisa:button>
    <gedisa:menu>
        <gedisa:menu.profile name="Anna Schmidt" email="a.schmidt@stadtwaldbach.de" avatar="https://i.pravatar.cc/80?img=45" status="online" />
        <gedisa:menu.separator />
        <gedisa:menu.item circle icon="check-circle" icon:trailing="chevron-right">Mein Profil</gedisa:menu.item>
        <gedisa:menu.item circle icon="check-circle" icon:trailing="chevron-right">Einstellungen</gedisa:menu.item>
        <gedisa:menu.separator />
        <gedisa:menu.item>Hilfe</gedisa:menu.item>
        <gedisa:menu.item>Datenschutz</gedisa:menu.item>
        <gedisa:menu.separator />
        <gedisa:menu.item>Ausloggen</gedisa:menu.item>
    </gedisa:menu>
</gedisa:dropdown>

Livewire

Einträge reichen Aktionen wie wire:click an den zugrunde liegenden Button weiter.

Aktion auswählen

Noch keine Aktion

blade

<gedisa:menu.item wire:click="choose('Bearbeiten')" icon="pencil-square">Bearbeiten</gedisa:menu.item>

Referenz

Diese Übersicht umfasst die gezeigten Attribute. Verhalten, Tastaturbedienung und Positionierung stammen aus flux:dropdown.

gedisa:dropdown

Eigenschaft	Werte	Default
position	`top`, `bottom`, `left`, `right`	`bottom`
align	`start`, `center`, `end`	`start`
slot	Auslöser gefolgt von `gedisa:menu`

gedisa:menu.item

Eigenschaft	Werte	Default
icon	Name eines führenden Icons
icon:trailing	Name eines nachgestellten Icons
circle	Hinterlegt das führende Icon rund
variant	z. B. `danger` für destruktive Aktionen
wire:click, href	Aktion oder Ziel des Eintrags

gedisa:menu.profile

Eigenschaft	Werte	Default
name	Angezeigter Name
email	Zweite Zeile, wird bei Bedarf gekürzt
avatar	Bild-URL für den Avatar
status	`online`, `offline`