Google AMP - Lista

Amp-list é um componente de amplificador que chama um terminal CORS json e exibe os dados na forma de um arquivo json dentro de um modelo. Vamos entender isso com a ajuda de exemplos de trabalho.

Para trabalhar com amp-list, precisamos incluir o seguinte script -

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

Este é o formato da tag amp-list -

<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>

O src usado para amp-list é um arquivo json que contém os detalhes a serem listados. Podemos usar tags html normais ou componentes amp dentro da amp-list para exibir os dados do arquivo json. O tipo de modelo amp-mustache é usado para vincular os dados a serem exibidos.

Vamos entender isso com a ajuda de um exemplo prático, conforme mostrado abaixo -

Exemplo

<!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>

Resultado

A saída do exemplo de trabalho mostrado acima é mostrada abaixo -

O arquivo json usado no exemplo de trabalho fornecido acima é mostrado aqui -

{
   "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"
      }
   ]
}

Podemos atualizar a lista usando o evento na lista de amp, conforme mostrado no código fornecido abaixo -

Exemplo

<!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>

Resultado

A saída para o exemplo de trabalho fornecido acima é mostrada aqui -

Há um botão adicionado que, quando clicado, chama a ação de atualização usando o evento on, conforme mostrado abaixo -

<button on = "tap:amplist.refresh">
   Refresh Images
</button> 
//amplist is the id used for amp-list

Ao clicar no botão, o arquivo json é chamado novamente e o conteúdo é carregado. Se já houver imagens carregadas, elas serão armazenadas em cache.