طبقة التعتيم

طبقة تعتّم الصفحة وتطمسها خلف نافذة أو لوحة أو حالة انتظار.

المعاينة

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

أضف المكوّن
$ npx ritla add overlay
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/overlay
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

overlay.tsx

import { Overlay } from "@/components/ui/overlay";<div className="relative">  …  <Overlay type="gradient" /></div>

الخاصية	النوع	الافتراضي	الوصف
`type`	`"solid" \| "gradient" \| "transparent"`	`"solid"`	خاصية Type: تعتيم كامل، أو يشتدّ نحو الأسفل، أو بلا تعتيم (طمس فقط).
`blur`	`boolean`	`true`	خاصية Background blur: يطمس ما خلفه بمقدار `backdrop-blur-elevation-md`.
`fixed`	`boolean`	`false`	يغطي الشاشة كلها في طبقة `z-overlay` بدل أقرب عنصر أب.

الطبقة زخرفية: aria-hidden ولا تأخذ التركيز.
النافذة الحوارية والدرج يرسمان طبقتهما ويحبسان التركيز؛ إن بنيت طبقة خاصة فاحبس التركيز وأغلقها بمفتاح Esc.