Actions et événements dans les e-mails AMP
Important: this documentation is not applicable to your currently selected format websites!
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 AMP possède un concept d'action par défaut que les éléments peuvent implémenter. Ainsi, en omettant le |
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:
|
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 |
input[type="radio"],input[type="checkbox"]
| event.checked | ||
select | event.min | ||
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. |
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. |
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. |
submit-error | Se déclenche lorsque le formulaire marque une erreur d'envoi. | // Response JSON. |
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.