البناء · جديد
واجهات عربية صحيحة من أول سطر
مكونات React وTailwind v4 مبنية على الفحوص نفسها التي يشغّلها رتلة على موقعك. كل مكوّن يعمل بالإنجليزية، وبالاتجاه المعكوس، وبالعربية الأصيلة، من رموز التصميم نفسها التي يقوم عليها ثيم كنز في Figma.
- مكوّن
- 62
- أوضاع المعاينة
- إنجليزي · معكوس · عربي
- التثبيت
- قريبًا
المدفوعات والتقنية المالية
- إجراء التداولزرّا الشراء والبيع جنباً إلى جنب لشاشات التداول والوساطة. كلاهما إجراء رئيسي، فالشراء أخضر في بداية السطر والبيع أحمر بعده، ولا تتبدل الألوان في العربية.في العربية: الشراء في بداية السطر: اليمين في العربية، والبيع بعده، فيبقى ترتيب القراءة «شراء ثم بيع».
- بيانات البطاقةرقم البطاقة وتاريخ الانتهاء ورمز الأمان في مجموعة واحدة، تُنسَّق أثناء الكتابة وتملؤها المتصفحات والمحافظ.في العربية: التسمية والنص المساعد في بداية السطر (اليمين).
- رقم الهاتفحقل رقم هاتف باختيار الدولة من العلم، بقائمة بحث بالعربية والإنجليزية ومفاتيح الدول، وتنسيق الرقم أثناء الكتابة. يعيد الرقم بالصيغة الدولية (E.164).في العربية: قائمة الدول تتبع الصفحة: بالعربية ومن اليمين إلى اليسار، مرتبة أبجديًا بالعربية.
- رمز التحققخانات رمز لمرة واحدة، من 4 إلى 6. الكتابة تنتقل للخانة التالية، واللصق يملؤها كلها، والهاتف يقترح الرمز من الرسالة.في العربية: المجموعة تبدأ من بداية السطر (اليمين) مع التسمية.
- حقل الأرقامحقل رقمي بزرّي زيادة ونقصان وبادئة عملة اختيارية. يكتب القيمة بأرقام الصفحة (123 أو ١٢٣) ويقبل النوعين عند الكتابة.في العربية: العملة في بداية الحقل (اليمين) والزرّان في نهايته، والزيادة في أقصى اليسار.
- أزرار الدفعزرّا Apple Pay وGoogle Pay كما تقدّمهما الشركتان، من مكتباتهما الرسمية: الشعار والنص والترجمة منهما، وكنز يضبط الارتفاع والعرض والشكل واللغة.في العربية: النص العربي في بداية السطر، والزر يتبع ترتيب الصفحة.
الحقول والاختيار والبحث
- حقل الإدخالحقل نصي بتسمية ظاهرة ونص مساعد، بالحالات نفسها في كل حقول كنز: افتراضي وتمرير وتركيز وخطأ ومعطّل وللقراءة فقط وتعبئة تلقائية.في العربية: التسمية والنص المساعد والأيقونة البادئة في بداية السطر (اليمين)، والحالة واللاحقة في نهايته.
- حقل كلمة المرورحقل كلمة مرور بزر إظهار وإخفاء، ومؤشر قوة اختياري لإنشاء كلمة مرور جديدة.في العربية: زر الإظهار في نهاية الحقل (اليسار).
- منطقة النصحقل نص متعدد الأسطر للإجابات الأطول، كالملاحظات والأوصاف والرسائل، بتسمية حقل الإدخال ونصه المساعد وحالاته، مع عدّاد للأحرف ومقبض لتغيير الارتفاع.في العربية: العدّاد والمقبض في نهاية السطر (أسفل اليسار)، والمقبض ينعكس ليشير إلى الزاوية.
- القائمة المنسدلةحقل لاختيار خيار واحد أو عدة خيارات من قائمة، بتسمية حقل الإدخال وحالاته، وبحث حين تطول القائمة. استخدمها لخمسة خيارات أو أكثر؛ وللأقل أزرار الاختيار أو مربعات التفعيل.في العربية: السهم في نهاية الحقل (اليسار)، والأيقونة والعلامة في الصفوف تتبادلان المكان.
- حقل البحثحقل بحث بالعدسة وزر مسح عند وجود نص ومؤشر تحميل، واقتراحات اختيارية أثناء الكتابة. بإطار داخل الصفحات والنماذج، أو بخط سفلي في أشرطة الأدوات والقوائم.في العربية: العدسة في بداية الحقل (اليمين) وزر المسح والمؤشر في نهايته (اليسار).
- شريط البحثالبحث في رأس التطبيق: شريط مستدير بارتفاع 56px بزر القائمة وحقل البحث وحتى إجراءين أو الصورة الرمزية.في العربية: زر القائمة في بداية الشريط (اليمين) والإجراءات في نهايته (اليسار).
التحديد
- مربع التفعيللاختيار أي عدد من الخيارات، أو لتفعيل إعداد قبل الإرسال. المربع في بداية السطر، والتسمية تبدّله أيضًا.في العربية: المربع في بداية السطر (اليمين) والنص بعده.
- مجموعة مربعات التفعيلمربعات تفعيل تحت تسمية واحدة، بنص مساعد أو خطأ مشترك، وخيار «الكل» اختياري يصير جزئيًا حين يُحدَّد بعضها.في العربية: المربعات في بداية الأسطر (اليمين).
- بطاقة الاختيارصف قائمة يُختار بمربع تفعيل، بأيقونة أو صورة في البداية وعنوان ونص داعم. الصف كله قابل للنقر.في العربية: الأيقونة في البداية (اليمين) والمربع في النهاية (اليسار).
- أزرار الاختيارلاختيار خيار واحد فقط من قائمة قصيرة ظاهرة كلها؛ اختيار أحدها يلغي الباقي. الدائرة في بداية السطر.في العربية: الدوائر في بداية الأسطر (اليمين)، والأسهم الأفقية تتبع اتجاه القراءة.
- بطاقة الاختيار الأحاديصف قائمة يُختار بزر اختيار داخل مجموعة، بأيقونة في البداية وعنوان ونص داعم ونص ختامي كالسعر. الصف كله قابل للنقر.في العربية: الأيقونة في البداية (اليمين) والدائرة في النهاية (اليسار).
- مفتاح التبديليشغّل إعدادًا واحدًا أو يوقفه، ويُطبَّق التغيير فورًا. المقبض في بداية السطر حين يكون متوقفًا، وينتقل إلى نهايته عند التشغيل.في العربية: المفتاح في بداية الصف (اليمين).
- بطاقة الإعدادصف إعدادات يُشغَّل بمفتاح تبديل، بأيقونة في البداية وعنوان ونص داعم. الصف كله قابل للنقر.في العربية: الأيقونة في البداية (اليمين) والمفتاح في النهاية (اليسار)، كما يوصي Figma لقوائم الإعدادات.
- مفتاح بعنوان ووصفمفتاح تبديل بعنوان ووصف لصفوف الإعدادات، بمقاسين. يُطبَّق التغيير فورًا.في العربية: المفتاح في بداية الصف (اليمين) والنصوص بعده، والمقبض يتحرك نحو اليسار عند التشغيل.
- الشرائحعناصر تفاعلية صغيرة: تقترح أو تنفّذ اختصارًا أو تصفّي أو تحمل قيمًا مُدخلة أو تعمل خيارات متعددة.في العربية: الأيقونات والأعلام ومربع التفعيل في بداية الشريحة (اليمين)، وزر الحذف والسهم في نهايتها.
- المنزلقاختيار قيمة أو نطاق بالسحب أو بلوحة المفاتيح، حين تكون القيمة التقريبية كافية مثل مستوى الصوت أو التكبير أو نطاق السعر.في العربية: المنزلق الأفقي يمتلئ من اليمين: الحد الأدنى على اليمين، وArrowLeft يزيد.
الإشعارات والطبقات
- التنبيهرسالة داخل الصفحة بجانب ما تخصه، تبقى حتى يتغير الوضع أو يخفيها الشخص: دفعة فشلت، هوية توشك أن تنتهي، استيراد اكتمل.في العربية: الأيقونة والعنوان والرسالة على اليمين، وزر الإخفاء على اليسار، والإجراءات تبدأ من اليمين.
- الإشعار المنبثقيؤكد ما حدث للتو دون أن يوقف أحدًا. أضف إجراءً واحدًا مثل «تراجع» أو «إعادة المحاولة» فيصبح شريط إشعار (Snackbar).في العربية: الأيقونة والرسالة على اليمين، والإجراء وزر الإخفاء على اليسار.
- التلميحيشرح أيقونة أو مصطلحًا ببضع كلمات عند المرور بالمؤشر أو التركيز بلوحة المفاتيح.في العربية:
inline-startوinline-endتنعكسان: «يسار» Figma يصبح يمينًا في العربية. - النافذة المنبثقةمساحة صغيرة لمهمة واحدة سريعة، تنفتح بجانب الزر الذي فتحها.في العربية: البداية والنهاية: البداية على اليمين بالعربية.
- بطاقة المعاينةمعاينة للقراءة فقط لما يشير إليه رابط، تظهر حين يستقر المؤشر عليه أو يصله التركيز.في العربية: الصورة الرمزية في البداية: على اليمين، والنص بعدها.
- النافذة الحواريةتوقف سير العمل لتأكيد إجراء أو التنبيه إلى خطر أو جمع مدخل قصير. تظهر فوق طبقة معتمة، ويبقى التركيز داخلها حتى تُغلق.في العربية: الأيقونة والنص إلى اليمين، وزر الإغلاق في أعلى اليسار.
- الدرج السفليلوحة تنزلق من أسفل شاشة الجوال لمهمة قصيرة أو قائمة إجراءات، في متناول الإبهام، والصفحة ظاهرة خلفها. تُعرف أيضًا باللوحة السفلية (Bottom sheet).في العربية: العنوان وأيقونات القائمة على اليمين، وزر الإغلاق على اليسار.
- مؤشرات التقدمتُظهر مقدار ما أُنجز من مهمة: الرفع والأهداف والخطوات. استخدمها حين يمكن قياس التقدم، ومؤشر التحميل حين لا يمكن.في العربية: الشريط يمتلئ من بداية السطر: من اليمين في العربية، والخطوات كذلك.
- مؤشر التحميليخبر الناس أن شيئًا يجري حين لا يمكن معرفة المدة. مؤشر التحميل يضيف عنوانًا ووصفًا قصيرًا.في العربية: النقاط تقفز بترتيب القراءة.
- الهيكل المؤقتيُظهر شكل المحتوى أثناء تحميله، فلا تقفز الصفحة حين يصل المحتوى الحقيقي.في العربية: الأشكال تتبع تخطيط المحتوى: الدائرة في بداية السطر (اليمين).
- الحالة الفارغةتملأ مساحة لا محتوى فيها بعد، وتقول السبب، وتدل على الخطوة التالية.في العربية: النص يبقى في الوسط، والإجراء الأساسي أولًا: على اليمين.
عرض البيانات
- الجداولصفوف من السجلات يقارنها المستخدم ويتصرف بناءً عليها: معاملات وطلبات ومستخدمون. جدول حقيقي بعناوين أعمدة وخلايا.في العربية: أول عمود على اليمين، والنص في بداية الخلية (يمينها)، والفاصل في نهايتها (يسارها).
- القائمةصفوف متتالية لأشخاص أو رسائل أو إعدادات: عنوان مع سطر علوي ونص مساعد، وصورة رمزية أو أيقونة في البداية، ووسم في النهاية. والصف القابل للسحب يكشف إجراءات عند سحبه.في العربية: الصورة الرمزية أو الأيقونة على اليمين، والوسم وزر ⋮ على اليسار.
- الأكورديونأسئلة تُفتح لتظهر إجاباتها، فتبقى صفحات المساعدة والإعدادات الطويلة قصيرة. يفتح الناس ما يحتاجونه فقط.في العربية: السؤال والإجابة يبدآن من اليمين، والأيقونة في نهاية السطر، أي على اليسار.
- القسم القابل للطيلوحة واحدة تُظهر تفاصيل اختيارية أو تخفيها تحت عنوانها، مثل الرسوم. يبقى أهم سطر ظاهرًا، والباقي يُفتح تحته.في العربية: العنوان على اليمين والسهم في نهاية الصف، أي على اليسار.
- الوسميصف شيئًا بحالة أو فئة (مدفوع، معلّق، متأخر). غير تفاعلي: لا تجعله يبدو قابلًا للضغط.في العربية: الأيقونة الأولى والعلم في بداية السطر (اليمين)، والأيقونة الأخيرة في نهايته.
- الشارةعدد (رسائل غير مقروءة، موافقات معلّقة) أو نقطة لشيء جديد، داخل التبويبات وعناصر التنقل والقوائم والصفوف. لكلمات الحالة استخدم الوسم.في العربية: الشارة تتبع موضعها في الصف: في نهاية السطر (اليسار) في العربية.
- الصورة الرمزيةتمثّل شخصًا أو حسابًا بصورة أو بالحرف الأول من الاسم أو برمز عام، وقد تحمل شارة للتعديل أو التوثيق أو الاتصال.في العربية: الشارة في زاوية نهاية السطر السفلية: يسارًا في العربية.
- مفتاح لوحة المفاتيحيعرض مفتاحًا أو اختصارًا بجانب الأمر الذي ينفّذه، في القوائم والتلميحات ونصوص المساعدة.في العربية: الجملة حول الاختصار تنعكس.
احصل على الوصول المبكر
تُفتح المكونات والثيمات والقوالب والسجل معًا. اترك بريدك وسنراسلك مرة واحدة عند افتتاحها.