انتقل إلى المحتوى
ENالعربية

صف الأصل

تجريبي
احصل على Ritla UI

أصل واحد في قائمة: الذهب أو سهم أو زوج عملات، مع السعر والتغيّر ومخطط صغير اختياري.

افتح في Figma

المعاينة

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

المعاينةالكود
إنجليزيمعكوسعربي
← RTL

التثبيت

  1. أضف المكوّن

    npx ritla add asset-row

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

  2. الاعتماديات التي يضيفها

    @phosphor-icons/react

  3. أو انسخه يدويًا

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

الاستخدام

asset-row.tsx
import { AssetList, AssetLogo, AssetRow } from "@/components/ui/asset-row";<AssetList aria-label="Watchlist">  <AssetRow logo={<AssetLogo kind="gold" />} name="Gold" symbol="XAU" price="58.330" change={1.24} chart={[52, 54, 55, 58]} /></AssetList>

مرجع الخصائص

AssetRow

الخاصيةالنوعالافتراضيالوصف
name / symbolReactNode / stringلا يوجدالأصل ورمزه؛ الرمز يبقى من اليسار إلى اليمين.
logoReactNodeلا يوجدشعار AssetLogo أو أي علامة بحجم 40.
priceReactNodeلا يوجدالسعر كما يُنسّقه التطبيق.
changenumberلا يوجدالتغيّر بالنسبة المئوية: شارة اتجاه Plain ولون المخطط الصغير.
chartnumber[]لا يوجدخاصية Sparkline: الأسعار الأخيرة، الأقدم أولًا.
hrefstringلا يوجديجعل الصف كله رابطًا.

AssetLogo

الخاصيةالنوعالافتراضيالوصف
kind"gold" | "stock" | "fx"لا يوجدGold عملة على خلفية كهرمانية، وStock الأحرف الأولى، وFX علَمان.
initials / flagsstring / [string, string]لا يوجدحروف السهم؛ ودولتا زوج العملات (ISO)، الأساسية أولًا.
size"sm" | "md""md"32 في البطاقات الصغيرة و40 في الصفوف.

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

ARIA

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

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

ينعكس

  • ينتقل الشعار إلى اليمين والسعر إلى اليسار.

لا ينعكس

  • المخطط الصغير: الزمن يجري من اليسار إلى اليمين في كل لغة.
الأرقام
الأرقام التي يُنسّقها التطبيق (الأسعار والأرصدة) تصل نصًا، والمكوّن يُبقيها من اليسار إلى اليمين بوسم <bdi dir="ltr">.
الخط العربي
label-14 Medium للاسم وnumeric-14 Medium للسعر.