طلب الوصول إلى API
Micro Frontend

أداة التنسيق

خصّص مظهر Micro-Frontend بما يلائم علامتكم التجارية عبر ضبط design tokens وخيارات التخطيط. تجدون شرحاً لكل معلمة، وتتحدث المعاينة مباشرة، وتكون استدعاءات mount() المنشأة جاهزة للصق.

الإعدادات المسبقة
اقتراح من لقطة شاشة

حمّل أو اسحب أو الصق صورة PNG أو JPEG أو WebP (بحد أقصى 5 ميغابايت). تُرسل نسخة مصغرة ومنزوعة البيانات الوصفية إلى معالج الذكاء الاصطناعي لتحليل الأدوار البصرية، ثم يُتحقق من التباين محليًا. تحتفظ ADITUS بالصورة الأصلية ومجموعة الأنماط المشتقة لمدة 6 أشهر لمراقبة الجودة.

اسحب صورة إلى هنا
يمكنك أيضًا تحديد هذه المنطقة واللصق من الحافظة.

--aditus-accent

اللون الأساسي للعلامة التجارية: الأزرار، والحالات النشطة، والتركيز.

--aditus-accent-strong

تحوم / الضغط على الظل من لهجة.

--aditus-accent-contrast

لون النص/الرمز أعلى التمييز.

--aditus-accent-soft

لون خفيف باهت للتعبئة الناعمة/التحويم.

--aditus-surface

خلفية اللوحة/البطاقة/الإدخال.

--aditus-surface-2

سطح مرتفع قليلاً للحشوات المتداخلة.

--aditus-border

لون حدود خط الشعر.

--aditus-border-strong

حدود أقوى للمدخلات/الضوابط.

--aditus-text

لون النص الأساسي.

--aditus-muted

لون النص الصامت/الثانوي.

--aditus-heading

لون العنوان/العنوان، أكثر سطوعًا من النص الأساسي.

--aditus-overlay-surface

خلفية معتمة لتفاصيل المقالة المشروطة. قم بتعيين لون معتم عندما يكون السطح نصف شفاف (الموضوعات الزجاجية)، بحيث لا يصبح مربع الحوار العائم شفافًا أبدًا ويظل نصه قابلاً للقراءة.

--aditus-overlay-backdrop

سكريم وراء التفاصيل مشروط. استخدم سكريم داكن (على سبيل المثال rgba(0,0,0,0.6)) للموضوعات الداكنة، حيث يكون الإعداد الافتراضي المشتق من النص هو الحجاب الشاحب.

--aditus-success

لون النجاح: الخطوات المكتملة، تم التحقق.

--aditus-success-soft

لون النجاح الخافت.

--aditus-danger

لون الخطأ.

--aditus-danger-soft

لون خطأ خافت.

--aditus-radius

نصف قطر الزاوية للألواح/البطاقات.

--aditus-radius-sm

نصف قطر الزاوية للمدخلات/الرقائق الصغيرة.

--aditus-radius-button

نصف قطر الزاوية من الأزرار.

--aditus-gap

الفجوة بين المقاطع المكدسة داخل المرحلة.

--aditus-shadow

صندوق الظل للألواح/البطاقات المرتفعة.

--aditus-font

مكدس عائلة الخطوط للواجهة الأمامية الصغيرة بأكملها.

--aditus-font-size

طول CSS واحد (على سبيل المثال 16px أو 1rem) يعمل على قياس الطباعة بأكملها - يحافظ النص الأساسي والبيانات الوصفية وعناصر التحكم والعناوين على أبعادها وتنمو معًا. الافتراضي: 15 بكسل.

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

خطوة المقالة كقائمة رأسية، أو شبكة بطاقات لطبقة التسعير (تم تأليفها عبر ArticleContent).

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

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

اعرض أيقونة كل مقالة (صورة SVG الصغيرة الملونة التي يعرضها المتجر الحقيقي على يسار كل تذكرة) في تخطيط القائمة.

إظهار رسم رأسي: شعار العلامة التجارية الكبير للحدث الذي تم حله كإعلان تسمية رئيسية كامل العرض فوق التدفق. يظهر بمجرد تحديد الحدث.

الثقافة المرسلة كرأس قبول اللغة - تدفع المحتوى المترجم من واجهة برمجة التطبيقات (على سبيل المثال de-DE، en-GB). (API) (Accept-Language)

عند تغيير الخطوة، قم بإعادة ضبط الأداة بلطف لعرضها (ليس عند التثبيت الأولي). متوقف إذا تمكن المضيف من التمرير.

أعمدة خيارات الإجابة لأسئلة استطلاع RadioButtonList/CheckBoxList (1-4). تنهار إطارات العرض الضيقة مرة أخرى إلى عمود واحد.

أدخل السمة الافتراضية المحايدة المجمعة. قم بإيقاف التشغيل عند شحن بشرتك الكاملة.

معاينة حية
معاينة الخلفيةمساعدات التصميم فقط - وليس رمزًا مميزًا لـ Micro-Frontend. تتميز واجهة Micro-Frontend بالشفافية وترث خلفية صفحتك.
mount.ts
import { mount } from "@workspace/aditus-shop-embed";

mount(document.getElementById("aditus-shop")!, {
  publicKey: "pk_deine_seite",
// sessionToken، // مطلوب لتنشيط المتجر — الذي تم سكه بواسطة الواجهة الخلفية لديك، راجع "Micro Frontend"
EventTheme: false، // عرض الرموز المميزة الخاصة بك، وليس العلامة التجارية لمنظم الحدث
});

يتم إصدار الرموز المميزة التي قمت بتغييرها فقط - وتحتفظ الرموز المميزة المحذوفة بالإعدادات الافتراضية المجمعة.