Library HTML AMP menyediakan komponen yang dikelompokkan sebagai:

  • terpasang: Komponen yang disertakan dalam library pokok, seperti amp-img dan amp-pixel.
  • diperluas: Ekstensi untuk library pokok yang harus disertakan secara eksplisit dalam dokumen sebagai elemen kustom (misalnya <script async custom-element="amp-audio" ...).
  • eksperimental: Komponen yang dirilis namun belum siap untuk penggunaan luas.

Daftar komponen yang tersedia dicantumkan di bawah ini sesuai kategorinya.

Iklan dan analisis

Komponen Deskripsi
amp-ad Penampung untuk menampilkan iklan.
amp-ad-exit Menyediakan perilaku yang dapat dikonfigurasi untuk keluarnya iklan bagi A4A (AMP untuk Iklan).
amp-analytics Menangkap data analisis dari dokumen AMP.
amp-auto-ads Memasukkan iklan secara dinamis ke halaman AMP dengan menggunakan file konfigurasi yang ditayangkan secara jarak jauh.
amp-call-tracking Mengganti nomor ponsel secara dinamis di hyperlink untuk mengaktifkan pelacakan panggilan.
amp-experiment Dapat digunakan untuk melakukan eksperimen pengalaman pengguna pada dokumen AMP.
amp-pixel Piksel pelacakan untuk menghitung jumlah kunjungan halaman.
amp-sticky-ad Menyediakan cara untuk menampilkan dan meletakkan konten iklan di bagian bawah halaman.

Konten dinamis

Komponen Deskripsi
amp-access-laterpay Memungkinkan penayang mudah berintegrasi dengan platform pembayaran mikro LaterPay.
amp-access Menyediakan dukungan langganan dan paywall AMP.
amp-bind Memungkinkan elemen untuk bermutasi dalam respons terhadap tindakan pengguna atau perubahan data melalui pengikatan data dan ekspresi sederhana yang berbentuk seperti JS.
amp-byside-content Menampilkan konten dinamis dari layanan BySide.
amp-consent Memberikan kemampuan untuk mengumpulkan dan menyimpan persetujuan pengguna melalui kontrol UI.
amp-date-picker Menyediakan widget kalender untuk memilih tanggal.
amp-form Menyediakan dukungan formulir.
amp-geo Menyediakan antarmuka geolokasi tingkat negara secara perkiraan.
amp-gist Menampilkan GitHub Gist.
amp-install-serviceworker Menginstal ServiceWorker.
amp-list Mendownload data dan membuat item daftar secara dinamis menggunakan template.
amp-live-list Menyediakan cara untuk menampilkan dan mengupdate konten secara langsung.
amp-mustache Memungkinkan rendering template Mustache.js.
amp-next-page Secara dinamis memuat lebih banyak dokumen yang direkomendasikan untuk pengguna.
amp-selector Mewakili kontrol yang menampilkan menu opsi dan memungkinkan pengguna memilih dari menu tersebut.
amp-user-notification Menampilkan notifikasi yang dapat ditutup kepada pengguna.
amp-web-push Memungkinkan pengguna untuk berlangganan ke notifikasi push web.

Tata Letak

Komponen Deskripsi
amp-accordion Menyediakan cara bagi pengunjung untuk melihat sekilas garis besar konten dan meloncat ke bagian yang mereka inginkan.
amp-app-banner Pembungkus serta UI minimal untuk banner dengan posisi tetap dan lintas platform yang menampilkan pesan ajakan untuk menginstal aplikasi.
amp-carousel Menampilkan beberapa konten serupa secara bergantian sepanjang sumbu horizontal.
amp-fx-flying-carpet Membungkus turunan dalam penampung unik yang dapat di-scroll di layar penuh, yang memungkinkan Anda menampilkan iklan layar penuh tanpa memenuhi ruang di seluruh viewport.
amp-fx-collection Menyediakan kumpulan efek visual bawaan, seperti paralaks.
amp-iframe Menampilkan iframe.
amp-image-lightbox Menyediakan efek lightbox untuk gambar yang ditentukan.
amp-layout Menyediakan elemen penampung serbaguna generik yang menghadirkan [tata letak] (https://www.ampproject.org/docs/guides/responsive/control_layout#the-layout-attribute) AMP yang canggih ke semua elemen.
amp-lightbox Menampilkan elemen dalam modal "lightbox" viewport penuh.
amp-lightbox-gallery Memberikan pengalaman "lightbox". Setelah ada interaksi dari pengguna, komponen UI diperluas untuk mengisi viewport sampai ditutup oleh pengguna.
amp-position-observer Memantau posisi elemen dalam viewport sembari pengguna scroll dan mengirim acara yang dapat digunakan dengan komponen lainnya.
amp-sidebar Menyediakan cara untuk menampilkan konten meta yang dimaksudkan untuk akses sementara seperti navigasi, link, tombol, dan menu.

Media

Komponen Deskripsi
amp-3d-gltf Menampilkan model 3D GL Transmission Format (gITF).
amp-3q-player Menyematkan video dari 3Q SDN.
amp-anim Mengelola gambar animasi, biasanya berupa GIF.
amp-apester-media Menampilkan unit canggih Apester.
amp-audio Mengganti tag audio HTML5.
amp-bodymovin-animation Menampilkan pemutar animasi AirBnB Bodymovin, yang merender animasi dari JSON yang dihasilkan oleh Adobe After Effects.
amp-brid-player Menampilkan pemutar Brid.tv.
amp-brightcove Menampilkan pemutar Video Cloud atau Perform Brightcove.
amp-dailymotion Menampilkan video Dailymotion.
amp-google-vrview-image Menampilkan gambar VR.
amp-hulu Menampilkan video Hulu yang disematkan secara sederhana.
amp-ima-video Menyematkan pemutar video untuk iklan video instream yang terintegrasi dengan IMA SDK.
amp-img Mengganti tag img HTML5.
amp-imgur Menampilkan postingan Imgur.
amp-izlesene Menampilkan video Izlesene.
amp-jwplayer Menampilkan JW Player yang dihosting oleh cloud.
amp-kaltura-player Menampilkan Kaltura Player sebagaimana yang digunakan di Platform Video Kaltura.
amp-nexxtv-player Menampilkan streaming media dari platform nexxOMNIA.
amp-o2-player Menampilkan AOL O2Player.
amp-ooyala-player Menampilkan video Ooyala.
amp-playbuzz Menampilkan konten Playbuzz (misalnya, daftar, polling, dll.).
amp-reach-player Menampilkan pemutar video Beachfront Reach.
amp-soundcloud Menampilkan klip Soundcloud.
amp-springboard-player Menampilkan pemutar video Platform Springboard.
amp-video Mengganti tag video HTML5.
amp-vimeo Menampilkan video Vimeo.
amp-wistia-player Menampilkan video Wistia.
amp-youtube Menampilkan video YouTube.

Presentasi

Komponen Deskripsi
amp-animation Menentukan dan menampilkan animasi.
amp-dynamic-css-classes Menambahkan beberapa nama kelas CSS dinamis ke elemen HTML.
amp-fit-text Meluaskan atau menciutkan ukuran font agar sesuai dengan konten dalam ruang yang diberikan.
amp-font Memicu dan memantau pemuatan font kustom.
amp-mathml Menampilkan rumus MathML.
amp-story Format bercerita visual yang kaya.
amp-timeago Menyediakan stempel waktu samar dengan memformat tanggal sebagai "waktu lalu" (misalnya, 3 jam lalu).
amp-viz-vega Menampilkan visualisasi yang dibuat menggunakan tata bahasa visualisasi Vega.

Sosial

Komponen Deskripsi
amp-beopinion Menyematkan konten BeOpinion.
amp-addthis Menampilkan fitur situs AddThis yang disematkan.
amp-facebook-comments Menyematkan plugin komentar Facebook.
amp-facebook-like Menyematkan plugin tombol suka Facebook.
amp-facebook-page Menyematkan plugin halaman Facebook.
amp-facebook Menampilkan video atau postingan Facebook.
amp-gfycat Menampilkan GIF video Gfycat.
amp-instagram Menampilkan sematan Instagram.
amp-pinterest Menampilkan tombol Pasang Pin atau widget Pinterest.
amp-reddit Menampilkan sematan postingan atau komentar Reddit.
amp-riddle-quiz Menampilkan konten Riddle (misalnya, kuis, daftar, polling, dll.).
amp-social-share Menampilkan tombol bagikan sosial.
amp-twitter Menampilkan tweet Twitter.
amp-vine Menampilkan sematan sederhana Vine.
amp-vk Menyematkan widget postingan atau polling VK.