الريال السعودي

SaudiRiyal

مكوّن SaudiRiyal في React يعرض رمز الريال الرسمي بتنسيق مبالغ متوافق مع SDGA: موضع رمز ثابت، وإشارة آمنة في الاتجاه العربي، وأرقام، ودرجات.

يثبت SaudiRiyal رمز الريال الرسمي قبل الرقم في الاتجاهين، ويبقي الأرقام من اليسار إلى اليمين، ويعلن العملة لقارئات الشاشة. مرر number ليتم تنسيقه.

متى تستخدمه

استخدم SaudiRiyal لكل مبلغ مالي في خدمة سعودية: الرسوم والغرامات والأرصدة والإجماليات. مرّر رقمًا ودع المكوّن يضع الرمز وينسّق الأرقام ويتعامل مع القيم السالبة.

استخدم الرمز وحده في ترويسات الأعمدة أو التسميات.

أمثلة

المبلغ

الأحجام

الدرجات

القيم السالبة والمكتوبة

الأرقام

الرمز

ضمن النص

كرابط

الخصائص

الخصائص التي يعرّفها SaudiRiyal. سمات العنصر الأصلي تمرّ كما هي.

<SaudiRiyal>

الخاصيةالنوعالافتراضيالوصف
size"sm" | "lg" | "base" | "xs" | "xl" | "2xl" | "3xl" | "2xs"
tone"default" | "error" | "success" | "inverted" | "brand" | "muted"
valuestring | numberThe amount. A number is formatted (grouping, decimals, numerals); a string renders as-is (e.g. "123 million").
decimalsnumberFixed fraction digits (e.g. 2 → halalas). Omit to use the locale default. Numbers only.
numeralsNumerals'latn' (matches SDGA examples); `'auto'` follows the locale.Digit system for a numeric value.
currencyLabelreact.ReactNodeScreen-reader currency name read after the amount. Defaults to a localized "Saudi Riyal".
asChildbooleanMerge props onto a single child (e.g. an <a>) instead of a <span>. Content still comes from value.
childrenreact.ReactNodePassthrough content when value is omitted (ignored in asChild mode, where the child is the wrapper element).

<SaudiRiyalSymbol>

الخاصيةالنوعالافتراضيالوصف
size"sm" | "lg" | "base" | "xs" | "xl" | "2xl" | "3xl" | "2xs"
tone"default" | "error" | "success" | "inverted" | "brand" | "muted"
appearance"plain" | "coin"

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

يُعرض المبلغ صورةً باسم متاح يقرأ العملة والقيمة، ورمز الريال aria-hidden. تبقى الأرقام من اليسار إلى اليمين في التخطيطات العربية، وتحتفظ المبالغ السالبة بالإشارة في الجهة الصحيحة.

يرث المكوّن حجم الخط فيتناسب مع النص المحيط.