AMP

Acciones y eventos en el correo electrónico de AMP

Este documento habla sobre las acciones y eventos que puede usar para el formato del correo electrónico de AMP. Lea sobre las Acciones y eventos en el correo electrónico de AMP para los sitios web, historias y anuncios de AMP.

El atributo on se utiliza para instalar controladores de eventos en los elementos. La compatibilidad de los eventos dependerá del elemento.

El valor que se le asigna a la sintaxis consiste en usar un lenguaje sencillo específico para el dominio en el formulario:

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

Consulte en la siguiente tabla la descripción sobre cada parte de la sintaxis.

Sintaxis ¿Es necesario? Descripción
eventName Es el nombre del evento donde se presenta un elemento.
targetId Es el ID del DOM para el elemento, o un objetivo especial que se definió previamente, en el cual le gustaría ejecutar una acción como respuesta a un evento. En el siguiente ejemplo, el targetId es el ID del DOM para los objetivos amp-lightbox y photo-slides.
 
methodName No Se utiliza cuando los elementos tienen acciones predeterminadas.

Este es el método que presenta el elemento objetivo (al cual se hace referencia usando targetId) que le gustaría ejecutar cuando se desencadene el evento.

AMP cuenta con un concepto de acción predeterminada que puede implementarse en los elementos. Entonces, al omitir methodName AMP ejecutará ese método de forma predeterminada.

arg=value No Algunas acciones, cuando se documentan, pueden aceptar argumentos. Los argumentos se definen entre paréntesis mediante la notación key=value. Los valores aceptados son:
  • cadenas sencillas sin comillas: simple-value
  • cadenas con comillas: "string value" o

Administrar varios eventos

Puede concentrarse en varios eventos de un elemento si los separa mediante un punto y coma ;.

Por ejemplo: on="submit-success:lightbox1;submit-error:lightbox2"

Varias acciones para un evento

Puede ejecutar varias acciones de manera consecutiva para el mismo evento si las separa mediante una coma “,”.

Por ejemplo: on="tap:target1.actionA,target2.actionB"

Eventos y acciones definidos en las globales

En AMP se define el evento tap de manera global para que pueda concentrarse en cualquier elemento HTML (incluidos los elementos de AMP).

En AMP también se definen las acciones hide, show y toggleVisibility globalmente para que pueda activarlas en cualquier elemento HTML.

Un elemento solo puede mostrarse si estaba oculto previamente por una acción hide o toggleVisibility, o mediante el atributo hidden. La acción show no es compatible con los elementos ocultos por CSS display:none o layout=nodisplay de AMP.

Por ejemplo, en AMP es posible hacer lo siguiente:

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

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

Eventos con elementos específicos

* - todos los elementos

Evento Descripción
tap Se activa al presionar o hacer clic sobre el elemento.

Elementos de entrada

Evento Descripción Elementos Datos
change Se activa cuando el valor del elemento cambia y se asigna.

Las propiedades de los datos son similares a los que se encuentran en HTMLInputElement y de 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 activa cuando el valor del elemento cambia. Es parecido al evento change estándar, pero solo se activa 300 ms después de que el valor de entrada dejó de cambiar. Elementos que activan el evento input. Es similar a los datos del evento change.
input-throttled Se activa cuando el valor del elemento cambia. Es parecido al evento change estándar, pero está regulado para activarse máximo una vez cada 100 ms mientras el valor de entrada continúe modificándose. Elementos que activan el evento input. Es similar a los datos del evento change.

amp-accordion > sección

Evento Descripción Datos
expand Se activa cuando la sección accordion aumenta. Ninguno.
collapse Se activa cuando la sección accordion colapsa. Ninguno.

amp-carousel[type="slides"]

Evento Descripción Datos
slideChange Se activa cuando cambia la diapositiva en el carrusel.
// Slide number.
event.index

amp-lightbox

Evento Descripción Datos
lightboxOpen Se activa cuando lightbox está completamente visible. Ninguno
lightboxClose Se activa cuando lightbox está totalmente cerrado. Ninguno

amp-list

Evento Descripción Datos
fetch-error(low-trust) Se activa cuando ocurre un error en la consulta de datos. Ninguno

amp-selector

Evento Descripción Datos
select Se activa al seleccionar o anular una selección.
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Evento Descripción Datos
sidebarOpen Se activa cuando la barra lateral se abre completamente después de que terminó la transición. Ninguno
sidebarClose Se activa cuando la barra lateral se cierra completamente después de que terminó la transición. Ninguno

amp-state

Evento Descripción Datos
fetch-error(low-trust) Se activa cuando ocurre un error en la consulta de datos. Ninguno

formulario

Evento Descripción Datos
submit Se activa cuando se envía el formulario.
submit-success Se activa cuando la respuesta por enviar el formulario es exitosa.
// Response JSON.
event.response
submit-error Se activa cuando ocurre un error en la respuesta por enviar el formulario.
// Response JSON.
event.response
valid Se activa cuando el formulario es válido.
invalid Se activa cuando el formulario no es válido.

Acciones específicas para los elementos

* (todos los elementos)

Acción Descripción
hide Oculta el elemento objetivo.
show Muestra al elemento objetivo. Si como resultado de ello un elementoautofocus se vuelve visible, aumenta su prioridad.
toggleVisibility Cambia la visibilidad de un elemento objetivo. Si como resultado de ello un elementoautofocus se vuelve visible, aumenta su prioridad.
toggleClass(class=STRING, force=BOOLEAN) Habilita o deshabilita las clases de un elemento objetivo. El force es opcional y, cuando se define, garantiza que la clase solamente se agregará pero no podrá eliminarse si se establece en true, y solo podrá eliminarse pero no agregarse si se establece en false.
focus Hace que el elemento objetivo aumente su prioridad. Para disminuir la prioridad, puede utilizarse focus en otro elemento (generalmente en un elemento primario). Le recomendamos nuevamente que no pierda de vista la prioridad en body/documentElement por cuestiones de accesibilidad.

amp-accordion

Acción Descripción
toggle(section=STRING) Habilita o deshabilita los estados expanded y collapsed en las secciones de amp-accordion. Cuando se hacen llamadas sin argumentos, permite alternar todas las secciones del acordeón. Habilita una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.toggle(section=
expand(section=STRING) Expande las secciones del acordeón. Si una sección ya está expandida permanece de esta manera. Cuando se hacen llamadas sin argumentos, expande todas las secciones del acordeón. Activa una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.expand(section='section-id')".
collapse(section=STRING) Colapsa las secciones del acordeón. Si una sección ya está colapsada permanece de esta manera. Cuando se hacen llamadas sin argumentos, colapsa todas las secciones del acordeón. Activa una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.collapse(section='section-id')".

amp-carousel[type="slides"]

Acción Descripción
goToSlide(index=INTEGER) Hace que el carrusel avance hasta una diapositiva específica del índice.

amp-image-lightbox

Acción Descripción
open (default) Abre la imagen del lightbox, siendo la imagen de origen la que activó la acción.

amp-lightbox

Acción Descripción
open (default) Abre el lightbox.
close Cierra el lightbox.

amp-list

Evento Descripción Datos
changeToLayoutContainer Actualiza el diseño de amp-list a layout="CONTAINTER" para permitir cambios en el tamaño de forma dinámica.
fetch-error(low-trust) Se activa cuando ocurre un error en la consulta de datos. Ninguno

amp-selector

Acción Descripción
clear Elimina todas las selecciones de un amp-selector definido.
selectUp(delta=INTEGER) Desplaza la selección hacia arriba mediante el valor de “delta”. El valor de “delta” se establece en -1. Si no se selecciona ninguna opción, el estado que seleccione tomará el valor de la última opción.
selectDown(delta=INTEGER) Desplaza la selección hacia abajo mediante el valor de “delta”. El valor de “delta” se establece en 1. Si no se selecciona ninguna opción, el estado que seleccione tomará el valor de la primera opción.
toggle(index=INTEGER, value=BOOLEAN) Habilita o deshabilita la aplicación “seleccionada”. Si el atributo que se seleccionó está ausente, esta acción lo agregará. Si el atributo que se seleccionó está presente, esta acción lo eliminará. Puede forzar y mantener una adición o eliminación incluyendo un valor booleano en el argumento “value”. Un valor “true” forzará agregar el atributo “seleccionado” y no lo removerá si ya está presente. Un valor “false” eliminará el atributo, pero no lo agregará si está ausente.

amp-sidebar

Acción Descripción
open (default) Abre la barra lateral.
close Cierra la barra lateral.
toggle Habilita o deshabilita el estado de la barra lateral.

formulario

Acción Descripción
clear Elimina cualquier valor en las entradas del formulario.
submit Envía el formulario.

Objetivos especiales

Los siguientes son objetivos proporcionados por el sistema de AMP cuyos requisitos son especiales:

Objetivo: AMP

El objetivo de AMP es proporcionado por su tiempo de ejecución e implementa acciones de nivel superior que se aplican a todo el documento.

Acción Descripción
setState({foo: 'bar'})1

Requiere de amp-bind.

Fusiona un objeto literal con un estado para crear enlaces.

1Cuando se utiliza con varias acciones, las acciones que se realicen posteriormente esperarán hasta que se complete setState() antes de que los invoquen. Solamente se permite un setState() por evento.