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

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 (misalnya amp-carousel, amp-img, dll.).
  • Sebuah amp-selector tidak boleh berisi kontrol amp-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 elemen amp-selector. Secara default, amp-selector memungkinkan satu pilihan pada satu waktu.
  • Untuk menonaktifkan seluruh amp-selector, tambahkan atribut disabled ke elemen amp-selector.
  • Apabila amp-selector berisi atribut name, dan amp-selector berada di dalam tag form, 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 nama amp-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>

disabled, form, multiple, name Atribut di atas berperilaku dengan cara yang sama seperti pada HTML standar select element .
keyboard-select-mode Atribut keyboard-select-mode menentukan perilaku navigasi keyboard untuk opsi di dalam amp-selector.
  • none (default): Tombol tab mengubah fokus antar-item dalam amp-selector. Pengguna harus menekan Enter atau spasi untuk mengubah pilihan. Tombol panah dinonaktifkan.
  • focus: Tombol tab memberikan fokus pada amp-selector. Pengguna berpindah-pindah item menggunakan tombol panah. Harus menekan spasi atau Enter untuk mengubah pilihan.
  • select: Tombol tab memberikan fokus pada amp-selector. Pilihan berubah saat pengguna berpindah-pindah opsi menggunakan tombol panah.

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.
  • event.targetOption berisi nilai atribut option dari elemen yang dipilih.
  • event.selectedOptions berisi array nilai atribut option dari semua elemen yang dipilih.

Validasi

Lihat aturan amp-selector dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

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