المكوّنات
مجموعة المربّعات
مربّعات دخول في شبكة تفصل بينها خطوط رفيعة، على شريط سماوي: عنوان وسطر شرح وسهم إلى الوجهة، بلا بطاقات ولا فراغات بينها.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.
npx ritla add tile-groupويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/tile-group
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { ButtonCard } from "@/components/ui/button-card";
import { TileGroup } from "@/components/ui/tile-group";<TileGroup label="Start here">
<ButtonCard variant="tile" headline="Browse components" supportingText="Ready for both directions." render={<a href="/components" />} />
<ButtonCard variant="tile" headline="Design in Figma" supportingText="The same tokens, on your canvas." render={<a href="/figma" />} />
<ButtonCard variant="tile" headline="Scan your site free" supportingText="Find what mirroring leaves behind." render={<a href="/scan" />} />
</TileGroup>أمثلة
عمودان وصفّان
columns={2} مع أربعة مربّعات: خط بين الصفّين وبين المربّعين في كل صف. في المساحة الضيقة عمود واحد، وخط فوق كل مربّع بعد الأول.
مرجع الخصائص
TileGroup
المربّعات ButtonCard variant="tile"، كلٌّ منها رابط.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | string | لا يوجد | اسم المجموعة لقارئ الشاشة («ابدأ من هنا»). المجموعة معلم تنقّل. |
columns | 2 | 3 | 4 | 3 | خاصية Columns: عدد الأعمدة حين يبلغ عرض المجموعة 768 بكسل أو أكثر، وعمود واحد دون ذلك. |
children | ReactNode | لا يوجد | المربّعات. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | من مربّع إلى التالي بترتيب القراءة. |
ARIA
- المجموعة
navباسمlabel، وكل مربّع رابط اسمه عنوانه ووصفه سطر الشرح. - حلقة التركيز داخل المربّع، فلا يغطيها المربّع المجاور.
ملاحظات العربية والاتجاه
ينعكس
- المربّع الأول على اليمين، والخطوط بين المربّعات عند بدايتها.
- السهم في بداية أسفل المربّع يشير إلى اليسار ويتقدّم نحو الوجهة عند التمرير أو التركيز.
لا ينعكس
- ترتيب الصفوف من الأعلى إلى الأسفل.
- الأرقام
- لا أرقام في المربّع نفسه؛ نصوصك تتبع إعداد الأرقام.
- الخط العربي
- العنوان
body-20بوزن Medium، والشرحbody-14. - النص ثنائي الاتجاه
- العنوان والشرح بلغة الصفحة؛ اعزل المعرّفات اللاتينية داخل النص العربي.