AMP

amp-selector

Ce composant représente une commande qui affiche un menu d'options et permet à l'utilisateur d'y effectuer une sélection.

Script requis<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Mises en page compatiblesToutes
ExemplesConsultez l'exemple de composant amp-selector sur AMP By Example.

Comportement

Le sélecteur AMP est une commande qui présente une liste dans laquelle l'utilisateur peut choisir une ou plusieurs options. Le contenu des options ne se limite pas simplement à du texte.

  • Un élément amp-selector peut contenir des éléments HTML ou des composants AMP arbitraires (amp-carousel, amp-img, etc.).
  • Un élément amp-selector ne peut pas contenir de commandes amp-selector imbriquées.
  • Vous pouvez définir les options que l'utilisateur peut sélectionner en ajoutant l'attribut option à l'élément et en attribuant ensuite une valeur à l'attribut (<li option='value'></li>, par exemple).
  • Vous pouvez définir les options désactivées en ajoutant l'attribut disabled à l'élément (<li option='d' disabled></li>, par exemple).
  • Vous pouvez définir les options présélectionnées en ajoutant l'attribut selected à l'élément (<li option='b' selected></li>, par exemple).
  • Pour autoriser les sélections multiples, ajoutez l'attribut multiple à l'élément amp-selector. Par défaut, amp-selector autorise une seule sélection à la fois.
  • Pour désactiver l'intégralité de l'élément amp-selector, ajoutez-y l'attribut `disabled```.
  • Lorsqu'un élément amp-selector placé dans une balise form contient un attribut name, il se comporte comme un groupe de cases à cocher ou de cases d'option, et envoie les valeurs sélectionnées (c'est-à-dire celles qui sont attribuées à l'option) par rapport au nom de l'élément amp-selector si un événement d'envoi est effectué sur le formulaire.

Exemple :

<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="">Aucune des options ci-dessus</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>

<p><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>

Effacer les sélections

Pour effacer toutes les sélections lorsque l'utilisateur clique ou appuie sur un élément, définissez l'attribut d'action on sur l'élément en question et spécifiez ensuite l'id du sélecteur AMP avec la méthode d'action clear.

Exemple :

<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>

Regardez les démos sur AMP By Example.

Attributs

Attributs sur <amp-selector>

disabled, form, multiple, nameLes attributs ci-dessus se comportent de la même manière qu'avec un code HTML standard select element [](https://developer.mozilla.org/en/docs/Web/HTML/Element/select).
keyboard-select-modeL'attribut keyboard-select-mode détermine le mode de navigation au clavier pour les options placées entre amp-selector.
  • none (valeur par défaut) : la touche de tabulation permet de basculer entre les éléments placés entre amp-selector. L'utilisateur doit appuyer sur la touche "Entrée" ou sur la barre d'espace pour modifier la sélection. Les touches fléchées sont désactivées.
  • focus : la touche de tabulation active l'élément entre amp-selector. L'utilisateur parcourt les différents éléments à l'aide des touches fléchées. Il doit appuyer sur la touche "Entrée" ou sur la barre d'espace pour modifier la sélection.
  • select : la touche de tabulation active l'élément entre amp-selector. La sélection change à mesure que l'utilisateur parcourt les différentes options à l'aide des touches fléchées.

Attributs sur les options <amp-selector>

optionIndique que l'option peut être sélectionnée. Si une valeur est spécifiée, son contenu est envoyé avec le formulaire.
disabled, selectedLes attributs ci-dessus se comportent de la même manière qu'avec un code HTML standard [option] élément (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).

Événements

Les événements peuvent déclencher des actions sur d'autres composants AMP à l'aide de l'attribut on. Par exemple : on="select: my-tab.show"

En savoir plus sur les actions et événements AMP

selectamp-selector déclenche l'événement select lorsque l'utilisateur sélectionne une option. Les sélecteurs multiples et les sélecteurs uniques déclenchent cet événement lorsque l'utilisateur sélectionne ou désélectionne des options. L'événement select n'est pas déclenché lorsque l'utilisateur appuie sur des options désactivées.
  • event.targetOption contient la valeur d'attribut option de l'élément sélectionné.
  • event.selectedOptions contient un tableau des valeurs d'attribut option pour tous les éléments sélectionnés.

Validation

Consultez les règles relatives à amp-selector dans les spécifications du validateur 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