ددیگ

Scroll Area

ناحیه‌ای با ارتفاع یا عرض ثابت که محتوای بلندتر از خودش را اسکرول می‌کند و به‌جای نوار بومی مرورگر، یک نوار باریک و هماهنگ با تم نشان می‌دهد. در چیدمان راست‌به‌چپ، نوار عمودی خودکار سمت چپ می‌نشیند.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API و Reka UISvelte ۵ با runes و Bits UIانگولار با signals و Angular CDK

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

شهرهای تحت پوشش

تهران
مشهد
اصفهان
کرج
شیراز
تبریز
قم
اهواز
کرمانشاه
ارومیه
رشت
زاهدان
همدان
کرمان
یزد

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

نصب سریع با لینک سخت و دیسک مشترکپکیج‌منیجر پیش‌فرض Node.jsYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/scroll-area.json
npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/scroll-area.json
yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/scroll-area.json
bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/scroll-area.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

استفاده

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea className="h-72 w-48 rounded-md border">
  محتوای بلند…
</ScrollArea>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

ترکیب اجزا

ارتفاع (یا عرض) را روی خود ScrollArea بدهید، وگرنه ناحیه با محتوا رشد می‌کند و هیچ‌وقت اسکرول نمی‌شود. محتوا داخل یک Viewport رندر می‌شود؛ padding را روی یک div داخلی بگذارید نه روی ScrollArea، تا نوار اسکرول به لبهٔ کادر بچسبد و فاصلهٔ محتوا از نوار جدا بماند. نسخهٔ پیش‌فرض فقط نوار عمودی می‌سازد؛ برای اسکرول افقی ScrollBar را با orientation=«horizontal» خودتان اضافه کنید.

دسترس‌پذیری

  • Viewport با tabIndex قابل فوکوس است، پس کاربر صفحه‌کلید می‌تواند با کلیدهای جهت‌دار و PageUp/PageDown داخل ناحیه اسکرول کند.
  • نوار سفارشی جای اسکرول بومی را می‌گیرد ولی رفتار چرخ ماوس و لمس دست‌نخورده باقی می‌ماند.
  • ناحیه‌ای که اسکرول می‌شود بهتر است عنوان یا برچسبی داشته باشد؛ برای فهرست‌های بلند یک aria-label روی ScrollArea بگذارید.
  • ارتفاع ثابت را با واحد نسبی بدهید تا با بزرگ‌کردن اندازهٔ قلم مرورگر، محتوا بریده نشود.
  • در راست‌به‌چپ نوار عمودی سمت چپ می‌نشیند؛ این را در محاسبهٔ فاصله‌های داخلی در نظر بگیرید تا متن زیر نوار نرود.

مرجع API

ScrollArea

ویژگینوعپیش‌فرضتوضیح
type"auto" | "always" | "scroll" | "hover""hover"زمان نمایش نوار: hover هنگام نزدیک شدن نشانگر، scroll هنگام اسکرول، always همیشه و auto فقط وقتی محتوا سرریز کند.
scrollHideDelaynumber600میلی‌ثانیه تا پنهان شدن نوار بعد از توقف اسکرول (در حالت‌های hover و scroll).
dir"rtl" | "ltr"—جهت ناحیه؛ معمولاً از dir صفحه ارث می‌رسد و جای نوار عمودی را تعیین می‌کند.
classNamestring—اینجا حتماً ارتفاع یا عرض بدهید؛ بدون اندازهٔ ثابت اسکرولی در کار نیست.

ScrollBar

نوار عمودی خودکار داخل ScrollArea رندر می‌شود؛ این کامپوننت را فقط برای نوار افقی دستی اضافه کنید.

ویژگینوعپیش‌فرضتوضیح
orientation"vertical" | "horizontal""vertical"جهت نوار اسکرول.
forceMountboolean—نوار را همیشه در DOM نگه می‌دارد؛ برای انیمیشن‌های سفارشی.

data-slot

ویژگینوعپیش‌فرضتوضیح
scroll-area-viewportdiv—ناحیهٔ واقعی اسکرول؛ اگر لازم شد اسکرول را از کد کنترل کنید، همین را انتخاب کنید.
scroll-area-thumbdiv—دستهٔ نوار؛ رنگش از توکن border می‌آید.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.