- Google AMP Tutorial
- Google AMP - Home
- Google AMP - Overview
- Google AMP - Introduction
- Google AMP - Images
- Google AMP - Form
- Google AMP - Iframes
- Google AMP - Video
- Google AMP - Button
- Google AMP - Timeago
- Google AMP - Mathml
- Google AMP - Fit Text
- Google AMP - Date Countdown
- Google AMP - Date Picker
- Google AMP - Story
- Google AMP - Selector
- Google AMP - Link
- Google AMP - Font
- Google AMP - List
- Google AMP - User Notification
- Google AMP - Next Page
- Google AMP - Attributes
- Styles And Custom CSS
- Google AMP - Dynamic CSS Classes
- Google AMP - Actions And Events
- Google AMP - Animations
- Google AMP - Data Binding
- Google AMP - Layout
- Google AMP - ADS
- Google AMP - Analytics
- Google AMP - Social Widgets
- Google AMP - Media
- Html Page To Amp Page
- Google AMP - Basic Syntax
- Google AMP - Validation
- Google AMP - Caching
- Google AMP - Custom Javascript
- Google AMP - Cors
- Google AMP Useful Resources
- Google AMP - Quick Guide
- Google AMP - Useful Resources
- Google AMP - Discussion
Google AMP - List
Amp-list is an amp-component which calls a CORS json endpoint and displays the data in the form of a json file inside a template. Let us understand this with the help of working examples.
To work with amp-list, we need to include following script −
<script async custom-element = "amp-list" src = "https://cdn.ampproject.org/v0/amp-list-0.1.js"> </script>
This is the format of amp-list tag −
<amp-list width = "auto" height = "100" layout = "fixed-height" src = "amplist.json" class = "m1"> <template type = "amp-mustache"> <div class = "images_for_display"> <amp-img width = "150" height = "100" alt = "{{title}}" src = "{{url}}"> </amp-img> </div> </template> </amp-list>
The src used for amp-list is a json file which has the details to be listed. We can use normal html tags or amp-components inside amp-list to display the data from the json file. Template type amp-mustache is used for data-binding the data to be displayed.
Let us understand this with the help of a working example as shown below −
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 List</title> <link 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{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> <script async custom-element = "amp-list" src = "https://cdn.ampproject.org/v0/amp-list-0.1.js"> </script> <script async custom-template = "amp-mustache" src ="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"> </script> <style amp-custom> amp-img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } </style> </head> <body> <h3>Google AMP - Amp List</h3> <amp-list width = "auto" height = "100" layout = "fixed-height" src = "amplist.json" class = "m1"> <template type = "amp-mustache"> <div class = "images_for_display"> <amp-img width = "150" height = "100" alt = "{{title}}" src = "{{url}}"> </amp-img> </div> </template> </amp-list> </body> </html>
Output
The output of the working example shown above is as shown below −
The json file used in the working example given above is shown here −
{ "items": [ { "title": "Christmas Image 1", "url": "images/christmas1.jpg" }, { "title": "Christmas Image 2", "url": "images/christmas2.jpg" }, { "title": "Christmas Image 3", "url": "images/christmas3.jpg" }, { "title": "Christmas Image 4", "url": "images/christmas4.jpg" } ] }
We can refresh the list using event on the amp-list as shown in the code given below −
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 List</title> <link 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{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> <script async custom-element = "amp-list" src = "https://cdn.ampproject.org/v0/amp-list-0.1.js"> </script> <script async custom-template = "amp-mustache" src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js"> </script> <style amp-custom> amp-img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } button{ background-color: #ACAD5C; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } </style> </head> <body> <h3>Google AMP - Amp List</h3> <button on = "tap:amplist.refresh">Refresh Images</button> <amp-list id = "amplist" width = "auto" height = "100" layout = "fixed-height" src = "amplist.json" class = "m1"> <template type = "amp-mustache"> <div class = "images_for_display"> <amp-img width = "150" height = "100" alt = "{{title}}" src = "{{url}}"></amp-img> </div> </template> </amp-list> </body> </html>
Output
The output for the working example given above is as shown here −
There is a button added which when clicked calls the refresh action using the on event as shown below −
<button on = "tap:amplist.refresh"> Refresh Images </button> //amplist is the id used for amp-list
Onclick of the button the json file is called again and the contents are loaded. If there are images already loaded, they will be cached.
To Continue Learning Please Login
Login with Google