ScrollArea — ناحیهٔ اسکرول

ScrollAreaکپی کد ناحیه‌ای با ابعاد محدود است که محتوایش داخل خودش اسکرول می‌شود. نوار اسکرول از توکن‌های --tds-scroll-area-*کپی کد می‌آید و overscroll-behavior: containکپی کد اسکرول را به والد زنجیر نمی‌کند.

• برای فهرست طولانی داخل کارت یا پنل، و ردیف افقی برچسب‌ها.
• برای هر جایی که ارتفاع محدود است.
• نه برای اسکرول کل صفحه، و نه برای جدول داده با سرستون ثابت (DataTable).

وضعیت: beta · لایه: ۲ (@tokapps/primitivesکپی کد) · کد: packages/primitives/src/scroll-area/کپی کد

import { ScrollArea } from '@tokapps/primitives';

نمونهٔ زنده

کد قابل کپی

اسکرول عمودی با ارتفاع محدود

import { ScrollArea } from '@tokapps/primitives';<ScrollArea aria-label="فهرست نظرها" maxBlockSize="12rem">  {comments.map((c) => (    <p key={c.id}>{c.text}</p>  ))}</ScrollArea>

ردیف افقی با محو شدن لبه

import { Inline, ScrollArea } from '@tokapps/primitives';<ScrollArea orientation="horizontal" fade aria-label="برچسب‌ها">  <Inline wrap={false} gap={4}>    {tags.map((t) => (      <span key={t}>{t}</span>    ))}  </Inline></ScrollArea>

نوار اسکرول پنهان با محو شدن

<ScrollArea scrollbar="hidden" fade aria-label="اعلان‌ها" maxBlockSize="10rem">  {notifications.map((n) => (    <p key={n.id}>{n.text}</p>  ))}</ScrollArea>

دسترس‌پذیری

ناحیهٔ اسکرول‌پذیر با aria-labelکپی کد معنادار معرفی می‌شود تا با صفحه‌کلید (کلیدهای جهتی و Page Up/Down) قابل پیمایش باشد. جزئیات در ScrollArea.a11y.tsکپی کد.