4 trucos para el desarrollo con el framework AMP

Descubre estos trucos para aumentar las posibilidades de las páginas web desarrolladas mediante el framework AMP

Mostrar mensaje mientras se envía un formulario

<div class="alert alert-info">Sending...</div>
form .alert  display: none  border: 1px solid #bce8f1  color: #31708f  background-color: #d9edf7form.amp-form-submitting .alert  display: block

Cambiar textos y valores de inputs

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<button on="tap:formLightbox">
<button
on="tap:AMP.setState({formLightboxTitle: 'Nuestro equipo a tu disposición',formLightbox"
>
<h3 [text]="formLightboxTitle"></h3>
<h3 [text]="'Esto es el título' + formLightboxTitle"></h3>

Modificando el valor de un input

<button
on="tap:AMP.setState({formLightboxTitle: 'Nuestro equipo a tu disposición', service: 'button-1'}),formLightbox">
<input type="hidden" [value]="service">

Resetear un formulario

<buttonclass="lightbox__close"on="tap:formLightbox.close,myFormId.clear">

Mostrar una modal tras hacer scroll

<amp-position-observer
intersection-ratios="1"
on="enter.newsletterLightbox)"
layout="nodisplay"
>
</amp-position-observer>

“enter” event with “low” trust is not allowed to invoke “amp-lightbox.activate”.

.newsletter-lightbox  position: fixed  bottom: 0  right: 0  opacity: 0  visibility: hidden
<div id="newsletterLightbox" class="newsletter-lightbox"
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<amp-position-observerintersection-ratios="1"on="enter:newsletterLightboxAnimation.start"layout="nodisplay"once></amp-position-observer>

Conclusiones

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store