AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Tindakan dan peristiwa di email AMP

Important: this documentation is not applicable to your currently selected format websites!

Dokumentasi ini mencakup tindakan dan peristiwa untuk format email AMP. Bacalah Tindakan dan peristiwa untuk iklan, cerita, dan situs web AMP.

Atribut on digunakan untuk menginstal pengurus (handler) peristiwa pada elemen. Peristiwa-peristiwa yang didukung bergantung pada elemen.

Nilai untuk sintaksis adalah bahasa yang spesifik untuk domain sederhana dari formulir tersebut:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Lihat tabel di bawah ini untuk mengetahui deskripsi setiap bagian sintaks.

Sintaks Diperlukan? Deskripsi
eventName ya Ini adalah nama peristiwa yang diekspos elemen.
targetId ya Ini adalah ID DOM untuk elemen tersebut, atau target khusus yang telah ditentukan sebelumnya yang ingin Anda tindak lanjuti sebagai tanggapan atas peristiwa tersebut. Di dalam contoh berikut ini, targetId adalah ID DOM dari target amp-lightbox, photo-slides. 
<amp-lightbox id = "photo-slides"> </amp-lightbox>
<button on = "tap: photo-slides"> Tampilkan Gambar</button>
methodName tidak Ini untuk elemen dengan tindakan default (standar).

Ini adalah metode yang diekspos elemen target (dirujuk dengan targetId) dan ingin Anda eksekusi ketika peristiwa dipicu.

AMP mempunyai konsep tentang tindakan default yang dapat diterapkan elemen-elemen. Jadi, saat meniadakan methodName, AMP akan mengeksekusi metode default tersebut.
arg=value tidak Beberapa tindakan, jika didokumentasikan, mungkin menerima argumen. Argumen ditetapkan di dalam kurung di dalam notasi key=value. Nilai-nilai yang diterima adalah:
  • untai tanpa tanda kutip yang sederhana: simple-value
  • untai bertanda kutip: "string value" atau 'string value'
  • nilai-nilai Boolean: true atau false
  • angka: 11 atau 1.1
  • referensi dot-syntax untuk data peristiwa: event.someDataVariableName

Menangani beberapa peristiwa

Anda dapat mendengarkan beberapa peristiwa pada suatu elemen dengan memisahkan peristiwa dengan tanda titik koma ;.

Contoh: on="submit-success:lightbox1;submit-error:lightbox2"

Beberapa tindakan untuk satu peristiwa

Anda dapat mengeksekusi beberapa tindakan dalam urutan untuk peristiwa yang sama dengan memisahkan tindakan-tindakan tersebut menggunakan koma ','.

Contoh: on="tap:target1.actionA,target2.actionB"

Peristiwa dan tindakan yang ditentukan secara global

AMP menentukan sebuah peristiwa tap secara global bahwa Anda dapat mendengarkan elemen HTML apa pun (termasuk elemen AMP).

AMP juga menentukan tindakan hide, show, dan toggleVisibility secara global bahwa Anda dapat memicu elemen HTML apa pun.

Sebuah elemen hanya dapat diperlihatkan jika sebelumnya disembunyikan dengan tindakan hide atau toggleVisibility, atau dengan menggunakan atribut hidden. Tindakan show tidak mendukung elemen yang disembunyikan dengan display:none CSS atau layout=nodisplay AMP.

Contohnya, yang berikut ini mungkin dilakukan di AMP:

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

Peristiwa yang khusus untuk elemen tertentu

* - semua elemen

Peristiwa Deskripsi
tap Dipicu ketika elemen diklik/diketuk.

Elemen input

Peristiwa Deskripsi Elemen Data
change Dipicu ketika nilai elemen berubah dan diterapkan.

Properti data mencerminkannya dalam HTMLInputElement dan HTMLSelectElement.

 input 
event.min
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"] 		event.checked
select 
event.min
event.max
event.value
input-debounced Dipicu ketika nilai elemen berubah. Ini serupa dengan peristiwa change standar, namun hanya dipicu ketika telah lewat 300 milidetik sejak nilai input berhenti berubah. Elemen yang memicu peristiwa input. Sama dengan data peristiwa change.
input-throttled Dipicu ketika nilai elemen berubah. Ini serupa dengan peristiwa change standar, namun dipercepat untuk dipicu secara maksimal setiap 100 milidetik sementara nilai input berubah. Elemen yang memicu peristiwa input. Sama dengan data peristiwa change.

amp-accordion > bagian

Peristiwa Deskripsi Data
expand Dipicu ketika bagian akordeon meluas. Tidak ada.
collapse Dipicu ketika bagian akordeon menciut. Tidak ada.

amp-carousel[type="slides"]

Peristiwa Deskripsi Data
slideChange Dipicu ketika slide korsel (carousel) yang sedang aktif berubah. 
// Slide number.
event.index

amp-lightbox

Peristiwa Deskripsi Data
lightboxOpen Dipicu ketika lightbox (bingkai terang) terlihat sepenuhnya. Tidak ada
lightboxClose Dipicu ketika lightbox (bingkai terang) tertutup sepenuhnya. Tidak ada

amp-list

Peristiwa Deskripsi Data
fetch-error (kepercayaan rendah) Dipicu saat pengambilan data gagal. Tidak ada

amp-selector

Peristiwa Deskripsi Data
select Dipicu ketika suatu opsi dipilih atau tidak jadi dipilih. 
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Peristiwa Deskripsi Data
sidebarOpen Dipicu ketika bilah samping sepenuhnya terbuka setelah transisi berakhir. Tidak ada
sidebarClose Dipicu ketika bilah samping sepenuhnya tertutup setelah transisi berakhir. Tidak ada

amp-state

Peristiwa Deskripsi Data
fetch-error (kepercayaan rendah) Dipicu saat pengambilan data gagal. Tidak ada

formulir

Peristiwa Deskripsi Data
submit Dipicu ketika formulir dikirimkan.
submit-success Dipicu ketika respons pengiriman formulir berhasil. 
// Response JSON.
event.response
submit-error Dipicu ketika respons pengiriman formulir mengalami eror. 
// Response JSON.
event.response
valid Dipicu ketika formulir valid.
invalid Dipicu ketika formulir tidak valid.

Tindakan yang khusus untuk elemen tertentu

* (semua elemen)

Tindakan Deskripsi
hide Menyembunyikan elemen target.
show Memperlihatkan elemen target. Jika sebuah element autofocus menjadi terlihat, maka elemen tersebut akan mendapatkan fokus.
toggleVisibility Mengalihkan atau mengubah visibilitas elemen target. Jika sebuah element autofocus menjadi terlihat, maka elemen tersebut akan mendapatkan fokus.
toggleClass(class=STRING, force=BOOLEAN) Mengalihkan kelas elemen target. force bersifat opsional, dan jika ditentukan akan memastikan kelas itu hanya akan ditambahkan, tetapi tidak dihapus jika diatur sebagai true, dan hanya dihapus, tetapi tidak ditambahkan jika diatur sebagai false.
focus Membuat elemen target mendapatkan fokus. Untuk menghilangkan fokus, focus pada elemen lain (biasanya elemen induk). Kami sangat menyarankan agar tidak menghilangkan fokus dengan berfokus pada body/documentElement demi keperluan aksesibilitas.

amp-accordion

Tindakan Deskripsi
toggle(section=STRING) Mengalihkan status expanded dan collapsed bagian amp-accordion. Jika dipanggil tanpa argumen, maka akan mengalihkan semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.toggle(section=id')".
expand(section=STRING) Memperluas bagian-bagian akordeon. Jika sebuah bagian telah diperluas, maka akan tetap luas. Jika dipanggil tanpa argumen, maka akan memperluas semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.expand(section='section-id')".
collapse(section=STRING) Menciutkan bagian-bagian akordeon. Jika sebuah bagian telah ciut, maka akan tetap ciut. Jika dipanggil tanpa argumen, maka akan menciutkan semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.collapse(section='section-id')".

amp-carousel[type="slides"]

Tindakan Deskripsi
goToSlide(index=INTEGER) Memajukan korsel (carousel) ke indeks slide yang ditentukan.

amp-image-lightbox

Tindakan Deskripsi
open (default) Membuka lightbox (bingkai terang) gambar, di mana gambar sumber menjadi pemicu tindakan.

amp-lightbox

Tindakan Deskripsi
open (default) Membuka lightbox (bingkai terang).
close Menutup lightbox (bingkai terang).

amp-list

Peristiwa Deskripsi Data
changeToLayoutContainer Perbarui tata letak amp-list ke layout="CONTAINTER" untuk memungkinkan pengubahan ukuran dinamis.
fetch-error (kepercayaan rendah) Dipicu saat pengambilan data gagal. Tidak ada

amp-selector

Tindakan Deskripsi
clear Mengosongkan semua pilihan dari amp-selector yang telah ditentukan.
selectUp(delta=INTEGER) Menaikkan pilihan sesuai nilai `delta`. `delta` default ditetapkan pada -1. Jika tidak ada opsi yang dipilih, status yang dipilih akan menjadi nilai opsi terakhir.
selectDown(delta=INTEGER) Menurunkan pilihan sesuai nilai `delta`. `delta` default ditetapkan pada 1. Jika tidak ada opsi yang dipilih, status yang dipilih akan menjadi nilai opsi pertama.
toggle(index=INTEGER, value=BOOLEAN) Mengalihkan penerapan `selected` (terpilih). Jika atribut untuk memilih tidak ada, tindakan ini akan menambahkannya. Jika atribut untuk memilih ada, tindakan ini akan menghapusnya. Anda dapat memaksa dan mempertahankan serta menambahkan atau menghapus dengan menyertakan nilai Boolean di dalam argumen `value`. Sebuah nilai `true` akan memaksa untuk menambahkan atribut `selected` dan tidak akan menghapusnya jika memang sudah ada. Sebuah nilai `false` akan menghapus atribut tersebut, tetapi tidak akan menambahkannya jika tidak ada.

amp-sidebar

Tindakan Deskripsi
open (default) Membuka bilah samping (sidebar).
close Menutup bilah samping (sidebar).
toggle Mengalihkan status bilah samping (bilah samping).

formulir

Tindakan Deskripsi
clear Mengosongkan nilai apa pun yang ada di dalam input formulir.
submit Mengirimkan formulir.

Target spesial

Yang berikut ini adalah target yang disediakan oleh sistem AMP yang mempunyai persyaratan spesial:

Target: AMP

Target AMP disediakan oleh runtime AMP dan menerapkan tindakan tingkat tinggi yang berlaku pada seluruh dokumen.

Tindakan Deskripsi
setState({foo: 'bar'})1

Memerlukan amp-bind.

Menggabungkan objek secara literal ke dalam status yang dapat diikat.

1Jika digunakan dengan beberapa tindakan, tindakan selanjutnya akan menunggu setState() selesai sebelum pemanggilan. Hanya satu di antara setState() yang diizinkan per peristiwa.