نقش الخلفية
طبقة زخرفية خلف القسم: شبكة نقاط أو خطوط، حلقات، تظليل، توهّج، تدرّج متداخل أو نقش ريتلا.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add background-patternويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/background-patternأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { BackgroundPattern } from "@/components/ui/background-pattern";<section className="relative overflow-hidden"> <BackgroundPattern variant="dot-grid" tone="brand" /> <h2 className="relative">…</h2></section>أمثلة
مرجع الخصائص
BackgroundPattern
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "dot-grid" | "line-grid" | "rings" | "ritla-pattern" | "glow" | "mesh" | "grid-fade" | "hatch" | "dot-grid" | خاصية Style. |
tone | "brand" | "neutral" | "brand" | خاصية Tone. |
className | string | لا يوجد | لتغيير الحجم أو الموضع. |
إمكانية الوصول
ARIA
- النقش مخفي عن قارئ الشاشة ولا يستقبل النقر.
- ضع النص على لون السطح فوقه، فالنقش لا يُحسب في التباين.
ملاحظات العربية والاتجاه
لا ينعكس
- النقوش بلا اتجاه، فتبقى كما هي في العربية.
- الأرقام
- لا أرقام في النقش.
- الخط العربي
- لا نص في النقش، والنص فوقه يتبع خط اللغة.