Los componentes de la biblioteca AMP HTML se clasifican de la siguiente forma:

  • integrado: componentes incluidos en la biblioteca base, como amp-img y amp-pixel.
  • extendido: complementos de la biblioteca base que deben incluirse explícitamente en el documento como elementos personalizados (p. ej., <script async custom-element="amp-audio" ...).
  • experimental: componentes que se han publicado pero todavía no están listos para que el público general pueda usarlos.

La lista de componentes disponibles se muestra a continuación en categorías relacionadas.

Anuncios y analíticas

Componente Descripción
amp-ad Representa un contenedor que puede mostrar un anuncio.
amp-ad-exit Proporciona un comportamiento configurable de salidas de anuncios en A4A (AMP for Ads).
amp-analytics Captura datos de analíticas de un documento AMP.
amp-auto-ads Inserta de forma dinámica anuncios en una página AMP mediante un archivo de configuración servido remotamente.
amp-call-tracking Cambia de forma dinámica un número de teléfono de un hiperenlace para habilitar el seguimiento de llamadas.
amp-experiment Se puede emplear para realizar pruebas de experiencia de usuario en un documento AMP.
amp-pixel Representa un píxel de seguimiento para contar las visitas de las páginas.
amp-sticky-ad Permite que se muestre y se fije contenido del anuncio en la parte inferior de la página.

Contenido dinámico

Componente Descripción
amp-access-laterpay Permite que los editores integren fácilmente la plataforma de micropagos LaterPay.
amp-access Proporciona un muro de pago AMP y asistencia con la suscripción.
amp-bind Permite que los elementos muten como respuesta a las acciones de un usuario o a cambios de datos a través de vínculos de datos y expresiones simples similares a JS.
amp-byside-content Muestra contenido dinámico desde el servicio BySide.
amp-consent Proporciona la habilidad de recoger y guardar el consentimiento de un usuario a través de un control de IU.
amp-date-picker Proporciona un widget de calendario para seleccionar fechas.
amp-form Admite el uso de formularios.
amp-geo Proporciona una interfaz de geolocalización aproximada a nivel de país.
amp-gist Muestra un repositorio GitHub Gist.
amp-install-serviceworker Instala una secuencia de comandos service worker.
amp-list Baja datos de forma dinámica y crea elementos de lista mediante una plantilla.
amp-live-list Permite que el contenido se muestre y se actualice en directo.
amp-mustache Permite el renderizado de las plantillas Mustache.js.
amp-next-page Carga de forma dinámica más documentos recomendados para el usuario.
amp-selector Representa un menú de varias opciones que el usuario puede elegir.
amp-user-notification Muestra una notificación que los usuarios pueden ignorar.
amp-web-push Permite que los usuarios se subscriban a notificaciones push en la Web.

Diseño

Componente Descripción
amp-accordion Permite que los usuarios echen un vistazo a la descripción del contenido y vayan directos a la sección que quieran cuando lo deseen.
amp-app-banner Un contenedor y una IU básica que se pueden utilizar en un banner multiplataforma de posición fija que tenga una llamada a la acción para descargar una aplicación.
amp-carousel Muestra varios fragmentos de contenido similares en un eje horizontal.
amp-fx-flying-carpet Envuelve sus elementos secundarios en un contenedor único que se desplaza por la pantalla, lo que te permite mostrar un anuncio de pantalla completa sin ocupar todo el viewport.
amp-fx-collection Proporciona una colección de efectos visuales preestablecidos, como el paralaje.
amp-iframe Muestra un iframe.
amp-image-lightbox Proporciona un efecto lightbox en una imagen específica.
amp-layout Proporciona un elemento contenedor genérico y multipropósito que aporta [diseños] potentes de AMP (https://www.ampproject.org/docs/guides/responsive/control_layout#the-layout-attribute) a cualquier elemento.
amp-lightbox Muestra elementos en modo lightbox con ventana gráfica completa.
amp-lightbox-gallery Proporciona una experiencia lightbox. Tras la interacción del usuario, un componente de IU se expande para llenar la ventana gráfica hasta que el usuario la cierra.
amp-position-observer Supervisa la posición de un elemento dentro del viewport mientras el usuario se desplaza por la pantalla, y coordina eventos que se pueden usar con otros componentes.
amp-sidebar Posibilita que se muestre metacontenido pensado para accesos temporales, como por ejemplo, la navegación, los enlaces, los botones o los menús.

Contenido multimedia

Componente Descripción
amp-3d-gltf Muestra modelos en 3D de GL Transmission Format (gITF).
amp-3q-player Inserta vídeos de 3Q SDN.
amp-anim Gestiona una imagen animada, normalmente un GIF.
amp-apester-media Muestra un recurso inteligente de Apester.
amp-audio Reemplaza la etiqueta HTML5 audio.
amp-bodymovin-animation Muestra un reproductor de animación AirBnB Bodymovin, que procesa una animación a partir de un JSON generado por Adobe After Effects.
amp-brid-player Muestra un reproductor de Brid.tv.
amp-brightcove Muestra la plataforma de vídeo en línea Video Cloud o el reproductor Perform de Brightcove.
amp-dailymotion Muestra un vídeo de Dailymotion.
amp-google-vrview-image Muestra una imagen de RV.
amp-hulu Muestra un vídeo sencillo insertado de Hulu.
amp-ima-video Inserta un reproductor de vídeo para anuncios de vídeo in-stream integrados con el SDK de IMA.
amp-img Reemplaza la etiqueta HTML5 img.
amp-imgur Muestra una publicación de Imgur.
amp-izlesene Muestra un vídeo de Izlesene.
amp-jwplayer Muestra un reproductor JWPlayer alojado en la nube.
amp-kaltura-player Muestra el reproductor Kaltura tal como se usa en la plataforma de vídeo de Kaltura.
amp-nexxtv-player Muestra una emisión de contenido multimedia de la plataforma nexxOMNIA.
amp-o2-player Muestra un reproductor AOL O2Player.
amp-ooyala-player Muestra un vídeo de Ooyala.
amp-playbuzz Muestra cualquier contenido de Playbuzz (por ejemplo una lista, una encuesta, etc.).
amp-reach-player Muestra un reproductor de vídeo Beachfront Reach.
amp-soundcloud Muestra un clip de Soundcloud.
amp-springboard-player Muestra un reproductor de vídeo Springboard Platform.
amp-video Sustituye la etiqueta HTML5 video.
amp-vimeo Muestra un vídeo de Vimeo.
amp-wistia-player Muestra un vídeo de Wistia.
amp-youtube Muestra un vídeo de YouTube.

Presentación

Componente Descripción
amp-animation Define y muestra una animación.
amp-dynamic-css-classes Añade varios nombres de clase CSS dinámicos al elemento HTML.
amp-fit-text Aumenta o reduce el tamaño de fuente para que el contenido quepa en el espacio disponible.
amp-font Activa y controla la carga de fuentes personalizadas.
amp-mathml Muestra una fórmula MathML.
amp-story Un formato enriquecido de narrativa de marca con elementos visuales.
amp-timeago Proporciona marcas de tiempo imprecisas al dar a las fechas el formato "hace cierto tiempo" (por ejemplo, hace tres horas).
amp-viz-vega Muestra elementos visuales creados con la gramática visual Vega.

Redes sociales

Componente Descripción
amp-beopinion Inserta contenido de BeOpinion.
amp-addthis Muestra un elemento insertado de las herramientas del sitio web AddThis.
amp-facebook-comments Inserta el complemento de comentarios de Facebook.
amp-facebook-like Inserta el complemento del botón Me gusta de Facebook.
amp-facebook-page Inserta el complemento de la página de Facebook.
amp-facebook Muestra una publicación o vídeo de Facebook.
amp-gfycat Muestra un GIF de vídeo de Gfycat.
amp-instagram Muestra una publicación insertada de Instagram.
amp-pinterest Muestra un widget o el botón Pin It de Pinterest.
amp-reddit Muestra un comentario o una publicación insertados de Reddit.
amp-riddle-quiz Muestra contenido de Riddle (por ejemplo un cuestionario, una lista, una encuesta, etc.).
amp-social-share Muestra un botón para compartir contenido en las redes sociales.
amp-twitter Muestra un tuit de Twitter.
amp-vine Muestra un vídeo insertado de Vine.
amp-vk Inserta un widget de publicación o encuesta de VK.