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

amp-sidebar

 
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 to display meta content intended for temporary access such as navigation, links, buttons, menus.

 

Required Scripts

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

Supported Layouts

[جدول المحتويات]

الوصف يوفر الشريط الجانبي طريقة لعرض محتوى وصفي مخصص للوصول المؤقت (روابط التنقل والأزرار والقوائم وغيرها). يمكن إظهار الشريط الجانبي بالنقر على زر بينما يظل المحتوى الرئيسي مرئيًا أسفله.
النص البرمجي المطلوب <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
التنسيقات المعتمدة nodisplay
أمثلة اطّلِع على مثال amp-sidebar في الموقع "AMP بالمثال".

نظرة عامة

يخفي المكوِّن <amp-sidebar> محتوى وصفيًا مخصصًا للوصول المؤقت (روابط التنقل والأزرار والقوائم وغيرها). يمكن فتح <amp-sidebar> وإغلاقه بالنقر على الأزرار والنقر خارج amp-sidebar. ومع ذلك، يمكن استخدام السمات الاختيارية التي تقبل الاستعلامات عن الوسائط لعرض محتوى وصفي في أجزاء أخرى من الموقع. تسمح عناصر <nav toolbar="(media query)" toolbar-target="elementID"> الثانوية بعرض المحتوى داخل الشريط الجانبي على أجزاء أخرى من المحتوى الرئيسي.

السلوك

  • يجب أن يكون <amp-sidebar> عنصر <body> ثانوي مباشر.
  • يمكن للشريط الجانبي الظهور فقط على الجانب الأيسر أو الأيمن من الصفحة.
  • قد يحتوي <amp-sidebar> على أي عناصر HTML صالحة (تقبلها AMP).
  • قد يحتوي <amp-sidebar> على أي من عناصر AMP التالية:
    • <amp-accordion>
    • <amp-img>
    • <amp-fit-text>
    • <amp-list>
    • <amp-live-list>
    • <amp-social-share>
  • يبلغ أقصى ارتفاع للشريط الجانبي 100vh، وإذا تجاوز الارتفاع 100vh، يظهر عندها شريط التمرير الرأسي. يتم ضبط الارتفاع التلقائي على 100vh في CSS ويمكن إلغاء هذه القيمة في CSS.
  • يمكن ضبط عرض الشريط الجانبي وضبطه باستخدام CSS (الحد الأدنى للعرض هو 45px).
  • يتم إيقاف التكبير/التصغير باللمس على amp-sidebar ويكون قناعًا عند فتح الشريط الجانبي.

مثال:

في المثال التالي، نستخدم amp-sidebar لتضمين عناصر التنقل. ومع ذلك، يتم تعيين العنصر الثاني والرابع وNav Item 2 وNav Item 4 لمعرّف عنصر على الصفحة. وباستخدام السمة on، يمكننا التمرير بسلاسة إلى العنصر باستخدام معرّف العنصر وscrollTo.

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</amp-sidebar>

فتح الشريط الجانبي وإغلاقه

للتبديل أو فتح الشريط الجانبي أو إغلاقه عند النقر على العنصر، اضبط سمة الإجراء on على العنصر وحدّد أحد أساليب الإجراءات التالية:

الإجراء الوصف
open (تلقائي) يفتح الشريط الجانبي.
close يغلق الشريط الجانبي.
toggle يبدّل حالة الشريط الجانبي.

إذا نقر المستخدم مرة أخرى على منطقة المحتوى الرئيسي المرئي جزئيًا، سيؤدي هذا إلى إغلاق الشريط الجانبي.

أو سيؤدي الضغط على مفتاح escape بلوحة المفاتيح إلى إغلاق الشريط الجانبي كذلك.

مثال:

<button class="hamburger" on='tap:sidebar1.toggle'></button>
<button on='tap:sidebar1'>Open</button>
<button on='tap:sidebar1.open'>Open</button>
<button on='tap:sidebar1.close'>x</button>

Toolbar

يمكنك إنشاء عنصر toolbar يتم عرضه في <body> عن طريق تحديد السمة toolbar باستعلام عن الوسائط وتحديد السمة toolbar-target بمعرّف عنصر في عنصر <nav> هو عنصر ثانوي لـ <amp-sidebar>. يكرر toolbar العنصر <nav> وعناصره الثانوية ويضيف العنصر إلى العنصر toolbar-target.

السلوك

  • قد ينفذ الشريط الجانبي أشرطة الأدوات بإضافة عناصر التنقل باستخدام السمة toolbar والسمة toolbar-target.
  • يجب أن يكون عنصر التنقل عنصر <amp-sidebar> ثانويًا ويتبع هذا التنسيق: <nav toolbar="(media-query)" toolbar-target="elementID">.
    • هذا مثال لاستخدام صالح لشريط الأدوات: <nav toolbar="(max-width: 1024px)" toolbar-target="target-element">.
  • يجب أن يحتوي التنقل المتضمن سمة شريط الأدوات على عنصر <ul> واحد يحتوي على عناصر <li>.
    • قد تحتوي العناصر <li> على أي عناصر HTML صالحة (تقبلها AMP) أو أي من عناصر AMP يقبلها <amp-sidebar>.
  • يتم تطبيق سلوك شريط الأدوات فقط عندما يكون الاستعلام عن وسائط للسمة toolbar صالحًا. ويجب أيضًا توفر عنصر بمعرّف السمة toolbar-target على الصفحة ليتم تطبيق شريط الأدوات.

مثال: شريط الأدوات الأساسي

في المثال التالي، نعرض toolbar إذا كان عرض النافذة أقل من 767px أو يساويها. يحتوي toolbar على عنصر إدخال بحث. سيتم إلحاق العنصر toolbar بالعنصر <div id="target-element">.

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

تصميم شريط الأدوات

سيكون للعنصر toolbar داخل العنصر <amp-sidebar> فئات مُطبّقة على العنصر بناءً على ما إذا كان عنصر toolbar-target معروضًا أو مخفيًا. ويفيد هذا في تطبيق تصميمات مختلفة على العنصر toolbar ثم العنصر toolbar-target. والفئات هي: amp-sidebar-toolbar-target-shown وamp-sidebar-toolbar-target-hidden. يتم تطبيق الفئة amp-sidebar-toolbar-target-shown على العنصر toolbar عندما يكون العنصر toolbar-target معروضًا. يتم تطبيق الفئة amp-sidebar-toolbar-target-hidden على العنصر toolbar عندما يكون العنصر toolbar-target مخفيًا.

مثال: فئات حالة شريط الأدوات

في المثال التالي، نعرض toolbar إذا كان عرض النافذة أقل من 767px أو يساويها. يحتوي toolbar على عنصر إدخال بحث. سيتم إلحاق العنصر toolbar بالعنصر <div id="target-element">. ومع ذلك، أضفنا بعض التصميمات المخصصة لإخفاء العنصر toolbar عند عرض العنصر <div id="toolbar-target">.

<style amp-custom="">

  .amp-sidebar-toolbar-target-shown {
      display: none;
  }

</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

يمكنك الاطّلاع على أمثلة توضيحية في موقع AMP بالمثال.

الشريط الجانبي للقصص

من المقبول استخدام amp-sidebar داخل المكوِّن amp-story.

السلوك

  • يجب أن يكون <amp-sidebar> عنصرًا ثانويًا مباشرًا للمكوِّن <amp-story>.
  • يتم ضبط الشريط الجانبي افتراضيًا على الجانب "start" لمستندات AMP العادية، ما يعني الجانب الأيمن للغات من اليسار إلى اليمين والجانب الأيسر للغات من اليمين إلى اليسار.
  • يحتوي <amp-sidebar> على اللون الأبيض كلون خلفية تلقائي ويمكن إلغاؤه في CSS.
  • يتم تنفيذ أقصى عرض للمكوِّن <amp-sidebar> عند 280px و 320px لتجارب جهاز كمبيوتر سطح المكتب.
  • سيظهر زر التصميم "hamburger" الذي يفتح/يغلق الشريط الجانبي في واجهة المستخدم للقصة.

هناك قيود معينة على السمات والميزات المسموح بها لتوفير تجربة واجهة مستخدم متسقة عبر منصة القصص. فيما يلي سمات وميزات amp-sidebar المسموح بها في amp-story.

السمات المسموح بها

مثال: الشريط الجانبي الأساسي في القصة

يعرض المثال التالي amp-sidebar بسيطًا داخل amp-story.

...
<body>
  <amp-story standalone>
  <amp-sidebar id="sidebar1" layout="nodisplay">
    <ul>
      <li><a href="https://amp.dev"> External Link </a></li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
    </ul>
  </amp-sidebar>
  <amp-story-page id="cover">
    <amp-story-grid-layer template="fill">
      <h1>Hello World</h1>
      <p>This is the cover page of this story.</p>
    </amp-story-grid-layer>
  </amp-story-page>
  ...
</body>

السمات

side

تشير إلى جانب الصفحة الذي يجب فتح الشريط الجانبي منه، إما left أو right. في حال عدم تحديد side، سيتم اكتساب قيمة side من السمة dir للعلامة body (ltr => left وrtl => right). وفي حال عدم توفر dir، يتم ضبط side تلقائيًا على left.

layout

تحدد تنسيق عرض الشريط الجانبي الذي يجب أن يكون nodisplay.

open

تتوفر هذه السمة عندما يكون الشريط الجانبي مفتوحًا.

data-close-button-aria-label

سمة اختيارية تُستخدَم لتحديد تصنيف ARIA لزر الإغلاق المضَاف لسهولة الاستخدام.

toolbar

تتوفر هذه السمة على عناصر <nav toolbar="(media-query)" toolbar-target="elementID"> الثانوية وتقبل الاستعلام عن الوسائط عن وقت عرض شريط الأدوات. راجِع قسم شريط الأدوات للحصول على مزيد من المعلومات عن استخدام أشرطة الأدوات.

toolbar-target

تتوفر هذه السمة على عنصر <nav toolbar="(media-query)" toolbar-target="elementID"> الثانوي وتقبل معرّف عنصر على الصفحة. ستضع السمة toolbar-target شريط الأدوات في المعرّف المحدَد للعنصر في الصفحة، بدون التصميم التلقائي لشريط الأدوات. راجِع قسم شريط الأدوات للحصول على مزيد من المعلومات عن استخدام أشرطة الأدوات.

السمات المشتركة

يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP.

التصميم

يمكن تصميم المكوِّن amp-sidebar باستخدام CSS القياسي.

  • قد يتم تحديد width للمكوِّن amp-sidebar لضبط العرض بين قيم الحد الأدنى (45px) والأقصى (80vw) المُعدَة مسبقًا.
  • يمكن تحديد ارتفاع amp-sidebar لضبط ارتفاع الشريط الجانبي، إذا لزم الأمر. إذا تجاوز الارتفاع 100vw، سيكون للشريط الجانبي شريط تمرير رأسي. يبلغ ارتفاع الشريط الجانبي المُعَد مسبقًا 100vw ويمكن إلغاؤه في CSS لجعله أقل.
  • يتم إظهار الحالة الحالية للشريط الجانبي من خلال السمة open التي يتم تعيينها على علامة amp-sidebar عندما يكون الشريط الجانبي مفتوحًا على الصفحة.

انتقِل إلى الموقع AMP Start للاطّلاع على قوائم التنقل المتجاوبة المُصمَمة مسبقًا التي يمكن استخدامها في صفحات AMP.

التمرير التلقائي داخل المناطق الكاملة

يمكن أن يمرر amp-sidebar تلقائيًا الحاوية الكاملة إلى العنصر الأول المضَاف إلى السمة autoscroll في كل من حالات الشريط الجانبي وشريط الأدوات.

هذه الميزة مفيدة عند التعامل مع قائمة التنقل الطويلة والرغبة في أن يتم تمرير الشريط الجانبي إلى عناصر التنقل الحالية عند تحميل الصفحة.

عند استخدام الميزة toolbar، تعمل autoscroll فقط إذا تم تعيين العنصر <nav toolbar> على overflow: auto أو overflow: scroll.

<style amp-custom="">

  nav [toolbar] {
    overflow: auto;
  }

</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li autoscroll class="currentPage">Nav item 4</li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

يُرجى الاطّلاع على ملف الأمثلة هذا لمعرفة أمثلة عملية للترميز.

اعتبارات تجربة المُستخدِم

عند استخدام <amp-sidebar>، ضع في اعتبارك أن المستخدمين سيعرضون غالبًا صفحتك على الهاتف الجوال في عارض صفحات AMP وهو ما قد يعرض رأسًا ثابتة الموضع. بالإضافة إلى ذلك، غالبًا ما تعرض المتصفحات رأسها الثابت في أعلى الصفحة. لذا فإن إضافة عنصر آخر ثابت الموضع إلى أعلى الشاشة قد تؤدي إلى شغل قدر كبير من مساحة شاشة الجوال بمحتوى لا يمنح المستخدِم معلومات جديدة.

لهذا السبب نوصي بعدم وضع خصائص فتح الشريط الجانبي في رأس ثابت بالعرض الكامل.

التحقق

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

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

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

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

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

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