AMP

Actions et événements dans les e-mails AMP

Cette documentation couvre les actions et événements pour le format d'e-mail AMP. Lisez la section Actions et événements pour les sites Web, les stories et les annonces AMP.

L'attribut on est utilisé pour installer des gestionnaires d'événements sur les éléments. Les événements pris en charge dépendent de l'élément.

La valeur de la syntaxe est un langage simple spécifique au domaine du formulaire:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Consultez le tableau ci-dessous pour une description de chaque partie de la syntaxe.

Syntaxe Requis? Description
eventName oui C'est le nom de l'événement qu'un élément expose.
targetId oui C'est l'identifiant du DOM de l'élément ou une cible spéciale prédéfinie sur laquelle vous souhaitez exécuter une action en réponse à l'événement. Dans l'exemple suivant, targetId représente l'identifiant du DOM de la cible amp-lightbox, photo-slides.
<amp-lightbox id="photo-slides"></amp-lightbox>
<button on="tap:photo-slides">Show Images</button>
methodName non Pour les éléments qui ont des actions par défaut.

C'est la méthode que l'élément cible (référencé par targetId) expose et que vous souhaitez exécuter lorsque l'événement est déclenché.

AMP possède un concept d'action par défaut que les éléments peuvent implémenter. Ainsi, en omettant le methodName, AMP exécutera cette méthode par défaut.

arg=value non Certaines actions, si elles sont documentées, peuvent accepter des arguments. Les arguments sont définis entre parenthèses dans la notation key=value . Les valeurs acceptées sont:
  • chaînes simples sans guillemets: simple-value
  • chaînes entre guillemets: "string value" ou 'string value'
  • valeurs booléennes: true ou false
  • nombres: 11 ou 1.1
  • référence de syntaxe de point aux données d'événement: event.someDataVariableName

Gérer plusieurs événements

Vous pouvez écouter plusieurs événements sur un élément en séparant les événements par un point-virgule ;.

Exemple: on="submit-success:lightbox1;submit-error:lightbox2"

Plusieurs actions pour un événement

Vous pouvez exécuter plusieurs actions en séquence pour le même événement en séparant les actions par une virgule « , ».

Exemple: on="tap:target1.actionA,target2.actionB"

Événements et actions définis de manière globale

AMP définit globalement un événement tap que vous pouvez écouter sur n'importe quel élément HTML (y compris les éléments AMP).

AMP définit également globalement les actions hide , show et toggleVisibility que vous pouvez déclencher sur n'importe quel élément HTML.

Un élément ne peut être affiché que s'il était d'abord masqué par une action hide ou toggleVisibility, ou à l'aide de l'attribut hidden. L'action show ne prend pas en charge les éléments masqués par l'attribut display:none de CSS ou l'attribut layout=nodisplay d'AMP.

L'exemple suivant est possible dans AMP:

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

Événements spécifiques aux éléments

* - tous les éléments

Événement Description
tap Se déclenche lorsque vous cliquez ou appuyez sur l'élément.

Éléments d'entrée

Événement Description Éléments Données
change Se déclenche lorsque la valeur de l'élément est modifié et envoyée.

Les propriétés des données les reflètent dans HTMLInputElement et HTMLSelectElement.

input
event.min
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"]
event.checked
select
event.min
event.max
event.value
input-debounced Se déclenche lorsque la valeur de l'élément est modifiée. Il est similaire à l'événement change standard, mais il ne se déclenche que lorsque 300ms se sont écoulés après la fin de la modification de la valeur de l'entrée. Éléments qui déclenchent l'événement input. Identiques aux données de l'événement change.
input-throttled Se déclenche lorsque la valeur de l'élément est modifiée. Il est similaire à l'événement change standard, mais il est limité à se déclencher au plus une fois toutes les 100ms pendant la modification de la valeur de l'entrée. Éléments qui déclenchent l'événement input. Identiques aux données de l'événement change.

amp-accordion > section

Événement Description Données
expand Se déclenche lorsqu'une section d'accordéon se développe. Aucune.
collapse Se déclenche lorsqu'une section d'accordéon se réduit. Aucune.

amp-carousel[type="slides"]

Événement Description Données
slideChange Se déclenche lorsque la diapositive actuelle du carrousel change.
// Slide number.
event.index

amp-lightbox

Événement Description Données
lightboxOpen Se déclenche lorsque la lightbox est entièrement visible. Aucune
lightboxClose Se déclenche lorsque la lightbox est complètement fermée. Aucune

amp-list

Événement Description Données
fetch-error (confiance basse) Se déclenche lorsque la récupération des données échoue. Aucune

amp-selector

Événement Description Données
select Se déclenche lorsqu'une option est sélectionnée ou désélectionnée.
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Événement Description Données
sidebarOpen Se déclenche lorsque la barre latérale est complètement ouverte après la fin de la transition. Aucune
sidebarClose Se déclenche lorsque la barre latérale est complètement fermée après la fin de la transition. Aucune

amp-state

Événement Description Données
fetch-error (confiance basse) Se déclenche lorsque la récupération des données échoue. Aucune

form

Événement Description Données
submit Se déclenche lorsque le formulaire est soumis.
submit-success Se déclenche lorsque le formulaire affiche une réponse d'envoi réussie.
// Response JSON.
event.response
submit-error Se déclenche lorsque le formulaire marque une erreur d'envoi.
// Response JSON.
event.response
valid Se déclenche lorsque le formulaire est valide.
invalid Se déclenche lorsque le formulaire n'est pas valide.

Actions spécifiques aux éléments

* (tous les éléments)

Action Description
hide Masque l'élément cible.
show Affiche l'élément cible. Si un élément élément de autofocus devient visible en conséquence, il obtient la mise au point.
toggleVisibility Active / désactive la visibilité de l'élément cible. Si un élément de autofocus devient visible en conséquence, il obtient la mise au point.
toggleClass(class=STRING, force=BOOLEAN) Change la classe de l'élément cible. L'élément force est facultatif, et si défini, il garantit que la classe sera uniquement ajoutée et pas supprimée si elle est définie sur true, et inversement si elle est définie sur false.
focus Rend l'élément cible gagnant le focus. Pour perdre le focus, focus sur un autre élément (généralement l'élément parent). Nous déconseillons fortement de perdre le focus en nous concentrant sur body / documentElement pour des raisons d'accessibilité.

amp-accordion

Action Description
toggle(section=STRING) Change les états expanded et collapsed des sections amp-accordion. Lorsque l'action est appelée sans argument, elle fait basculer toutes les sections de l'accordéon. Déclenchez sur une section spécifique en fournissant l'ID de section: on="tap:myAccordion.toggle(section='section-id')".
expand(section=STRING) Développe les sections de l'accordéon. Si une section est déjà développée, elle reste développée. Lorsque l'action est appelée sans argument, elle développe toutes les sections de l'accordéon. Déclenchez sur une section spécifique en fournissant l'ID de section: on="tap:myAccordion.expand(section='section-id')".
collapse(section=STRING) Réduit les sections de l'accordéon. Si une section est déjà réduite, elle reste réduite. Lorsque l'action est appelée sans argument, elle réduit toutes les sections de l'accordéon. Déclenchez une section spécifique en fournissant l'ID de section: on="tap:myAccordion.collapse(section='section-id')".

amp-carousel[type="slides"]

Action Description
goToSlide(index=INTEGER) Fait avancer le carrousel jusqu'à un index de diapositive spécifié.

amp-image-lightbox

Action Description
open (default) Ouvre la lightbox d'image avec l'image source étant celle qui a déclenché l'action.

amp-lightbox

Action Description
open (default) Ouvre la lightbox.
close Ferme la lightbox.

amp-list

Événement Description Données
changeToLayoutContainer Met à jour la mise en page de amp-list vers layout="CONTAINTER" pour permettre le redimensionnement dynamique.
fetch-error (confiance basse) Se déclenche lorsque la récupération des données échoue. Aucune

amp-selector

Action Description
clear Efface toutes les sélections d'un amp-selector défini.
selectUp(delta=INTEGER) Déplace la sélection vers le haut, à la valeur de `delta`. La valeur `delta` par défaut est définie sur -1. Si aucune option n'est sélectionnée, l'état sélectionné deviendra la valeur de la dernière option.
selectDown(delta=INTEGER) Déplace la sélection vers le bas, à la valeur de `delta`. La valeur `delta` par défaut est définie sur 1. Si aucune option n'est sélectionnée, l'état sélectionné deviendra la valeur de la première option.
toggle(index=INTEGER, value=BOOLEAN) Change l'application de `selected`. Si l'attribut de sélection est absent, cette action l'ajoute. Si l'attribut de sélection est présent, cette action le supprime. Vous pouvez forcer la conservation d'un ajout ou d'une suppression en incluant une valeur booléenne dans l'argument `value`. Une valeur `true` forcera l'ajout de l'attribut `selected` et ne le supprimera pas s'il est déjà présent. Une valeur de `false` supprimera l'attribut, mais ne l'ajoutera pas s'il est absent.

amp-sidebar

Action Description
open (default) Ouvre la barre latérale.
close Ferme la barre latérale.
toggle Change l'état de la barre latérale.

form

Action Description
clear Efface toutes les valeurs dans les entrées du formulaire.
submit Envoie le formulaire.

Cibles spéciales

Les cibles suivantes sont fournies par le système AMP et ont des exigences particulières:

Cible: AMP

La cible AMP est fournie par le runtime AMP et implémente des actions de niveau supérieur qui s'appliquent à l'ensemble du document.

Action Description
setState({foo: 'bar'})1

Nécessite amp-bind.

Fusionne un littéral d'objet dans l'état pouvant être lié.

1 Lorsqu'elles sont utilisées avec plusieurs actions, les actions suivantes attendront la fin de setState() avant l'appel. Une seule action setState() est autorisée par événement.