Kaydırma alanı
Uzun ya da geniş içeriği sınırlı bir kutunun içinde kaydırır. Kaydırma çubuğu ince çizilir ve açık/koyu temaya uyar; ayrı bir JavaScript kütüphanesi gerekmez. İstenirse gizli içerik kalan kenarlar yumuşakça soluklaşır.
Dikey kaydırma
İçerik max-height değerini aşınca yalnızca alanın içi kayar, sayfa yerinde kalır. Değeri CSS uzunluğu (15rem, 50vh) ya da piksel sayısı olarak verin; max-h-60 gibi bir sınıf da aynı işi görür. Alan Tab ile odaklanır ve ok tuşları, Page Up / Page Down ile kaydırılır. label verilirse ekran okuyucu alanı bu adla bir bölge olarak tanıtır.
<acun:scroll-area max-height="15rem" label="Son satılan ürünler" class="rounded-sm border border-gray-200 dark:border-zinc-700">
<ul class="divide-y divide-gray-100 dark:divide-zinc-800">
@foreach (['Kablosuz kulaklık', 'Mekanik klavye', 'USB-C şarj aleti', '27 inç monitör', 'Ergonomik sandalye', 'Laptop standı', 'Web kamerası', 'Harici SSD 1 TB', 'Bluetooth hoparlör', 'Akıllı saat'] as $urun)
<li class="flex items-center justify-between gap-4 px-4 py-2.5 text-sm">
<span class="text-gray-900 dark:text-zinc-100">{{ $urun }}</span>
<span class="text-xs text-gray-500 dark:text-zinc-400">{{ 20 - $loop->index }} Eylül</span>
</li>
@endforeach
</ul>
</acun:scroll-area>| Prop | Değerler |
|---|---|
max-height | CSS uzunluğu ya da piksel sayısı |
height | Sabit yükseklik, aynı biçimde |
label | Ekran okuyucu adı (role="region") |
Yatay kaydırma
direction="horizontal" içeriği yan yana kaydırır; alanın genişliğini üstteki kapsayıcı belirler. İçerik kendi genişliğini korumalıdır, bu yüzden satırı w-max ile sarın. Dokunmatik ekranda parmakla, farede Shift + tekerlekle kaydırılır. İki yönde birden kaydırmak için both kullanın.
<acun:scroll-area direction="horizontal" label="Kategori özetleri">
<div class="flex w-max gap-3 pb-3">
@foreach (['Elektronik' => 42, 'Giyim' => 18, 'Ev ve yaşam' => 35, 'Kozmetik' => 27, 'Spor' => 22, 'Kitap' => 31, 'Oyuncak' => 56] as $kategori => $siparis)
<div class="w-48 rounded-sm border border-gray-200 p-4 dark:border-zinc-700">
<p class="text-xs text-gray-500 dark:text-zinc-400">{{ $kategori }}</p>
<p class="mt-1 text-xl font-semibold text-gray-900 dark:text-zinc-100">{{ $siparis }} sipariş</p>
</div>
@endforeach
</div>
</acun:scroll-area>| Prop | Değerler |
|---|---|
direction | vertical | horizontal | both |
Kenar gölgeleri
shadows açıkken, arkasında görünmeyen içerik kalan kenar yumuşakça soluklaşır; başa ya da sona varınca o kenar yeniden netleşir. Solma bir maske olduğu için kartın, çekmecenin ya da sayfanın arka plan rengine bakmaz. Kaydırma konumunu küçük bir Alpine dinleyicisi izler; içerik büyüyüp küçüldüğünde ya da Livewire yeni satır eklediğinde de yeniden hesaplanır.
<acun:scroll-area max-height="12rem" shadows label="Müşteri notları" class="text-sm">
<div class="space-y-3 pe-3">
<p>Müşteri arandı; iade talebi onaylandı ve iade kargo kodu e-postayla gönderildi.</p>
<p>Fatura adresi şirket adresiyle değiştirildi. Muhasebe birimi, gerektiğinde ulaşılabilecek kişi olarak kaydedildi.</p>
<p>Toplu alım için indirim istendi. Talep satış ekibine iletildi, dönüş bekleniyor.</p>
<p>Bir sonraki siparişte hediye paketi yapılacak; not, depo ekibinin ekranında görünmeli.</p>
<p>Hafta içi adreste bulunmadığı için teslimatlar cumartesi gününe göre yeniden planlanmalı.</p>
</div>
</acun:scroll-area>
<acun:scroll-area direction="horizontal" shadows label="Kategori filtreleri" class="self-start">
<div class="flex w-max gap-2 py-1">
@foreach (['Tümü', 'Elektronik', 'Ev ve yaşam', 'Giyim ve aksesuar', 'Kozmetik', 'Spor ve outdoor', 'Kitap ve kırtasiye'] as $kategori)
<acun:badge :variant="$loop->first ? 'primary' : 'secondary'">{{ $kategori }}</acun:badge>
@endforeach
</div>
</acun:scroll-area>| Prop | Değerler |
|---|---|
shadows | true | false |
Kart ve çekmece içinde
Kartta gövde boşluğunu :padding="false" ile kaldırıp alanı kartın kenarına kadar uzatın. Çekmecede gövdenin kendi kaydırmasını body-class="flex min-h-0 flex-1 flex-col" ile kapatın ve alana min-h-0 flex-1 verin: böylece başlık ve alt çubuk yerinde kalır, yalnızca aradaki içerik kayar.
<acun:card title="Bildirimler" :padding="false" class="max-w-sm">
<acun:scroll-area max-height="13rem" shadows label="Bildirimler">
<ul class="divide-y divide-gray-100 text-sm dark:divide-zinc-800">
@foreach (['#10482 numaralı sipariş teslim edildi.', 'Kablosuz kulaklık için 3 yeni yorum geldi.', '#10475 numaralı siparişin kargosu gecikti.', 'Destek talebine yeni temsilci atandı.', 'Eylül satış raporu hazır.', 'Kadıköy deposunun stok listesi güncellendi.', 'Aylık fatura özeti gönderildi.'] as $bildirim)
<li class="px-5 py-3">{{ $bildirim }}</li>
@endforeach
</ul>
</acun:scroll-area>
<acun:slot:footer>
<acun:drawer.trigger name="scroll-area-history"><acun:button variant="white" size="sm">Tüm geçmişi aç</acun:button></acun:drawer.trigger>
</acun:slot:footer>
</acun:card>
<acun:drawer name="scroll-area-history" title="Sipariş geçmişi" body-class="flex min-h-0 flex-1 flex-col">
<acun:scroll-area shadows label="Sipariş geçmişi" class="min-h-0 flex-1 p-5">
<ol class="space-y-4 text-sm">
@foreach (range(1, 18) as $gun)
<li>
<p class="font-medium text-gray-900 dark:text-zinc-100">{{ 19 - $gun }} Eylül 2026</p>
<p class="text-gray-500 dark:text-zinc-400">Kadıköy deposu · {{ 4 + $gun % 5 }} sipariş kargolandı</p>
</li>
@endforeach
</ol>
</acun:scroll-area>
<acun:slot:footer>
<acun:drawer.close><acun:button variant="white">Kapat</acun:button></acun:drawer.close>
</acun:slot:footer>
</acun:drawer>Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
direction | vertical | vertical · horizontal · both: hangi yönde kaydırılacağı |
max-height | null | En büyük yükseklik: CSS uzunluğu (16rem, 50vh) ya da piksel sayısı; yerine max-h-* sınıfı da verilebilir |
height | null | Sabit yükseklik, max-height ile aynı biçimde; yerine h-* sınıfı da verilebilir |
shadows | false | Gizli içerik kalan kenarları soluklaştırır (Alpine ile) |
label | null | Ekran okuyucu adı; verilince alan role="region" olur |