المكوّنات
إطار العيّنة
عيّنة حيّة فوق رابط إلى صفحتها، في شبكة تفصل بينها خطوط رفيعة. يتلوّن الإطار عند تمرير المؤشر فوقه وحين يكون التركيز داخله.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.
npx ritla add specimen-frameويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/specimen-frame
الاعتماديات التي يضيفها: @phosphor-icons/react
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { SpecimenFrame, SpecimenGrid } from "@/components/ui/specimen-frame";<SpecimenGrid>
<SpecimenFrame title="Phone number" href="/docs/components/phone-input">
<PhoneInput label="Phone number" defaultCountry="SA" />
</SpecimenFrame>
</SpecimenGrid>أمثلة
عمودان وعدد فردي من الإطارات
مع columns={2}: تبقى الخطوط بين الإطارات رفيعة، والخانة الفارغة لا ترسم شيئًا.
مرجع الخصائص
SpecimenGrid
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
columns | 2 | 3 | 3 | عدد الأعمدة من lg. عمود واحد على الهاتف، وعمودان من md. |
children | ReactNode | لا يوجد | إطارات SpecimenFrame. |
SpecimenFrame
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
title | ReactNode | لا يوجد | اسم المكوّن في رابط أسفل الإطار. |
href | string | لا يوجد | وجهة الرابط: صفحة المكوّن. |
render | ReactElement | لا يوجد | رابط التوجيه (<Link>) بمظهر رابط الإطار، بدل href. |
children | ReactNode | لا يوجد | العيّنة الحيّة. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | إلى عناصر العيّنة، ثم إلى رابط الإطار. |
ARIA
- الرابط يحمل اسم المكوّن، فقائمة روابط قارئ الشاشة تقرأ «رقم الهاتف» لا «اعرض المزيد».
- السهم زخرفي ومخفي عن قارئ الشاشة.
ملاحظات العربية والاتجاه
ينعكس
- الإطارات تبدأ من اليمين، وخط الفصل على الجهة اليسرى من كل إطار.
- سهم الرابط يشير إلى اليسار.
لا ينعكس
- العيّنة نفسها: كلٌّ يتبع قواعده، فحقل الهاتف يبقى من اليسار إلى اليمين.
- الأرقام
- لا أرقام يكتبها الإطار بنفسه؛ العيّنات تتبع إعداد الأرقام.
- الخط العربي
- الرابط
body-14بوزن Medium.