عنصر العرض الدوّار

معرض صور قابل للتمرير بالسحب، يعمل بالكامل عبر CSS — دون JavaScript، فيعمل في كل تطبيق بريد يدعم تقنية :checked التي يقوم عليها، ويتراجع إلى صورة واحدة واضحة في كل مكان آخر.

آلية العمل

المستوى الحركي آلة حالات مبنية على أزرار الاختيار الدائرية: تحصل كل شريحة على حقل اختيار دائري مخفي يشترك مع البقية في اسم مجموعة واحد، وتسمية تُعرض على هيئة نقطة، وإطار يتحكّم في ظهوره محدِّد الأشقاء :checked ~. النقر على نقطة (أو السحب حيثما كان مدعومًا) يحدّد زر الاختيار الخاص بها فيظهر الإطار المطابق بينما تبقى البقية display:none. يبدأ زر اختيار الشريحة الأولى محدَّدًا، فيُفتح العنصر دائمًا على الشريحة الأولى. وهذه هي الآلية نفسها التي يقوم عليها عنصرا القائمة القابلة للطي وبطاقة الكشط، لكنها مطبَّقة هنا على صف من الإطارات المتنافية بدلًا من مفاتيح تبديل مستقلة.

وحيثما لا تُحترم تقنية CSS هذه (محرك العرض Word في Outlook، وأي تطبيق بريد يحذف عناصر <style> أو يتجاهل محدِّدات الأشقاء)، يتراجع العنصر إلى بطاقة ثابتة. تعرض هذه البطاقة صورة الشريحة الأولى وتعليقها فقط، إضافة إلى رابط «عرض جميع الشرائح (N)» إلى العرض المباشر المستضاف. والعرض المباشر صفحة ويب حقيقية، فتبقى فيها كل شريحة على بُعد نقرة واحدة بدلًا من أن تضيع؛ وهو يعيد استخدام ترميز :checked نفسه تمامًا، إذ يدعمه المتصفح الحقيقي دائمًا. أما العرض الدوّار الذي لا يحتوي إلا على شريحة واحدة فيتخطّى آلة الحالات بأكملها ويُعرض صورةً ثابتة واحدة؛ فلا يوجد معرض يُتصفَّح.

الحقول القابلة للضبط، وكلها في لوحة الخصائص الخاصة بالعنصر:

• لون الخلفية — خلفية البطاقة نفسها، مستقلة عن سمة البريد.
• الحشو — المسافة الداخلية للعنصر.
• الحدّ — العرض والنمط واللون حول البطاقة بأكملها.
• استدارة الزوايا على البطاقة.
• لون التعليق وحجم خط التعليق — يُطبَّقان بالتساوي على نص تعليق كل شريحة.

تحمل كل شريحة (وهي عنصر فرعي من العرض الدوّار، يُضاف ويُعاد ترتيبه مثل أي عنصر آخر في الشجرة) حقولها الثلاثة الخاصة: صورة (تُختار من مكتبة الوسائط)، وتعليق، ورابط URL اختياري. فإذا ضُبط، فإن النقر على صورة الشريحة يفتح ذلك الرابط، باستقلال عن التنقّل بالنقاط المستخدم للانتقال بين الشرائح.

الشرائح ليست أحداث تفاعل — فالمستلم الذي يتصفّح عرضًا دوّارًا لا يرسل شيئًا، ولذا لا يظهر أي شيء يخص التنقّل في العرض الدوّار في لوحة الردود أو تصدير CSV أو Webhook المشروع. أما رابط الشريحة، إن ضُبط، فهو عنصر عادي حامل لرابط: يحصل على إجراء "click" يمرّ عبر إعادة التوجيه المتتبَّعة الخاصة بالمستلم بالطريقة نفسها التي يمرّ بها زر أو صورة مرتبطة برابط، ويُحتسب في الخريطة الحرارية للنقرات في المشروع.

أمثلة

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

كيف يبدو البديل الثابت

<div style="margin:12px 0;background-color:transparent">
  <div class="carousel-fallback">
    <div class="lv-frame lv-frame-0">
      <a href="https://example.com/product-a">
        <img src="https://cdn.example.com/slide1.jpg" alt="Slide 1" style="width:100%;max-width:100%">
      </a>
      <p style="margin:8px 0 0;font-size:14px;color:#374151">Slide 1</p>
    </div>
    <p style="margin:8px 0 0;font-size:13px">
      <a href="https://mailinapp.com/v/eyJhbGci..." style="color:#4f46e5">See all 4 slides &rarr;</a>
    </p>
  </div>
</div>

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

انظر أيضًا

• نظرة عامة على مرجع العناصر
• كيف تعمل البدائل
• التفاعلات والتحليلات