Drawer ve bottom sheet

Sağdan drawer

Filtre ve detay panelleri; telefonda tam genişlik.

Kodu göster

<armada:modal.trigger name="filters"><armada:button icon="sliders-horizontal">Filtreler</armada:button></armada:modal.trigger>
<armada:modal name="filters" variant="drawer" title="Filtreler">
    <div class="sc-col">
        <armada:combobox label="Durum" multiple :options="['paid' => 'Ödendi', 'pending' => 'Bekliyor', 'refund' => 'İade']" />
        <armada:date-picker label="Tarih aralığı" mode="range" presets />
        <armada:slider label="Tutar" range :min="0" :max="10000" :value="[0, 5000]" suffix=" ₺" />
    </div>
    <x-slot:footer>
        <armada:modal.close><armada:button>Temizle</armada:button></armada:modal.close>
        <armada:modal.close><armada:button variant="solid" tone="primary">Uygula</armada:button></armada:modal.close>
    </x-slot:footer>
</armada:modal>

Soldan drawer

Kodu göster

<armada:modal.trigger name="left-drawer"><armada:button icon="panel-left">Soldan aç</armada:button></armada:modal.trigger>
<armada:modal name="left-drawer" variant="drawer" position="left" size="sm" title="Menü">
    <armada:navlist>
        <armada:navlist.item icon="house" current>Ana sayfa</armada:navlist.item>
        <armada:navlist.item icon="inbox" badge="4">Gelen</armada:navlist.item>
        <armada:navlist.item icon="settings">Ayarlar</armada:navlist.item>
    </armada:navlist>
</armada:modal>

Bottom sheet

Her ekran boyutunda alttan açılır; paylaşım menüleri için.

Kodu göster

<armada:modal.trigger name="share"><armada:button icon="share-2">Paylaş</armada:button></armada:modal.trigger>
<armada:modal name="share" variant="sheet" title="Paylaş">
    <armada:list>
        <armada:list.item icon="link" title="Bağlantıyı kopyala" x-on:click="$el.closest('dialog').close(); Armada.toast({ title: 'Bağlantı kopyalandı', tone: 'success' })" />
        <armada:list.item icon="mail" title="E-posta ile gönder" />
        <armada:list.item icon="message-circle" title="Mesaj olarak gönder" />
        <armada:list.item icon="qr-code" title="QR kod göster" />
    </armada:list>
</armada:modal>

Özellikler

<armada:modal>

Prop	Varsayılan	Not
`name`	`zorunlu`	open with $dispatch('modal-show', { name }) · Livewire: $this->dispatch('modal-show', name: '…') · JS: Armada.modal('…').show()
`title`	`null`
`description`	`null`
`icon`	`null`
`tone`	`null`
`variant`	`'modal'`	modal \| drawer \| sheet
`position`	`'right'`	drawer: right \| left
`size`	`'md'`	modal: sm \| md \| lg \| xl \| full · drawer: sm \| md \| lg
`footer`	`null`
`closable`	`true`
`dismissible`	`true`	close on backdrop click / Escape
`sheet-on-mobile`	`true`