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

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

الصفحة: https://ritla.app/ar/ui/tile-group

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add tile-group
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/tile-group
```

## الاستخدام

```tsx
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}` مع أربعة مربّعات: خط بين الصفّين وبين المربّعين في كل صف. في المساحة الضيقة عمود واحد، وخط فوق كل مربّع بعد الأول.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/tile-group-columns

## مرجع الخصائص

### `TileGroup`

المربّعات `ButtonCard variant="tile"`، كلٌّ منها رابط.

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `label` | `string` | لا يوجد | اسم المجموعة لقارئ الشاشة («ابدأ من هنا»). المجموعة معلم تنقّل. |
| `columns` | `2 \| 3 \| 4` | `3` | خاصية Columns: عدد الأعمدة حين يبلغ عرض المجموعة 768 بكسل أو أكثر، وعمود واحد دون ذلك. |
| `children` | `ReactNode` | لا يوجد | المربّعات. |

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

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: من مربّع إلى التالي بترتيب القراءة.

ARIA:

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

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

ينعكس:

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

لا ينعكس:

- ترتيب الصفوف من الأعلى إلى الأسفل.

الأرقام: لا أرقام في المربّع نفسه؛ نصوصك تتبع إعداد الأرقام.

الخط العربي: العنوان `body-20` بوزن Medium، والشرح `body-14`.

النص ثنائي الاتجاه: العنوان والشرح بلغة الصفحة؛ اعزل المعرّفات اللاتينية داخل النص العربي.