البناء · جديد

منطقة التمرير

إطار ثابت بشريط تمرير نحيف، للقوائم وصفوف البطاقات التي يجب أن تبقى ضمن ارتفاع أو عرض محدد.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/scroll-area

الاعتماديات التي يضيفها: @base-ui/react

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

<ScrollArea label="Currencies" className="h-320 w-256" contentClassName="px-20 py-16">
  …
</ScrollArea>

‏orientation="horizontal". الإطار أضيق من الصف فتظهر البطاقة الأخيرة جزئيًا، ليعرف الناس أن هناك المزيد. بالعربية يبدأ الصف من اليمين.

‏bare بلا إطار، داخل بطاقة لها إطارها. عنوان البطاقة ثابت فوق المنطقة، والقائمة وحدها تتمرر.

الخاصية	النوع	الافتراضي	الوصف
`orientation`	`"vertical" \| "horizontal" \| "both"`	`"vertical"`	خاصية Orientation.
`label`	`string`		اسم المنطقة لقارئ الشاشة (تصبح `region`).
`bare`	`boolean`	`false`	بلا إطار، داخل لوحة أو بطاقة.
`className`	`string`		للإطار: ارتفاع ثابت (عمودي) أو عرض ثابت (أفقي).
`contentClassName`	`string`		للمحتوى الذي يتمرر: الحشو والتخطيط.

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى المنطقة إن كانت تتمرر، أو إلى أول عنصر داخلها.
`ArrowUpArrowDownPageUpPageDown`	تمرير عمودي.
`ArrowLeftArrowRight`	تمرير أفقي.

التمرير أصلي، فتعمل لوحة المفاتيح والعجلة واللمس وقارئ الشاشة كما في أي عنصر يتمرر.
الشريط زخرفي؛ مع label تصبح المنطقة region لها اسم.
لا تلفّ صفحات كاملة بها: للوحات والقوائم والجداول والقوائم الجانبية فقط.