drag and drop angular components
تفاصيل العمل
تُظهر الصورة واجهة سحب وإفلات لإنشاء وتخصيص قالب، يُحتمل أن تكون مخصصة لنظام تصميم رسائل بريد إلكتروني أو مستندات. فيما يلي شرح تفصيلي لأهم المكونات:
لوحة وحدات التخطيط (على اليسار)
عمود واحد (1 Column): خيار تخطيط يستخدم عمودًا واحدًا للمحتوى.
عمودان (2 Columns): خيار تخطيط بعمودين، يوفر مرونة أكبر في توزيع المحتوى.
ثلاثة أعمدة (3 Columns): تخطيط بثلاثة أعمدة، يتيح ترتيبًا أكثر تعقيدًا للمحتوى.
عناصر المحتوى
العنوان (Header – H): عنصر سحب وإفلات لإضافة عناوين إلى التخطيط.
فقرة نصية (Paragraph – T): يتيح إضافة نصوص على شكل فقرات داخل التصميم.
فاصل (Spacer): يُستخدم لإضافة مسافات بين الأقسام أو العناصر.
جدول (Table): يتيح إدراج جدول في التصميم، وهو مفيد للبيانات المنظمة.
قسم الصور
إسقاط الصورة هنا (Drop Image Here): منطقة مخصصة لسحب وإفلات الصور داخل التخطيط.
تصفّح (Browse): زر يتيح للمستخدم رفع صورة من جهازه.
قسم التواقيع
إسقاط الصورة هنا: مكان مخصص لسحب وإفلات صور التوقيعات داخل المستند.
تصفّح: مثل قسم الصور، يتيح رفع صور التوقيعات من الملفات المحلية.
مساحة العمل الخاصة بالقالب (Template Workspace)
عناصر نصية: تتضمن أمثلة لعناوين وفقرات وجداول مملوءة بنصوص مؤقتة (Lorem Ipsum).
جدول بعناوين: مثال لجدول مكوّن من عمودين وصفين، يظهر فيه محتوى مثل "0 1".
مناطق محتوى: أماكن فارغة مخصصة لسحب وإفلات المحتوى (نصوص أو صور)، وعادة ما تكون معلمة بعبارة "Drop Content Here".
قسم المتغيرات (Variables)
على الجانب الأيمن، توجد قائمة بمتغيرات (مثل: test، test2) مع قيم افتراضية (000، 11)، مما يشير إلى إمكانية إدخال محتوى ديناميكي في القالب. يمكن للمستخدم تعديل هذه القيم حسب الحاجة.
أدوات التحكم في القالب (Template Controls)
حذف (Delete): خيار لحذف القالب.
معاينة (Preview): زر لمعاينة القالب قبل الحفظ.
تحميل (Download): يتيح تنزيل القالب.
حفظ القالب (Save Template): لحفظ التصميم الحالي كقالب.
الخلاصة
هذا النظام مصمم لتمكين المستخدمين من بناء وتخصيص قوالب البريد الإلكتروني أو المستندات بصريًا باستخدام أسلوب السحب والإفلات، مع توفير مرونة في إضافة النصوص والجداول والصور.
إضافة المتغيرات تجعل القوالب ديناميكية، بحيث يمكن تخصيص المحتوى أو تعبئته تلقائيًا عند استخدام القالب.