AMP
FR
English Deutsch العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

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

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

 

Required Scripts

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

Supported Layouts

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 compatibles Toutes
Exemples Consultez 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, name Les 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-mode L'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>

option Indique que l'option peut être sélectionnée. Si une valeur est spécifiée, son contenu est envoyé avec le formulaire.
disabled, selected Les 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

select amp-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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub