AMP

amp-selector

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

Description

Represents a control that presents a menu of options and lets the user choose from it. it.

 

Required Scripts

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

يمثل هذا المكّوِن عنصر التحكم الذي يوفر قائمة الخيارات ويتيح للمستخدِم الاختيار من بينها.

النص البرمجي المطلوب <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
التنسيقات المعتمدة الكل
أمثلة اطلّع على مثال amp-selector في الموقع "AMP بالمثال".

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

السُلوك

مُحدِد AMP عبارة عن عنصر التحكم الذي يوفر قائمة بالخيارات ويتيح للمستخدِم اختيار أحدها أو العديد منها، علمًا بأن أنواع محتوى الخيارات لا يقتصر على النص فقط.

  • يمكن أن يحتوي amp-selector على أي عنصر عشوائي من عناصر HTML أو مكونات AMP (مثال: amp-carousel أو amp-img أو ما إلى ذلك).
  • لا يمكن أن يحتوي amp-selector على أي عناصر تحكم amp-selector مدمجة.
  • يمكن تعيين الخيارات القابلة للاختيار بإضافة السمة option إلى العنصر وتحديد قيمة للسمة (مثال: <li option='value'></li>).
  • يمكن تعيين الخيارات الموقوفة بإضافة السمة disabled إلى العنصر (مثال: <li option='d' disabled></li>).
  • يمكن تعيين الخيارات المحددة مسبقًا بإضافة السمة selected إلى العنصر (مثال: <li option='b' selected></li>).
  • لإتاحة تعدد الاختيارات، أضِف السمة multiple إلى العنصر amp-selector. يتيح العنصر amp-selector تلقائيًا اختيارًا واحدًا في المرة.
  • لإيقاف amp-selector بأكمله، أضِف السمة disabled إلى العنصر amp-selector.
  • عندما يحتوي amp-selector على السمة name ويكون amp-selector داخل العلامة form، وحدثت عملية إرسال على النموذج، يعمل amp-selector بمثابة مجموعة زر اختيار/مربع اختيار ويُرسل القيم المختارة (التي تم تعيينها للخيار) المقابلة لاسم amp-selector.

مثال:

<form id="form1" action="/" method="get" target="_blank">
  <amp-selector name="single_image_select" layout="container">
    <ul>
      <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li>
      <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li>
      <li option="na" selected="">لا شيء مما سبق</li>
    </ul>
  </amp-selector>
  <amp-selector name="multi_image_select" layout="container" multiple="">
    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
  </amp-selector>
  <amp-selector name="multi_image_select_1" layout="container" multiple="">
    <amp-carousel id="carousel-1" width="200" height="60" controls="">
      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
      <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img>
      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
      <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img>
    </amp-carousel>
  </amp-selector>
</form>
<amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1">
  <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls="">
    <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img>
    <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img>
    <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img>
    <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img>
  </amp-carousel>
</amp-selector>

محو الاختيارات

لمحو جميع الاختيارات عند النقر على العنصر، عيِّن سمة الإجراء on على العنصر وحدِد المعرّف id للعنصر AMP Selector بطريقة الإجراء clear.

مثال:

<button on="tap:mySelector.clear">Clear Selection</button>
<amp-selector id="mySelector" layout="container" multiple>
  <div option>Option One</div>
  <div option>Option Two</div>
  <div option>Option Three</div>
</amp-selector>

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

السمات

السمات في المكّوِن <amp-selector>

disabled وform وmultiple وname تعمل السمات الواردة أعلاه بنفس طريقة العمل في عنصر HTML القياسي [`
keyboard-select-mode تحدد السمة keyboard-select-mode سلوك التنقل باستخدام لوحة المفاتيح للخيارات في ``.
  • none (تلقائي): يغيّر المفتاح Tab التركيز بين العناصر في ``. يجب على المستخدِم الضغط على مفتاح الإدخال أو المسافة لتغيير الاختيار. وهذا ويتم إيقاف مفاتيح الأسهم.
  • focus: ينقل المفتاح Tab التركيز إلى ``. ينتقل المستخدِم بين العناصر باستخدام مفاتيح الأسهم. ويجب الضغط على مفتاح الإدخال أو المسافة لتغيير الاختيار.
  • select: ينقل المفتاح Tab التركيز إلى ``. يتغير الاختيار مع تنقل المستخدِم بين الخيارات باستخدام مفاتيح الأسهم.

السمات في خيارات <amp-selector>

option تشير إلى إمكانية اختيار هذا الخيار. إذا تم تحديد قيمة، يتم إرسال محتوى القيمة مع النموذج.
disabled، selected تعمل السمات الواردة أعلاه بنفس طريقة العمل في عنصر HTML القياسي [`

الأحداث

قد تؤدي الأحداث إلى تشغيل الإجراءات على مكونات AMP الأخرى باستخدام السمة on. مثال: on="select: my-tab.show"

يمكنك قراءة المزيد عن الإجراءات والأحداث في AMP.

select يؤدي `amp-selector` إلى تشغيل الحدث `select` عندما يحدد المستخدِم خيارًا. تعمل المحدِدات المتعددة والمحدِدات الفردية على تشغيل هذا الحدث عند اختيار خيارات أو إلغاء اختيارها. هذا ولا يؤدي النقر على الخيارات المتوقفة إلى تشغيل الحدث `select`.
  • يحتوي `event.targetOption` على قيمة السمة `option` للعنصر المختار.
  • يحتوي `event.selectedOptions` على مصفوفة قيم السمة `option` لجميع العناصر المختارة.

التحقق

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

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

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

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

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

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