ScrollArea

Ne zaman kullanılır

ScrollArea, sabit boyutlu bir alanın içinde kayması gereken içerik içindir: kenar çubuğundaki uzun menü, bir kart içindeki etkinlik listesi, yatay etiket şeridi. Sayfa düzeni sabit kalır, yalnızca alan kayar.

Ne zaman kullanılmaz

• Sayfanın tamamı için: Sayfa tarayıcının kendi kaydırmasıyla kaysın; ScrollArea’yı sayfayı sarmak için kullanmayın.
• Binlerce satırlık listeler için: Sanal liste kullanın; ScrollArea her öğeyi çizer.
• Kısa içerik için: İçerik sığıyorsa alanı sabit boyuta zorlamayın.

Anatomi

• Liste öğesi 1
• Liste öğesi 2
• Liste öğesi 3
• Liste öğesi 4
• Liste öğesi 5
• Liste öğesi 6
• Liste öğesi 7
• Liste öğesi 8
• Liste öğesi 9
• Liste öğesi 10
• Liste öğesi 11
• Liste öğesi 12
• Liste öğesi 13
• Liste öğesi 14
• Liste öğesi 15
• Liste öğesi 16
• Liste öğesi 17
• Liste öğesi 18
• Liste öğesi 19
• Liste öğesi 20

AçıkKoyu

Kodu kopyala

import { ScrollArea } from '@bigbang/ui';

export default function Vertical() {
  return (
    <div className="h-60 w-72 rounded-md border border-line-subtle">
      <ScrollArea label="Öğe listesi">
        <ul className="m-0 grid list-none gap-sm px-md py-sm">
          {Array.from({ length: 20 }, (_, index) => (
            <li key={index}>Liste öğesi {index + 1}</li>
          ))}
        </ul>
      </ScrollArea>
    </div>
  );
}

1. Kök: Verdiğiniz boyutu alır; kenar soldurmasının değişkenlerini taşır.
2. Görünüm alanı (viewport): Kayan öğe; sekme sırasındadır, label ile adlandırılmış bölge olur.
3. Kaydırma çubuğu: İnce iz ve yuvarlak tutamaç; yalnızca içerik taştığında çizilir.
4. Kenar soldurması: Gizli içerik olan kenarda içerik solar.

Davranış

• Fare tekerleği, dokunma ve klavye tarayıcının kendi kaydırmasını kullanır; davranış değişmez.
• Görünüm alanı odak alır: ok tuşları, Page Up, Page Down, Home, End ve Space alanı kaydırır.
• Çubuklar dinlenirken gizlidir; imleç alanın üzerindeyken ya da alan kayarken belirir.
• Alan sona ulaşınca sayfa kaymaz (overscroll-behavior: contain).
• Kenarlar, yalnızca o yönde gizli içerik varken solar.

Yönergeler

• Alana bir boyut verin (className ya da kapsayıcı); alan bu boyutu doldurur.
• Bir sayfada iç içe kayan alan açmayın.
• Alanın içinde ne olduğunu söyleyen bir label verin; özellikle sayfada birden çok alan varsa.
• Tek işlemi alanın en kenarına koymayın; soldurma onu soluk gösterebilir.

İçerik

• label kısa bir ad öbeğidir: “Etkinlik listesi”, “Etiketler”.

Türkçe	İngilizce
Öğe listesi	Item list
Etkinlik listesi	Activity list
Etiketler	Tags

İlgili bileşenler

• Tabs: Uzun sekme listeleri kendiliğinden yatay kayar.
• AppShell: Kenar çubuğu menüsü ScrollArea içinde kayar.
• Accordion: Uzun içeriği kaydırmak yerine bölümlere ayırır.