İçeriğe geç
BigBang

Sık açılanlar

    ↑↓Gezin↵AçEscKapat
    EN

    Bileşenler

    ScrollArea

    Temaya uyan ince kaydırma çubukları ve solan kenarlarla kaydırılabilir alan.

    Storybook
    Storybook
    Kaynak kod
    Kaynak kod

    Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Alanın üzerine gelip kaydırarak çubuğun belirişine ve kenarların solmasına bakın.

    Canlı örnek, StorybookStorybook'ta aç

    Dikey

    Bölüm başlığı “Dikey”

    Varsayılan yön dikeydir. Alan, verdiğiniz boyutu doldurur; burada 240 px yükseklikte bir kutu. label alanı adlandırılmış bir bölge yapar.

    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>
      );
    }

    Yatay

    Bölüm başlığı “Yatay”

    orientation="horizontal" yatay kaydırır; sağdan sola dilde soldurma yönü de döner.

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

    export default function Horizontal() {
      return (
        <div className="w-80 max-w-full rounded-md border border-line-subtle">
          <ScrollArea orientation="horizontal" label="Öğe listesi">
            <div className="flex w-max gap-sm p-md">
              {Array.from({ length: 12 }, (_, index) => (
                <span key={index} className="rounded-full bg-surface-sunken px-md py-xs">
                  Etiket {index + 1}
                </span>
              ))}
            </div>
          </ScrollArea>
        </div>
      );
    }

    İki yön

    Bölüm başlığı “İki yön”

    orientation="both" iki kaydırma çubuğu gösterir.

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

    export default function Both() {
      return (
        <div className="h-48 w-72 rounded-md border border-line-subtle">
          <ScrollArea orientation="both" label="Öğe listesi">
            <p className="m-0 w-[36rem] p-md">{Array.from({ length: 6 }, () => 'Uzun içerik kaydırılabilir alanın içinde kalır. Kaydırma çubuğu, imleç alanın üzerindeyken ya da alan kayarken belirir.').join(' ')}</p>
          </ScrollArea>
        </div>
      );
    }

    Solmasız

    Bölüm başlığı “Solmasız”

    fade={false} kenar soldurmasını kapatır; içeriğin kenara kadar tam görünmesi gerektiğinde kullanın.

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

    export default function WithoutFade() {
      return (
        <div className="h-60 w-72 rounded-md border border-line-subtle">
          <ScrollArea fade={false} 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>
      );
    }

    Açık ve koyu mod

    Bölüm başlığı “Açık ve koyu mod”

    Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

    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>
      );
    }