amp-list

Edit on Github
Open in Playground

Introduction

The amp-list component fetches dynamic content from a CORS JSON endpoint and renders it using a supplied template. This is good for embedding a dynamic list of related articles.

Setup

Import the amp-list component ...

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

... and the amp-mustache component in the header

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

Using a nested template

The amp-list content is provided by a JSON CORS endpoint, which is defined by the src attribute. The URL's protocol must be HTTPS. The response must be a JSON object containing an array property items, for example:

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

The list content is rendered via an amp-mustache template. The template can be specified either by id, or by using a nested element.

Example

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

Using an existing template

The template can also be specified using an ID of an existing template element. This example references the template from the previous sample.

Example

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

Handling List Overflow

If the amp-list content requires more space than available, the AMP runtime will display the overflow element (if specified).

Example

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