المكونات

شريط التطبيق

الشريط العلوي لكل شاشة، على لون العلامة: زر تنقّل ريادي، وعنوان بخط عريض مع مسار خافت اختياري، وإجراءات ذيلية زجاجية مثل التنبيهات والرصيد. مبني من زر الأيقونة ورمز العملة.

جاهز، مؤكّد من فيغماعلى لون العلامةاتجاه منطقي

النضج: جاهز
الإصدار: 1.0
المالك: فريق نظام التصميم
المنصّة: Mercato B2B

نظرة عامة

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

جرّبه

الفرعيةالزبائن

العنوان

المسار

زر الرجوع

التنبيهات

الرصيد

أمثلة جاهزة

شريط الصفحة · عودة + عنوان + مسار

الفرعيةالزبائن

شريط الرئيسية · تنبيهات + رصيد + تحية

ميركاتوصباح الخير، ليث24,525

شريط الاختيار · عودة + عنوان + إضافة + عدّاد

اختر الصيدلية١ من ٣

التركيب

الجزء	الطبقة والرمز
الخلفية	Color · dodger-blue.600 (brand)
العنوان	Typography · Title 3 (SemiBold 20/24), white
المسار الخافت	Title 3 at 60% opacity
زر التنقّل	Icon button · circle (black-oud.100) or glass
الإجراء الزجاجي	rgba white 0.14 + backdrop-blur, white icon
الرصيد	Glass pill · Footnote 12 + coin glyph
الحشو	Spacing · px 20, gap 8

السلوك

أزرار الشريط قابلة للتركيز بلوحة المفاتيح وتُفعّل بمفتاحي Enter وSpace، ويظهر مخطط تركيز واضح عند التنقّل. زر الرجوع يعيد المستخدم إلى الشاشة السابقة، وسهمه ينعكس تلقائيا في الاتجاه المنطقي فيشير دائما نحو جهة العودة الصحيحة. عند التحويم أو الضغط تتبدّل تغذية الأزرار الزجاجية بصريا عبر رموز الحركة، ويثبت الشريط أعلى الشاشة أثناء التمرير فيبقى العنوان والإجراءات في المتناول.

افعل ولا تفعل

افعل

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

لا تفعل

لا تكدّس أكثر من إجراءين ذيليين؛ انقل الباقي إلى قائمة الإجراءات.
لا تستخدم نصا داكنا على الأزرق؛ العنوان والأيقونات بيضاء دائما.
لا ترسم أيقونات؛ استخدم Material Symbols عبر زر الأيقونة.

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

كل زر أيقونة في الشريط يحمل تسمية وصول عربية تسمّي الإجراء.
التباين: النص والأيقونات بيضاء على الأزرق تحقق تباينا كافيا.
العنوان هو ترويسة الشاشة؛ يوضع كعنوان صفحة لقارئ الشاشة.

الشيفرة

شريط التطبيق يُستورد من حزمة المكوّنات. الاستخدام في React أولا، ثم بنية الشريط: يقفل الاتجاه على rtl فيرتّب أبناءه فيزيائيا (العلامة والرجوع يمينا، الإجراءات يسارا)، وسهم الرجوع ينعكس بـ scaleX(-1).

React

import { AppBar } from "@mercato/components";

<AppBar title="الزبائن" onBack={goBack} />
<AppBar title="الزبائن" breadcrumb="الطلبية الفرعية" onBack={goBack} />
<AppBar brand="ميركاتو" greeting="صباح الخير، ليث" balance="24,525" notifications />

Implementation

// The bar locks dir="rtl" so it always matches the app, then orders
// children physically: brand/back on the right, actions on the left.
<div dir="rtl" className="flex items-center gap-2 px-5 py-2.5"
     style={{ background: "var(--color-dodger-blue-600)" }}>
  <button aria-label="رجوع" className="grid h-11 w-11 place-items-center rounded-full"
          style={{ background: "var(--color-black-oud-100)", color: "var(--color-black-oud-950)" }}>
    {/* directional glyph flips with scaleX(-1) */}
    <span className="material-symbol" style={{ transform: "scaleX(-1)" }}>keyboard_backspace</span>
  </button>
  <span className="flex-1 text-[20px] font-semibold text-white">الزبائن</span>
  <button aria-label="التنبيهات" className="grid h-11 w-11 place-items-center rounded-full text-white"
          style={{ background: "rgba(245,245,245,0.14)", backdropFilter: "blur(11px)" }}>
    <span className="material-symbol">notifications</span>
  </button>
</div>

الخلفية والأزرار لا تحمل قيمة لون خام: تبديل الوضع الداكن أو إعادة العلامة يسري تلقائيا لأن كل شيء يمرّ عبر رموز اللون الدلالية.