بطاقة الأصل

تجريبي

احصل على Ritla UI

أصل في بطاقة صغيرة لشريط أفقي أو شبكة متابعة: الشعار والسعر والتغيّر ومخطط صغير بتعبئة خفيفة.

افتح في Figma

المعاينة

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

التثبيت

أضف المكوّن
$ npx ritla add asset-tile
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/asset-tile
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

asset-tile.tsx

import { AssetLogo } from "@/components/ui/asset-row";import { AssetTile } from "@/components/ui/asset-tile";<AssetTile logo={<AssetLogo kind="fx" flags={["JO", "US"]} size="sm" />} name="USD/JOD" caption="FX" price="0.709" change={0.04} chart={[3, 3.2, 3.5, 4.2]} />

مرجع الخصائص

AssetTile

الخاصية	النوع	الافتراضي	الوصف
`name / caption`	`ReactNode`	لا يوجد	الأصل ونوعه أو رمزه.
`logo`	`ReactNode`	لا يوجد	شعار AssetLogo بحجم sm.
`price`	`ReactNode`	لا يوجد	السعر كما يُنسّقه التطبيق.
`change`	`number`	لا يوجد	التغيّر بالنسبة المئوية: شارة اتجاه Soft.
`chart`	`number[]`	لا يوجد	الأسعار الأخيرة للمخطط الصغير.
`href`	`string`	لا يوجد	يجعل البطاقة كلها رابطًا.

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

ARIA

عنصر article، ومع href يصبح الاسم رابطًا ممتدًا على البطاقة.
المخطط الصغير زخرفي.

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

ينعكس

كل شيء محاذى إلى البداية، فينتقل المحتوى إلى اليمين.

لا ينعكس

المخطط الصغير لا ينعكس، والسعر والتغيّر يبقيان من اليسار إلى اليمين.

الأرقام: الأرقام التي يُنسّقها التطبيق (الأسعار والأرصدة) تصل نصًا، والمكوّن يُبقيها من اليسار إلى اليمين بوسم <bdi dir="ltr">.
الخط العربي: numeric-20 Semibold للسعر.