AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-accordion

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

النص البرمجي المطلوب <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>
Open this snippet in playground

انتقِل إلى الموقع 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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub