ScrollArea

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

ScrollArea.tsx

Storybook

ScrollArea · Playground

ScrollArea, @bigbang/ui paketindedir.

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

<div className="h-60">
  <ScrollArea label="Etkinlik listesi">…</ScrollArea>
</div>;

Özellikler

label

Açıklama

Ekran okuyucu için kaydırılabilir bölgenin adı, örneğin "Etkinlik listesi". Verildiğinde alan adlandırılmış bir region bölgesi olur.

Tür

string

orientation

Açıklama

İçeriğin kaydığı yön. both iki kaydırma çubuğu gösterir.

Tür

'vertical' | 'horizontal' | 'both'

Varsayılan

'vertical'

fade

Açıklama

Gizli içerik olan kenarları soldurur.

Tür

boolean

Varsayılan

true

className

Açıklama

Yalnızca yerleşim için: sabit yükseklik gibi boyut, dış boşluk ve konum. Alan verdiğiniz boyutu doldurur.

Tür

string

childrenZorunlu

Açıklama

Alandan büyük olabilen içerik.

Tür

ReactNode

Veri öznitelikleri

• data-component="scroll-area": kök öğede.
• data-scrolling, data-has-overflow-x, data-has-overflow-y, data-overflow-x-start, data-overflow-x-end, data-overflow-y-start, data-overflow-y-end: kökte (Base UI).
• data-hovering, data-scrolling, data-orientation: kaydırma çubuğunda.