بطاقة الأداة

تجريبي

احصل على Ritla UI

البطاقة الواحدة للوحات المعلومات: عنوان بأيقونة ومعلومة وإجراء، ورقم مع تغيّره، ومكان لأي مخطط أو قائمة.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

widget-card.tsx

import { Amount } from "@/components/ui/amount";import { WidgetCard, WidgetCardPeriod } from "@/components/ui/widget-card";<WidgetCard  icon={WalletIcon}  title="Total balance"  action={<WidgetCardPeriod>This month</WidgetCardPeriod>}  figure={{ value: <Amount value={2450.75} decimals={3} unit="JOD" size="xl" />, change: 12.4, caption: "vs last month" }}>  <BarChart data={data} series={series} label="Balance by month" /></WidgetCard>

أمثلة

الحالات داخل البطاقة

إنجليزيمعكوسعربي

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

← RTL

مرجع الخصائص

WidgetCard

الخاصية	النوع	الافتراضي	الوصف
`icon / title`	`IconComponent / ReactNode`	لا يوجد	مربع الأيقونة بحجم 28 والعنوان.
`info`	`ReactNode`	لا يوجد	تلميح المعلومة بجانب العنوان.
`action`	`ReactNode`	لا يوجد	خاصية Action: WidgetCardPeriod أو زر قائمة أو زر رابط بأيقونة.
`subtitle`	`ReactNode`	لا يوجد	خاصية Show subtitle.
`figure`	`{ value, change?, caption? }`	لا يوجد	خاصية Show figure: مبلغ وشارة اتجاه وتعليق.
`surface`	`"default" \| "muted"`	`"default"`	Default على صفحة رمادية وMuted على صفحة بيضاء.
`headingLevel`	`2 \| 3 \| 4`	`2`	مستوى عنوان البطاقة.
`children`	`ReactNode`	لا يوجد	خاصية Show slot: مخطط أو قائمة أو Card state.

WidgetCardPeriod

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	الفترة المختارة؛ مرّره كـ`render` إلى MenuTrigger.

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

ARIA

عنصر section يسمّيه عنوانه، فيظهر في قائمة المناطق لدى قارئ الشاشة.
المعلومة زر بتلميح يمكن الوصول إليه بلوحة المفاتيح.

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

ينعكس

الرأس ينعكس: الأيقونة والعنوان يمينًا والإجراء يسارًا.

لا ينعكس

الرقم يبقى كتلة واحدة من اليسار إلى اليمين، والمخططات داخل المكان تتبع قواعدها.

الأرقام: الرقم يأتي من Amount، فيتبع إعداد الأرقام.
الخط العربي: label-14 Semibold للعنوان وbody-12 للعنوان الفرعي والتعليق.