A veces, desea agregar interactividad personalizada a sus páginas AMP para que sus páginas se vean más fáciles de usar y llamativas para el usuario. Aunque los componentes preconstruidos de AMP son limitados, amp-bind está hecho para superar este problema. Ayuda al desarrollador a agregar interactividad personalizada a las páginas sin usar los componentes prediseñados de AMP. Puede usar amp-bind para cambiar el texto dinámicamente en la interacción del usuario con la página.
Configuración: para usar amp-bind en su página, debe importar su script en el encabezado del documento.
HTML
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script>
El amp-bind de Google AMP comprende tres conceptos principales:
- Estado: las variables de estado son responsables de la actualización en la página en función de las acciones del usuario. Es muy importante definir una variable de estado.
- Expresión: Son como expresiones de JavaScript que se usan para referirse al estado.
- Binding: Son un atributo especial que se utiliza para vincular la propiedad de un elemento a un estado a través de una expresión.
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-bind</title>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-bind/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
h1 {
color: forestgreen;
text-align: center;
}
.gfgNew {
border: 5px solid crimson;
}
.gfgOld {
border: 5px solid orange;
}
</style>
</head>
<body>
<h1>
Geeks For Geeks
</h1>
<amp-state id="gfg">
<script type="application/json">
{
"new": {
"imageUrl":
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png",
"style": "gfgNew"
},
"old": {
"imageUrl":
"https://media.geeksforgeeks.org/wp-content/uploads/20201026154131/logogfg.png",
"style": "gfgOld"
}
}
</script>
</amp-state>
<div style="padding: 1em;">
<p>
Each logo has different border color...
</p>
<h4 ="'This is ' + logo + ' logo...'">
This is old logo...
</h4>
<center>
<amp-img width="200" height="200" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201026154131/logogfg.png"
[src]="gfg[logo].imageUrl"
class="gfgOld"
[class]="gfg[logo].style">
</amp-img>
<br>
<button on="tap:AMP.setState({logo: 'new'})">
New Logo
</button>
<button on="tap:AMP.setState({logo: 'old'})">
Old Logo
</button>
</center>
</div>
</body>
</html>
Producción:
Cuando se presionó el botón Nuevo logotipo, la imagen y el color del borde cambiaron dinámicamente. Cuando presionamos el botón del logotipo antiguo, la imagen y el color del borde cambiaron a la combinación anterior.
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA