الريال السعودي
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" | ||
value | string | number | The amount. A number is formatted (grouping, decimals, numerals); a string renders as-is (e.g. "123 million"). | |
decimals | number | Fixed fraction digits (e.g. 2 → halalas). Omit to use the locale default. Numbers only. | |
numerals | Numerals | 'latn' (matches SDGA examples); `'auto'` follows the locale. | Digit system for a numeric value. |
currencyLabel | react.ReactNode | Screen-reader currency name read after the amount. Defaults to a localized "Saudi Riyal". | |
asChild | boolean | Merge props onto a single child (e.g. an <a>) instead of a <span>. Content still comes from value. | |
children | react.ReactNode | Passthrough 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. تبقى الأرقام من اليسار إلى اليمين في التخطيطات العربية، وتبقى إشارة السالب في الجهة الصحيحة.
يرث المكون حجم الخط من النص المحيط، لذلك يتناسب معه.