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>
Supported Layouts
يمثل هذا المكّوِن عنصر التحكم الذي يوفر قائمة الخيارات ويتيح للمستخدِم الاختيار من بينها.
| النص البرمجي المطلوب | <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 سلوك التنقل باستخدام لوحة المفاتيح للخيارات في `
|
السمات في خيارات <amp-selector>
| option | تشير إلى إمكانية اختيار هذا الخيار. إذا تم تحديد قيمة، يتم إرسال محتوى القيمة مع النموذج. |
| disabled، selected | تعمل السمات الواردة أعلاه بنفس طريقة العمل في عنصر HTML القياسي [` |
الأحداث
قد تؤدي الأحداث إلى تشغيل الإجراءات على مكونات AMP الأخرى باستخدام السمة on.
مثال: on="select: my-tab.show"
يمكنك قراءة المزيد عن الإجراءات والأحداث في AMP.
| select | يؤدي `amp-selector` إلى تشغيل الحدث `select` عندما يحدد المستخدِم خيارًا. تعمل المحدِدات المتعددة والمحدِدات الفردية على تشغيل هذا الحدث عند اختيار خيارات أو إلغاء اختيارها. هذا ولا يؤدي النقر على الخيارات المتوقفة إلى تشغيل الحدث `select`.
|
التحقق
اطّلع على قواعد amp-selector في مواصفات مدقق AMP.
هل تحتاج إلى مزيد من المساعدة؟
لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.
الذهاب إلى Stack Overflow هل وجدت خطأ أو تفتقد لميزة؟يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.
الانتقال إلى GitHub