Introducción: 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.
Configuración: para usar amp-bind en su página, debe importar su script en el encabezado del documento.
<script async custom-element="amp-bind" src= "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script>
amp-bind de Google AMP se compone de 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: Dinámicamente ocultar y mostrar divisiones en base a la opción seleccionada.
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8" />
<title>GeeksForGeeks | 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>
<!-- Import amp-bind component in the header -->
<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;
}
</style>
</head>
<body>
<center>
<h1>Geeks For Geeks</h1>
</center>
<!-- This sample toggles the visibility of
two divs based on a input selection.
AMP provides the [`hidden` attribute],
which we use to hide and show the two
divs. Some elements, such as the `select`
element, fire [events] we can use to
update state -->
<div style="padding: 1em; color: crimson;">
<label><u>Select the option</u>: </label>
<select on="change:AMP.setState
({option: event.value})">
<option value="0">No selection</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<br />
<div hidden [hidden]="option != 1">
<h3>You have selected Option 1</h3>
</div>
<div hidden [hidden]="option != 2">
<h3>You have selected Option 2</h3>
</div>
</div>
</body>
</html>
Producción:
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