مكتبة واجهات بارس‑وايز

01للمطورين · مكتبة الواجهات

مكتبة المكوّنات

تُبنى واجهة المهارة من كتل جاهزة. بطاقات ومفاتيح ومعارض ونماذج — داخل الدردشة مباشرة. كل كتلة سمة data: تكتبها في drawer.html، ويجمّع الودجت المكوّن بنفسه.

01

مكوّناً
بطاقات واختيار وإدخال ووسائط

02

حدثاً
على مضيف الدرج

03

سطر CSS
‏Tailwind وسمات data فقط

04

المراقب
‏MutationObserver يلتقط التغيّر الديناميكي

02الكتالوج · المكوّنات

مكوّنات جاهزة

ترميز منك — وتجميع من الودجت. تُعلَن المكوّنات بسمات data وتُعالَج عبر MutationObserver: فتعمل في الترميز الثابت وعند الإنشاء من الشيفرة. وتصل أحداث المستخدم إلى مضيف الدرج.

data-card · data-card-horizontal

البطاقات

عمودية بصورة في الأعلى أو أفقية بأسلوب متجر التطبيقات: عنوان ونص وأيقونة دائرية أو مستديرة الحواف.

data-radio-switch

مفتاح اختيار

شريط بمؤشر متحرك على عدة خيارات. ويُعطَّل بالصنف radio-switch--disabled.

data-select-grid

شبكة اختيار

خلايا قابلة للنقر في عمودين أو ثلاثة: تسمية وقيمة وتعليق. واحدة نشطة في كل مرة.

data-select-list

قائمة اختيار

صفوف بعنوان ووصف — لخيار واحد حصري في عمود واحد.

data-suggest-input

اقتراح تلقائي

حقل باقتراحات منسدلة عبر وسيط الاقتراحات في الخادم. والقائمة ضمن التدفق تدفع المحتوى للأسفل.

input-wrapper · input-field

حقل وجدول

أصناف جاهزة لحقل الإدخال وشبكة نتائج بـ Tailwind — والفجوة تصنع الفواصل البصرية.

data-emoji-rate

تقييم بالرموز التعبيرية

ثلاثة وجوه متحركة — سيئ ومقبول وممتاز. لملاحظات وتقييمات سريعة.

data-action

أزرار الإجراءات

رابط بأيقونة علامة تلقائية (تيليجرام أو واتساب أو اتصال) أو نداء راجع بأيقونة من مجموعة Heroicons.

data-gallery

المعرض

شبكة معاينات مع عارض Fancybox. والروابط مباشرة أو عبر أصول الحزمة {{asset:…}}.

data-detail-list

قائمة التفاصيل

بطاقة ملخص: صفوف «تسمية ← قيمة» بفواصل. لتأكيد الطلب قبل إرساله.

data-file-upload

رفع الملفات

منطقة إفلات للصور والفيديو مع رفع إلى التخزين الكائني عبر رابط موقّع مسبقاً.

03المكتبة · بالأرقام

متناسق في النظام

الأنماط معزولة في Shadow DOM. تكتب Tailwind فقط، ويأتي لون العلامة من أدوات skill-primary، وارتفاعات الحقول والمفاتيح مضبوطة سلفاً لتتناسب.

01

أداة skill-primary
text, bg, ring, border, fill

02

ارتفاع عناصر التحكم
الإدخال والاختيار متناسقان

03

حد الأصل
PNG, JPG, WebP, SVG, GIF

04

ملفاً في الحزمة
الرفع إلى التخزين تلقائي

06الصندوق الرملي · القواعد

المهارات تعيش في صندوق رملي

العزل
الأنماط في Shadow DOM
‏Tailwind فقط
دون CSS خاص
وسائط الدرج
‏DOM وبيانات ومعاملات
مساعدات الواجهة
اللغات والطلبات والبريد
شيفرة خطرة
يرفضها المدقق
نداءات خارجية
عبر وسيط الودجت
07أسئلة شائعة · للمطورين

أسئلة المطورين

بسمة data في drawer.html: <div data-radio-switch data-options="…">. يعالجه الودجت عبر MutationObserver — فيعمل مع الترميز الثابت ومع الإنشاء من الشيفرة.

ابدأوا

جرّبوه على بياناتكم

ارفعوا مستنداتكم وكتالوجكم، ثم اسألوا المساعد الأسئلة التي تُطرح عليكم. هذا هو الاختبار الوحيد ذو المعنى.