Amp-list
Amp-list amplifikasi mengekstraksi konten dinamis dari titik akhir CORS JSON dan memprosesnya menggunakan templat yang disediakan. Ini bagus untuk menyematkan daftar dinamis artikel terkait.
Disposisi
Masukkan script berikut tepat setelah pembukaan <head>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
Masukkan juga yang berikut ini script amp-mustache tepat setelah pembukaan <head>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
Menggunakan template
Amp-list amplifikasi disediakan oleh salah satu ujung JSON CORS, yang didefinisikan oleh atribut src. Protokol dari URL itu pasti HTTPS. Jawabannya harus berupa objek JSON yang berisi elemen properti array, misalnya:
{
"items": [
{
"title": "amp-carousel",
"url": "https://ampbyexample.com/components/amp-carousel"
},
...
]
}
Konten daftar diproses melalui templat amp-kumis. Templat dapat ditentukan oleh id atau oleh elemen.
Ejemplo 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
Templat juga dapat ditentukan menggunakan ID dari elemen templat yang ada. Contoh ini merujuk pada templat sampel sebelumnya.
Contohnya 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>
Kelola daftar overflow (Handling List Overflow)
Amp-list amplifikasi membutuhkan lebih banyak ruang daripada yang tersedia, runtime AMP akan menampilkan elemen overflow (jika ditentukan).
Contohnya Codenya
<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>