Yapışkan işlemler
Uzun formlarda Kaydet ve Vazgeç düğmelerini içeren çubuk, sayfa kaydırılırken görünür kalır. Tailwind'in sticky sınıflarıyla kurulur; ayrı bir bileşen gerekmez.
Üstte sabit çubuk
Başlık ve düğmeleri içeren çubuğa sticky top-0 verin; kaydırılan kapsayıcının üstüne yapışır. z-10 alanların üstünde kalmasını, yarı saydam arka plan ve backdrop-blur altından geçen içeriğin okunaklı kalmasını sağlar. Örnekteki kutuyu kaydırarak deneyin.
<div class="max-h-96 overflow-y-auto rounded-sm bg-white shadow-sm dark:bg-zinc-900">
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white/90 px-5 py-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/90">
<h3 class="text-sm font-semibold text-gray-900 dark:text-zinc-100">Genel ayarlar</h3>
<div class="flex gap-2"><acun:button size="sm" variant="white">Vazgeç</acun:button><acun:button size="sm">Kaydet</acun:button></div>
</div>
<div class="grid gap-4 p-5 md:grid-cols-2">
@foreach (['Şirket adı', 'Kısa ad', 'İl', 'İlçe', 'Telefon', 'E-posta', 'Web adresi', 'Vergi no', 'Yetkili', 'Yetkili telefonu'] as $i => $etiket)
<acun:input name="alan{{ $i }}" :label="$etiket" />
@endforeach
</div>
</div>| Prop | Değerler |
|---|---|
sticky top-0 z-10 | Çubuğu kapsayıcının üstüne sabitler |
bg-white/90 backdrop-blur | Altından geçen içeriği bulanıklaştırır |
Altta sabit çubuk
Düğmeleri formun sonunda tutmak istiyorsanız çubuğu en alta koyup sticky bottom-0 verin. Kullanıcı formun neresinde olursa olsun Kaydet düğmesi ekranın altında görünür.
<div class="max-h-80 overflow-y-auto rounded-sm bg-white shadow-sm dark:bg-zinc-900">
<div class="grid gap-4 p-5 md:grid-cols-2">
@foreach (['Adres başlığı', 'Alıcı adı', 'Telefon', 'İlçe', 'Mahalle', 'Sokak', 'Bina no', 'Daire no'] as $i => $etiket)
<acun:input name="alt{{ $i }}" :label="$etiket" />
@endforeach
</div>
<div class="sticky bottom-0 flex justify-end gap-2 border-t border-gray-200 bg-white/90 px-5 py-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/90">
<acun:button size="sm" variant="white">Vazgeç</acun:button>
<acun:button size="sm">Kaydet</acun:button>
</div>
</div>| Prop | Değerler |
|---|---|
sticky bottom-0 | Çubuğu kapsayıcının altına sabitler |
Panel sayfasında
Panel düzeninde içerik alanı kendi içinde kaydırıldığı için sticky top-0 çubuğu ek ayar gerekmeden üst çubuğun hemen altına yapıştırır. Çubuğu formun içine koyarsanız Kaydet düğmesi type="submit" ile çalışır.
<acun:form wire:submit="kaydet" dirty-check>
<div class="sticky top-0 z-10 mb-6 flex items-center justify-between rounded-sm bg-white/90 px-5 py-3 shadow-sm backdrop-blur dark:bg-zinc-900/90">
<h1 class="text-base font-semibold text-gray-900 dark:text-zinc-100">Şirket ayarları</h1>
<div class="flex gap-2">
<acun:button variant="white" :href="route('ayarlar.index')">Vazgeç</acun:button>
<acun:button type="submit">Kaydet</acun:button>
</div>
</div>
<acun:card>…</acun:card>
</acun:form>| Prop | Değerler |
|---|---|
type="submit" | Çubuk formun içindeyken formu gönderir |