تصفّح التوثيق
الثيم الافتراضي
Englishاحصل على Ritla UI

المكوّنات

مجموعة المربّعات

مربّعات دخول في شبكة تفصل بينها خطوط رفيعة، على شريط سماوي: عنوان وسطر شرح وسهم إلى الوجهة، بلا بطاقات ولا فراغات بينها.

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.
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"، كلٌّ منها رابط.

الخاصيةالنوعالافتراضيالوصف
labelstringلا يوجداسم المجموعة لقارئ الشاشة («ابدأ من هنا»). المجموعة معلم تنقّل.
columns2 | 3 | 43خاصية Columns: عدد الأعمدة حين يبلغ عرض المجموعة 768 بكسل أو أكثر، وعمود واحد دون ذلك.
childrenReactNodeلا يوجدالمربّعات.

إمكانية الوصول

لوحة المفاتيح

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

المفتاحما يفعله
Tabمن مربّع إلى التالي بترتيب القراءة.

ARIA

  • المجموعة nav باسم label، وكل مربّع رابط اسمه عنوانه ووصفه سطر الشرح.
  • حلقة التركيز داخل المربّع، فلا يغطيها المربّع المجاور.

ملاحظات العربية والاتجاه

ينعكس

  • المربّع الأول على اليمين، والخطوط بين المربّعات عند بدايتها.
  • السهم في بداية أسفل المربّع يشير إلى اليسار ويتقدّم نحو الوجهة عند التمرير أو التركيز.

لا ينعكس

  • ترتيب الصفوف من الأعلى إلى الأسفل.
الأرقام
لا أرقام في المربّع نفسه؛ نصوصك تتبع إعداد الأرقام.
الخط العربي
العنوان body-20 بوزن Medium، والشرح body-14.
النص ثنائي الاتجاه
العنوان والشرح بلغة الصفحة؛ اعزل المعرّفات اللاتينية داخل النص العربي.