AMP
AR
English Deutsch Français Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-accordion

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Provides a way for viewers to have a glance at the outline of the content and jump to a section of their choice at will.

 

Required Scripts

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Supported Layouts

يوفّر هذا المكّوِن طريقة للمشاهدين لإلقاء نظرة على مخطط المحتوى والانتقال إلى أي قسم. ويفيد هذا في أجهزة الجوال عند الحاجة إلى التمرير في قسم مكون من جملتين فقط.

النص البرمجي المطلوب <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
التنسيقات المعتمدة container
أمثلة مثال توضيحي لترميز amp-accordion

السُلوك

يتيح لك المكوِّن amp-accordion عرض أقسام محتوى قابلة للتصغير والتوسيع. يُعتبر كل عنصر من العناصر الثانوية المباشرة للمكّوِن amp-accordion قسمًا من accordion. يجب أن تكون كل عقدة من هذه العقد علامة <section>.

  • يمكن أن يحتوي amp-accordion على عنصر <section> واحد أو أكثر كعناصر ثانوية مباشرة له.
  • يجب أن يحتوي كل <section> بالضبط على عنصرَين ثانويَين مباشرَين.
  • يمثل العنصر الثانوي الأول (من القسم) عنوان القسم ويجب أن يكون عنصر عنوان (واحد من h1 أو h2 أو ... أو h6 أو header).
  • يمكن أن يكون العنصر الثانوي الثاني (من القسم) أي علامة مسموح بها في شفرة HTML لصفحات AMP ويمثل محتوى القسم.
  • يؤدي النقر على عنوان القسم إلى توسيع القسم أو تصغيره.
  • سيتم الاحتفاظ بحالة التصغير/التوسيع لكل قسم في العنصر amp-accordion على مستوى الجلسة. لإيقاف الحفاظ على هذه الحالة، أضِف السمة disable-session-states إلى العنصر amp-accordion.

مثال: عرض accordion

في هذا المثال، نعرض ثلاثة أقسام حيث يتم توسيع القسم الثالث عند تحميل الصفحة. وتم أيضًا إيقاف الحفاظ على حالة التصغير/التوسيع من خلال تعيين disable-session-states.

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

 
<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>
فتح هذه القصاصة في الساحة

انتقِل إلى الموقع AMP بالمثال لمشاهدة المزيد من العروض التوضيحية للمكّوِن amp-accordion.

الأحداث

سيتم تشغيل الأحداث التالية في section من accordion.

expand يتم تشغيل هذا الحدث على section المستهدف ويغيّر من الحالة تصغير إلى الحالة توسيع. يُرجى ملاحظة أن طلب expand على section قيد التوسيع أصلاً لن يؤدي إلى تشغيل هذا الحدث.
collapse يتم تشغيل هذا الحدث على section المستهدف ويغيّر من الحالة توسيع إلى الحالة تصغير. يُرجى ملاحظة أن طلب collapse على section قيد التصغير أصلاً لن يؤدي إلى تشغيل هذا الحدث.

الإجراءات

expand يتم تشغيل هذا الحدث على section المستهدف ويغيّر من الحالة تصغير إلى الحالة توسيع. يُرجى ملاحظة أن طلب expand على section قيد التوسيع أصلاً لن يؤدي إلى تشغيل هذا الحدث.
toggle يبدّل هذا الإجراء بين الحالة expanded وcollapsed للمكّوِن amp-accordion. عند طلب الإجراء بدون أي وسيطات، فإنه يبدل بين جميع أقسام accordion. يمكن تحديد قسم واحد باستخدام الوسيطة section و` id` المقابل كقيمة لها.
expand يعمل هذا الإجراء على توسيع amp-accordion. إذا كانت الحالة expanded، ستظل هكذا. عند طلب الإجراء بدون أي وسيطات، فإنه يوسّع جميع أقسام accordion. يمكن تحديد قسم واحد باستخدام الوسيطة section وid المقابل كقيمة لها.
collapse يعمل هذا الإجراء على تصغير amp-accordion. إذا كانت الحالة collapsed، ستظل هكذا. عند طلب الإجراء بدون أي وسيطات، فإنه يصغّر جميع أقسام accordion. يمكن تحديد قسم واحد باستخدام الوسيطة section و id المقابل كقيمة لها.

السمات

animate عيِّن هذه السمة على <amp-accordion> لتحريك التوسيع / التصغير لجميع أقسام accordion.
disable-session-states عيِّن هذه السمة على <amp-accordion> لإيقاف الحفاظ على حالة accordion من حيث التصغير/التوسيع.
expanded عيِّن هذه السمة على <section> لعرض القسم موسّعًا عند تحميل الصفحة.
expand-single-section عيِّن هذه السمة على <amp-accordion> للسماح بتوسيع <section> واحد فقط في المرة الواحدة. إذا ركّز المستخدم على <section> واحد، سيتم تصغير أي <section> آخر كان قيد التوسيع سابقًا.

التصميم

  • يمكنك استخدام محدد العنصر amp-accordion لتصميمه بحرية.
  • عناصر amp-accordion هي دائمًا display: block.
  • لا يمكن أن تكون عناصر <section> والعنوان والمحتوى قابلة للتعويم.
  • عندما يتم توسيع القسم، يكون للعنصر <section> السمة expanded.
  • يمحو عنصر المحتوى عناصره الثانوية بنفسه باستخدام overflow: hidden وبالتالي لا يمكن أن يحتوي على أشرطة التمرير.
  • يتم تعيين هوامش عناصر <amp-accordion> و<section> والعنوان والمحتوى على 0 ويمكن إلغاء هذا في التصميمات المخصصة.
  • كل من عناصر العنوان والمحتوى position: relative.

التحقق

اطِّلع على قواعد amp-accordion في مواصفات مدقق AMP.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub