Introduction: Sometimes you want to add custom interactivity to your AMP pages to make your pages look more user friendly and user calling. Although AMP’s pre-built components are limited, so amp-bind is made to overcome this problem. It helps the developer to add custom interactivity to the pages without using AMP’s pre-built components.
Setup: To use amp-bind in your page you have to import its script in the header of the document.
< script async custom-element = "amp-bind" src =
</ script >
|
amp-bind of Google AMP is comprised of three main concepts:
- State: State variables are responsible for the update on the page on the basis of user actions. It is very important to define a state variable.
- Expression: They are like JavaScript expressions used to refer to the state.
- Binding: They are a special attribute that is used to link an element’s property to a state via an expression.
Example: Dynamically hiding and showing divisions on the basis of the option selected.
<!DOCTYPE html> < html amp>
< head >
< meta charset = "utf-8" />
< title >GeeksForGeeks | amp-bind</ title >
< link rel = "canonical" href =
< meta name = "viewport" content=" width = device -width,
minimum-scale = 1 , initial-scale = 1 " />
< script async src =
</ script >
<!-- Import amp-bind component in the header -->
< script async custom-element = "amp-bind" </ 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 >
|
Output: