amp-selector
Mewakili kontrol yang menampilkan menu opsi dan memungkinkan pengguna memilih dari menu tersebut.
Skrip yang Diperlukan | <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script> |
Tata Letak yang Didukung | Semua |
Contoh | Lihat contoh amp-selector di AMP By Example |
Perilaku
AMP selector adalah kontrol yang menampilkan daftar opsi dan memungkinkan pengguna memilih satu atau beberapa opsi. Isi opsi tidak terbatas pada teks.
amp-selector
dapat berisi sembarang elemen HTML atau komponen AMP (misalnyaamp-carousel
,amp-img
, dll.).- Sebuah
amp-selector
tidak boleh berisi kontrolamp-selector
bertingkat. - Opsi yang dapat dipilih bisa ditetapkan dengan menambahkan atribut
option
ke elemen dan menetapkan nilai ke atribut (misalnya<li option='value'></li>
). - Opsi yang dinonaktifkan dapat ditetapkan dengan menambahkan atribut
disabled
ke elemen (misalnya<li option='d' disabled></li>
). - Opsi yang dipilih sebelumnya dapat ditetapkan dengan menambahkan atribut
selected
ke elemen (misalnya<li option='b' selected></li>
). - Untuk mengizinkan beberapa pilihan, tambahkan atribut
multiple
ke elemenamp-selector
. Secara default,amp-selector
memungkinkan satu pilihan pada satu waktu. - Untuk menonaktifkan seluruh
amp-selector
, tambahkan atributdisabled
ke elemenamp-selector
. - Apabila
amp-selector
berisi atributname
, danamp-selector
berada di dalam tagform
, maka jika peristiwa kirim terjadi pada formulir,amp-selector
akan berperilaku seperti grup tombol pilihan/kotak centang dan mengirim nilai yang dipilih (yang ditetapkan untuk opsi itu) ke namaamp-selector
.
Contoh:
<form id="form1" action="/" method="get" target="_blank"> <amp-selector name="single_image_select" layout="container"> <ul> <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li> <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li> <li option="na" selected="">None of the Above</li> </ul> </amp-selector> <amp-selector name="multi_image_select" layout="container" multiple=""> <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img> <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img> <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img> </amp-selector> <amp-selector name="multi_image_select_1" layout="container" multiple=""> <amp-carousel id="carousel-1" width="200" height="60" controls=""> <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img> <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img> <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img> <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img> </amp-carousel> </amp-selector> </form> <p><amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1"> <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls=""> <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img> <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img> <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img> <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img> </amp-carousel> </amp-selector>
Menghapus pilihan
Untuk menghapus semua pilihan saat sebuah elemen di-tap atau diklik, tetapkan atribut tindakan on
pada elemen tersebut, dan tentukan id
AMP Selector dengan metode tindakan clear
.
Contoh:
<button on="tap:mySelector.clear">Clear Selection</button> <amp-selector id="mySelector" layout="container" multiple> <div option>Option One</div> <div option>Option Two</div> <div option>Option Three</div> </amp-selector>
Lihat demo langsung di AMP By Example
Atribut
Atribut pada <amp-selector>
Atribut pada opsi <amp-selector>
option | Menunjukkan bahwa opsi dapat dipilih. Jika ada nilai yang ditentukan, isi nilai tersebut akan dikirim bersama formulir. |
disabled, selected | Atribut di atas berperilaku dengan cara yang sama seperti pada elemen HTML standar option . |
Peristiwa
Peristiwa dapat memicu tindakan pada komponen AMP lain yang menggunakan atribut on
.
Misalnya on="select: my-tab.show"
Baca lebih lanjut tentang Tindakan dan Peristiwa AMP.
select | amp-selector memicu peristiwa select saat pengguna memilih sebuah opsi.
Multi-selector dan single-selector mengaktifkan peristiwa tersebut saat pengguna memilih atau batal memilih opsi.
Menge-tap opsi yang dinonaktifkan tidak akan memicu peristiwa select .
|
Validasi
Lihat aturan amp-selector dalam spesifikasi validator AMP.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub