¿Para qué sirve Amp-list? Ejemplo de implementación


Amp-list


Amp-list de amplificación extrae contenido dinámico de un punto final de CORS JSON y lo procesa utilizando una plantilla suministrada. Esto es bueno para incrustar una lista dinámica de artículos relacionados.

Disposición

Ingrese el siguiente script justo después de la apertura <head>

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

Además ingrese el siguiente script amp-mustache justo después de la apertura <head>

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

Uso de una plantilla anidada

Amp-list de amplificación es proporcionado por un extremo de JSON CORS, que está definido por el atributo src. El protocolo de la URL debe ser HTTPS. La respuesta debe ser un objeto JSON que contenga elementos de una propiedad de matriz, por ejemplo:


{

  "items": [
    {
      "title": "amp-carousel",
      "url": "https://ampbyexample.com/components/amp-carousel"
    },
    ...
  ]
}


El contenido de la lista se procesa a través de una plantilla amp-mustache. La plantilla se puede especificar mediante id o mediante un elemento anidado.

Ejemplo


Amp-youtube
Amp-vine
Amp-twitter
Amp-sidebar



Código


<amp-list width="auto"
  height="100"
  layout="fixed-height"
  src="https://ampbyexample.com/json/examples.json"
  class="m1">

  <template type="amp-mustache"
    id="amp-template-id">
    <div>
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list>

Uso de una plantilla existente

La plantilla también se puede especificar utilizando un ID de un elemento de plantilla existente. Este ejemplo hace referencia a la plantilla de la muestra anterior.

Ejemplo


Amp-youtube
Amp-vine
Amp-twitter
Amp-sidebar


Código


<amp-list width="auto"
  height="100"
  layout="fixed-height"
  src="https://ampbyexample.com/json/examples.json
  template="amp-template-id"
  class="m1">
</amp-list>

Manejo de desbordamiento de lista (Handling List Overflow)

Si amp-list de amplificación requiere más espacio que el disponible, el tiempo de ejecución de AMP mostrará el elemento de desbordamiento (si se especifica).

Ejemplo


Amp-youtube
Amp-vine
Amp-twitter
Amp-sidebar


Código


<amp-list width="auto"
  height="48"
  layout="fixed-height"
  src="https://ampbyexample.com/json/examples.json"
  template="amp-template-id"
  class="m1">
  <div overflow
    role="button"
    aria-label="Show more"
    class="list-overflow ampstart-btn caps">
    Show more
  </div>
</amp-list>


Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: