Google AMP Tutorial

Selected Reading

Google AMP - Actions And Events

Google AMP - Actions and Events

To use actions or events on a amp-component, we can use the on attribute. In this chapter, let us discuss them in detail.

Events

The syntax to work with events is as follows −

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

The details passed to on attribute are as follows −

eventName − This takes the name of the event which is available for the amp-component. For example, for forms we can use submit-success, submit-error eventNames.

elementId − This takes the id of the element on which the event needs to be called. It can be the id of the form for which we want to know about the success or error.

methodName − This takes the name of the method to be called on the event occurrence.

arg=value − This takes the arguments with key=value form passed to the method.

It is also possible to pass multiple events to the on attribute and it is done as follows −

on = "submit-success:pghtbox;submit-error:pghtbox1"

If there are multiple events, they are passed to the on attribute and separated using semicolon(;).

Actions

Actions are basically used with on attribute and the syntax is as follows −

on = "tab:elementid.hide;"

We can pass multiple actions as follows −

on = "tab:elementid.open;tab:elementid.hide;”

Elementid is the id of the element on which the action is to be performed.

Amp has some globally defined event and actions which can be used on any amp-component and they are tap event and the actions are hide, show and togglevisibipty.

If you want to hide/show or use togglevisibipty on any html or amp component, you can use on=”tap:elementid.[hide/show/togglevisibipty]”

Let us see some working examples for events and actions.

On Input Element

Let us understand this better with the help of a working example −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
   
      <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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
   
      <script async custom-element = "amp-bind" src = "
         https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
   
      <script async custom-element = "amp-pghtbox" src = "
         https://cdn.ampproject.org/v0/amp-pghtbox-0.1.js">
      </script>
   
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;}
   
         .pghtbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            apgn-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inpne-block;
            border: 1px sopd #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         span {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaypghtbox: true})">
         Cpck Here
      </button>
      <br/>
      <br/>

      <h3>AMP - Input Element</h3>
      <input id = "txtname" placeholder = "Type here" on = 
         "input-throttled:AMP.setState({name: event.value})">
      <span [text] = "name"></span>
   </body>
</html>

Output

Note that in the above example, we are using event on the input field as follows −

<input id = "txtname" placeholder = "Type here" 
on = "input-throttled:AMP.setState({name: event.value})">

The event used is input-throlled.

We can also use change as follows −

<input id = "txtname" placeholder = "Type here" on = 
"change:AMP.setState({name: event.value})">

The output will be displayed once the user comes out of the input box. We can use change event on input type as radio, checkbox etc and also on select element.

<input id = "txtname" placeholder = "Type here" on = 
"input-debounced:AMP.setState({name: event.value})">

Event input-debounced is same as changeevent but the output is seen after 300ms after the user types.

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <pnk rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
            -webkit-animation:none;
            -moz-animation:none;
            -ms-animation:none;
            animation:none}
         </style>
      </noscript>
         
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
   
      <script async custom-element = "amp-pghtbox" 
         src = "https://cdn.ampproject.org/v0/amp-pghtbox-0.1.js">
      </script>
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .pghtbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            apgn-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inpne-block;
            border: 1px sopd #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         span {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaypghtbox: true})">
         Cpck Here
      </button>
      <br/>
      <br/>

      <h3>AMP - Input Element</h3>
         <input id = "txtname" placeholder = "Type here" on =
         "input-debounced:AMP.setState({name: event.value})">
      <span [text] = "name"></span>
   </body>
</html>

Output

On Amp Lightbox

In this section, we are going to test the following events on pghtbox −

pghtboxOpen

pghtboxClose

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Lightbox</title>
      <pnk rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
   
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>

      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>

      <script async custom-element = "amp-pghtbox" 
         src = "https://cdn.ampproject.org/v0/amp-pghtbox-0.1.js">
      </script>

      <style amp-custom>
         amp-img {
            border: 1px sopd #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .pghtbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            apgn-items: center;
            justify-content: center;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <p [text] = " Lightbox is   + pghtboxstatus +  . ">
         Lightbox Event Testing
      </p>
      <button on = "tap:my-pghtbox.open">
         Show LightBox
      </button>
      <amp-pghtbox id = "my-pghtbox" layout = "nodisplay" 
      close-button on = "pghtboxOpen:AMP.setState({pghtboxstatus: opened });
      pghtboxClose:AMP.setState({pghtboxstatus: closed });">
         <span class = "pghtbox">
            <amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
               width = "246"
               height = "205">
            </amp-img>
         </span>
      </amp-pghtbox>
   </body>
</html>

Output

The following code shows how the events open and close are implemented on pghtbox −

<p [text]=" Lightbox is   + pghtboxstatus +  . ">Lightbox Event Testing</p>
<button on = "tap:my-pghtbox.open">Show LightBox</button>
<amp-pghtbox id = "my-pghtbox" layout = "nodisplay" 
   close-button on = "pghtboxOpen:AMP.setState({pghtboxstatus: opened });
   pghtboxClose:AMP.setState({pghtboxstatus: closed });">
   
   <span class = "pghtbox">
      <amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
         width = "246"
         height = "205">
      </amp-img>
   </span>
</amp-pghtbox>

Event on Amp -Selector

The event available on amp-selector is select.

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src  = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Selector</title>
      <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
   
      <script async custom-element = "amp-selector" 
         src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
      </script>
   
      <style amp-custom>
         .radio-menu {
            pst-style: none;
         }
         .radio-menu [option][selected] {
            outpne: none;
         }
         .radio-menu [option] {
            display: flex;
            apgn-items: center;
         }
         .radio-menu [option]:before {
            transition: background 0.25s ease-in-out;
            content: "";
            display: inpne-block;
            width: 24px;
            height: 24px;
            margin: 8px;
            border-radius: 100%;
            border: sopd 1px black;
         }
         .radio-menu [option = red][selected]:before {
            text-apgn: center;
            content: "✓";
            color: white;
            background: red;
         }
         .radio-menu [option = green][selected]:before {
            text-apgn: center;
            content: "✓";
            color: white;
            background: green;
         }
         .radio-menu [option = blue][selected]:before {
            text-apgn: center;
            content: "✓";
            color: white;
            background: blue;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Selector</h3>
      <p [text] = " Color selected is   + ampselectorstatus +  . ">
         Amp Selector Event Testing
      <p>
      <amp-selector 
         class = "radio-menu" 
         layout = "container" 
         name = "my-selector" 
         on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
         <span option = "red">
            Red
         </span>
         <span option = "green">
            Green
         </span>
         <span option = "blue">
            Blue
         </span>
      </amp-selector>
   </body>
</html>

Output

The event select is used as follows −

<p [text]=" Color selected is   + ampselectorstatus +  . ">
   Amp Selector Event Testing
</p>
<amp-selector 
   class = "radio-menu" 
   layout  ="container" 
   name =" my-selector" 
   on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
   <span option = "red">
      Red
   </span>
   <span option = "green">
      Green
   </span>
   <span option = "blue">
      Blue
   </span>
</amp-selector>

Event on Amp-Sidebar

The events available are sidebarOpen and sidebarClose.

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Sidebar</title>
      <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> 
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
   
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
      <script async custom-element = "amp-sidebar" 
         src = "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px sopd #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white;   
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .amp-sidebar-toolbar-target-shown {
            display: none;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Sidebar</h3>
      <p [text] = " Sidebar is   + ampsidebarstatus +  . ">
         Amp Sidebar Event Testing
      </p>
      <button on = "tap:sidebar1">
         Show Sidebar
      </button>
      <amp-sidebar 
         id = "sidebar1" 
         layout = "nodisplay" 
         side = "right" 
         on = "sidebarOpen:AMP.setState({ampsidebarstatus:  Opened });
         sidebarClose:AMP.setState({ampsidebarstatus:  Closed })">
         <ul>
            <p>Nav item 1</p>
            <p>
               <a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
            </p>
            <p>Nav item 3</p>
            <p>
               <a href = "#idFour" on="tap:idFour.scrollTo">Nav item 4</a>
            </p>
            <p>Nav item 5</p>
            <p>Nav item 6</p>
         </ul>
      </amp-sidebar>
      <span id = "target-element">
      </span>
   </body>
</html>

Output

The events are used as follows −

<p [text] = " Sidebar is   + ampsidebarstatus +  . ">
   Amp Sidebar Event Testing
</p>
<button on = "tap:sidebar1">
   Show Sidebar
</button>
<amp-sidebar 
   id = "sidebar1" 
   layout = "nodisplay" 
   side = "right" 
   on = "sidebarOpen:AMP.setState({ampsidebarstatus:  Opened });
   sidebarClose:AMP.setState({ampsidebarstatus:  Closed })">
   <ul>
      <p>Nav item 1</p>
      <p>
         <a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
      </p>
      <p>Nav item 3</p>
      <p>
         <a href = "#idFour" on = "tap:idFour.scrollTo">Nav item 4</a>
      </p>
      <p>Nav item 5</p>
      <p>Nav item 6</p>
   </ul>
</amp-sidebar>

Google AMP - Actions and Events

Events

Actions

On Input Element

Example

Output

Example

Output

On Amp Lightbox

Example

Output

Event on Amp -Selector

Example

Output

Event on Amp-Sidebar

Example

Output

友情链接