البناء · جديد

إجراء التداول

زرّا الشراء والبيع جنباً إلى جنب لشاشات التداول والوساطة. كلاهما إجراء رئيسي، فالشراء أخضر في بداية السطر والبيع أحمر بعده، ولا تتبدل الألوان في العربية.

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/trade-action

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

الاستخدام

import { TradeAction } from "@/components/ui/trade-action";

<TradeAction buyLabel="Buy" sellLabel="Sell" onBuy={openBuy} onSell={openSell} />

أمثلة

الأحجام

lg ‏56 وmd ‏48 وsm ‏40 وxs ‏32 بكسل. النصفان بعرض واحد دائماً، ومساحة النقر 48 بكسل على الأقل.

غير متاح

disabled يوقف النصفين، عند إغلاق السوق مثلاً. اكتب السبب بجانبهما، فالزر المعطّل لا يشرح نفسه.

مرجع الخصائص

TradeAction

الخاصية	النوع	الافتراضي	الوصف
`buyLabel`	`ReactNode`		Buy label: نص الشراء، ويمكن أن يحمل السعر («شراء 38.45»).
`sellLabel`	`ReactNode`		Sell label: نص البيع.
`onBuy`	`(event) => void`		يُستدعى عند الضغط على الشراء.
`onSell`	`(event) => void`		يُستدعى عند الضغط على البيع.
`size`	`"lg" \| "md" \| "sm" \| "xs"`	`"lg"`	خاصية Size.
`disabled`	`boolean`	`false`	State = Disabled للنصفين.
`className`	`string`		أصناف للمجموعة، مثل `w-full` لملء العرض.

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

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

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

المفتاح	ما يفعله
`Tab`	ينتقل من الشراء إلى البيع؛ التركيز يُظهر الحلقة دون تغيير اللون.
`EnterSpace`	ينفّذ الإجراء الذي عليه التركيز.

ARIA

زران أصليان داخل role="group"؛ الاسم هو النص، فلا يعتمد المعنى على اللون وحده.
الشراء والبيع يفتحان عادةً نموذج تأكيد؛ لا تنفّذ أمراً مالياً بضغطة واحدة دون مراجعة.

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

ينعكس

الشراء في بداية السطر: اليمين في العربية، والبيع بعده، فيبقى ترتيب القراءة «شراء ثم بيع».

لا ينعكس

الألوان لا تتبدل: الشراء أخضر والبيع أحمر في اللغتين.

الأرقام: الأسعار داخل النص تُنسّق بـformatNumber وتتبع إعداد الأرقام؛ جرّب ١٢٣ في المعاينة.
الخط العربي: body-16 (وbody-14 في xs) بوزن Semibold، والارتفاع ثابت يتسع للنص العربي.
النص ثنائي الاتجاه: سعر بعد نص عربي («شراء 38.45») يُعرض صحيحاً؛ رمز سهم لاتيني داخل النص («شراء AAPL») يوضع في <bdi>.

كل المكونات ›