How to change/update CSS class dynamically using amp-bind in Google AMP ?
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. You can use amp-bind to change the text dynamically on user interaction with the page.
Setup: To use amp-bind in your page you have to import its script in the header of the document.
HTML
<script async custom-element="amp-bind"</script> |
The amp-bind of Google AMP comprises 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.
To change the image’s class we will make use of [class] attribute, it helps to change the class dynamically.
Example:
HTML
<!doctype html><html amp> <head> <meta charset="utf-8"> <title>Google AMP amp-bind</title> <link rel="canonical" href= <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script async src= </script> <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; } .gfg { border: 5px solid crimson; } </style></head> <body> <center> <h1> Geeks For Geeks </h1> <div style="padding: 1em;"> <amp-img src= width="150" height="150" [class]="border"> </amp-img> <br> <button on="tap:AMP.setState({ border: 'gfg' })"> Change Class </button> </div> </center></body> </html> |
Output:
Initially, the image has no class but when the button is hit, its class is updated to gfg which has a border attribute thus a border appears on the screen around the image.
Please Login to comment...