Açılır menü

Eylem menüsü

İkon, kısayol, ayırıcı ve tehlikeli öğe. Telefonda alttan açılır.

Kodu göster

<armada:dropdown>
    <x-slot:trigger><armada:button icon-trailing="chevron-down">Seçenekler</armada:button></x-slot:trigger>
    <armada:menu.item icon="pencil" kbd="⌘E">Düzenle</armada:menu.item>
    <armada:menu.item icon="copy" kbd="⌘D">Kopyala</armada:menu.item>
    <armada:menu.item icon="archive">Arşivle</armada:menu.item>
    <armada:menu.separator />
    <armada:menu.item icon="trash-2" variant="danger" kbd="⌫">Sil</armada:menu.item>
</armada:dropdown>

Kullanıcı menüsü

Başlık, gruplar ve sağa hizalı panel.

Kodu göster

<div class="sc-row" style="justify-content:flex-end">
    <armada:dropdown align="end">
        <x-slot:trigger><armada:profile name="Amiral Atik" compact /></x-slot:trigger>
        <armada:menu.header>
            <armada:avatar name="Amiral Atik" />
            <div><div class="arm-text--strong">Amiral Atik</div><div class="arm-text arm-text--sm arm-text--muted">amiral@armsys.tech</div></div>
        </armada:menu.header>
        <armada:menu.separator />
        <armada:menu.item icon="user" href="#">Profil</armada:menu.item>
        <armada:menu.item icon="settings" href="#">Ayarlar</armada:menu.item>
        <armada:menu.item icon="credit-card" href="#">Faturalama</armada:menu.item>
        <armada:menu.separator />
        <armada:menu.item icon="log-out">Çıkış yap</armada:menu.item>
    </armada:dropdown>
</div>

İşaretlenebilir öğeler

Sütun görünürlüğü gibi çoklu seçimler (menü açık kalır).

Kodu göster

<div x-data="{ cols: { ad: true, eposta: true, telefon: false } }">
    <armada:dropdown>
        <x-slot:trigger><armada:button icon="columns-3">Sütunlar</armada:button></x-slot:trigger>
        <armada:menu.heading>Görünür sütunlar</armada:menu.heading>
        @foreach (['ad' => 'Ad', 'eposta' => 'E-posta', 'telefon' => 'Telefon'] as $key => $label)
            <armada:menu.item data-keep-open x-on:click="cols.{{ $key }} = ! cols.{{ $key }}" x-bind:aria-checked="cols.{{ $key }}">
                {{ $label }}
            </armada:menu.item>
        @endforeach
    </armada:dropdown>
</div>

İkon buton tetikleyici

Tablo satırlarındaki "…" menüsü.

Kodu göster

<armada:dropdown>
    <x-slot:trigger><armada:button variant="ghost" icon="ellipsis-vertical" aria-label="Diğer" /></x-slot:trigger>
    <armada:menu.item icon="eye">Görüntüle</armada:menu.item>
    <armada:menu.item icon="share-2">Paylaş</armada:menu.item>
    <armada:menu.item icon="download" disabled>İndir (yakında)</armada:menu.item>
</armada:dropdown>

Alt menüler

Masaüstünde yana açılır, telefonda menünün içinde genişler.

Kodu göster

<armada:dropdown>
    <x-slot:trigger><armada:button icon-trailing="chevron-down">Dışa aktar</armada:button></x-slot:trigger>
    <armada:menu.item icon="copy">Bağlantıyı kopyala</armada:menu.item>
    <armada:menu.submenu label="Biçim" icon="file-down">
        <armada:menu.item icon="file-spreadsheet">Excel (.xlsx)</armada:menu.item>
        <armada:menu.item icon="file-text">CSV</armada:menu.item>
        <armada:menu.item icon="file-json">JSON</armada:menu.item>
    </armada:menu.submenu>
    <armada:menu.submenu label="Gönder" icon="send">
        <armada:menu.item icon="mail">E-posta</armada:menu.item>
        <armada:menu.item icon="message-circle">Telegram</armada:menu.item>
    </armada:menu.submenu>
</armada:dropdown>

Özellikler

<armada:dropdown>

Değerler: align: start | end · position: bottom | top

Prop	Varsayılan	Not
`trigger`	`zorunlu`
`align`	`'start'`
`position`	`'bottom'`
`width`	`null`

<armada:menu.item>

Değerler: variant: danger · checked: true/false for checkable items

Prop	Varsayılan	Not
`icon`	`null`
`href`	`null`
`kbd`	`null`
`variant`	`null`
`checked`	`null`
`disabled`	`false`