الثيم الافتراضي

المكوّنات

مستكشف التفاصيل

قائمة قواعد بجانب منصة تعرض عيّنة واحدة بطريقتين: قبل القاعدة وبعدها، مع الحكم والإصلاح في الكود.

المعاينة

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

التثبيت

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

npx ritla add detail-explorer

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/detail-explorer

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { DetailExplorer } from "@/components/ui/detail-explorer";

<DetailExplorer
  chip='dir="rtl" lang="ar"'
  items={[
    {
      value: "phone",
      title: "Phone numbers",
      verdict: { before: "The digit groups swap places", after: "One number, in order" },
      fix: "unicode-bidi: isolate",
      render: (state) => (
        <p dir="rtl" lang="ar">
          اتصل بنا على {state === "before" ? "+966 55 123 4567" : <bdi dir="ltr">+966 55 123 4567</bdi>}
        </p>
      ),
    },
  ]}
/>

أمثلة

جولة تلقائية

مع autoPlay يمرّ المستكشف على عناصره وحده ما دام ظاهرًا: يعرض «قبل» ثم «بعد» ثم ينتقل. يتوقف نهائيًا عند اختيار تبويب أو حالة، وزره يوقفه ويشغّله، ولا يعمل حين يطلب القارئ تقليل الحركة.

احصل على الكود ›

مرجع الخصائص

DetailExplorer

الخاصية	النوع	الافتراضي	الوصف
`items`	`DetailExplorerItem[]`	لا يوجد	القواعد: `value` و`title` و`description` و`caption` و`verdict` و`fix` و`render(state)`.
`chip`	`string`	لا يوجد	كود في بداية المنصة: الإعداد الذي تشترك فيه كل العيّنات.
`value / defaultValue / onValueChange`	`string`	لا يوجد	العنصر المختار، مُتحكَّمًا به أو لا.
`copy`	`{ list, states, before, after, pause, play }`	لا يوجد	أسماء القائمة والمفتاح وتسميتا الحالتين وتسميتا زر الجولة؛ الافتراضي بلغة الصفحة.
`autoPlay`	`boolean`	`false`	جولة تلقائية بين العناصر، بزر إيقاف.
`interval`	`number`	`4600`	مدة العنصر الواحد في الجولة بالمللي ثانية.

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

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

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

المفتاح	ما يفعله
`Tab`	إلى التبويب المختار، ثم مفتاح «قبل» و«بعد»، ثم زر الجولة.
`ArrowDownArrowUp`	بين التبويبات حين تكون عمودًا (من `md`).
`ArrowLeftArrowRight`	بين التبويبات حين تكون صفًا على الهاتف، باتجاه القراءة: السهم الأيسر هو التالي في العربية.

ARIA

القائمة تبويبات مسمّاة («التفاصيل»)، والمنصة لوحتها.
«قبل» و«بعد» مجموعة أزرار اختيار مسمّاة («طريقة العرض»).
الحكم منطقة حيّة (aria-live="polite")، فيُقرأ حين تتغير الحالة.
زر الجولة يقول ما سيفعله: «إيقاف الجولة» أو «تشغيل الجولة».

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

ينعكس

القائمة على اليمين والمنصة على اليسار، والسهم في التبويب المختار يشير إلى اليسار.
شريط الجولة يمتلئ من اليمين.

لا ينعكس

الكود في الشريحة والإصلاح يبقى من اليسار إلى اليمين.
العيّنات نفسها: كلٌّ يحمل dir وlang الخاصين به.

الأرقام: لا أرقام يكتبها المستكشف بنفسه؛ أرقام العيّنات كما تكتبها.
الخط العربي: عنوان التبويب body-16 بوزن Medium والوصف body-14، والحكم body-14 بوزن Medium، والكود body-12 بخط أحادي المسافة.
النص ثنائي الاتجاه: كل «قبل» في المثال هو ما يرسمه المتصفح فعلًا دون القاعدة: الأرقام بعد الحروف العربية تصير أرقامًا عربية في خوارزمية الاتجاه، فتنعكس مجموعات رقم الهاتف غير المعزول.