Modal · Armada

Form modalı

Telefonda bottom sheet olur; tutamaçtan aşağı çekerek kapanır.

Kodu göster

<armada:modal.trigger name="edit-profile">
    <armada:button icon="pencil">Profili düzenle</armada:button>
</armada:modal.trigger>

<armada:modal name="edit-profile" title="Profili düzenle" description="Değişiklikler hemen yayınlanır.">
    <div class="sc-col">
        <armada:input label="Ad soyad" value="Amiral Atik" />
        <armada:input label="Kullanıcı adı" prefix="@" value="amiral" />
        <armada:textarea label="Biyografi" maxlength="160" />
    </div>
    <x-slot:footer>
        <armada:modal.close><armada:button>Vazgeç</armada:button></armada:modal.close>
        <armada:button variant="solid" tone="primary" x-on:click="$el.closest('dialog').close(); Armada.toast({ title: 'Profil kaydedildi', tone: 'success' })">Kaydet</armada:button>
    </x-slot:footer>
</armada:modal>

Onay diyaloğu

İkonlu, küçük ve tehlikeli eylem.

Kodu göster

<armada:modal.trigger name="confirm-delete">
    <armada:button variant="soft" tone="danger" icon="trash-2">Projeyi sil</armada:button>
</armada:modal.trigger>

<armada:modal name="confirm-delete" size="sm" icon="triangle-alert" tone="danger" title="Projeyi sil?" description="Bu işlem geri alınamaz. Tüm dosyalar ve geçmiş silinir.">
    <x-slot:footer>
        <armada:modal.close><armada:button>Vazgeç</armada:button></armada:modal.close>
        <armada:modal.close><armada:button variant="solid" tone="danger">Evet, sil</armada:button></armada:modal.close>
    </x-slot:footer>
</armada:modal>

Boyutlar ve kapatılamayan modal

dismissible=false iken arka plana tıklama veya Esc kapatmaz.

Kodu göster

<div class="sc-row">
    @foreach (['sm', 'md', 'lg', 'xl'] as $s)
        <armada:modal.trigger :name="'size-'.$s"><armada:button>{{ strtoupper($s) }}</armada:button></armada:modal.trigger>
        <armada:modal :name="'size-'.$s" :size="$s" :title="'Boyut: '.$s"><armada:text>Modal içeriği.</armada:text></armada:modal>
    @endforeach
    <armada:modal.trigger name="locked"><armada:button icon="lock">Zorunlu</armada:button></armada:modal.trigger>
    <armada:modal name="locked" title="Şartları kabul edin" :dismissible="false" :closable="false">
        <armada:text>Devam etmek için kabul etmeniz gerekiyor.</armada:text>
        <x-slot:footer><armada:modal.close><armada:button variant="solid" tone="primary">Kabul ediyorum</armada:button></armada:modal.close></x-slot:footer>
    </armada:modal>
</div>

Livewire ve JS'ten açma

// Livewire
$this->dispatch('modal-show', name: 'edit-profile');

// Alpine
$dispatch('modal-show', { name: 'edit-profile' })

// JavaScript
Armada.modal('edit-profile').show();

Kodu göster

@php
    $snippet = <<<'PHP'
    // Livewire
    $this->dispatch('modal-show', name: 'edit-profile');

    // Alpine
    $dispatch('modal-show', { name: 'edit-profile' })

    // JavaScript
    Armada.modal('edit-profile').show();
    PHP;
@endphp
<armada:code language="php" :code="$snippet" />

Ö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`