12/07/2016

Cara menggunakan amp-selector


amp-selector

Amp-selector memungkinkan pengguna untuk memilih dari daftar opsi. Konten opsi tidak terbatas pada teks saja.

Disposisi

Masukkan yang berikut ini script tepat setelah pembukaan <head>

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

1. Pilih tunggal

Amp-selector default adalah pilihan tunggal. Opsi ini diperlukan untuk semua elemen yang dipilih, misalnya, pembagi tidak dapat dipilih dalam contoh berikut.

Kodenya 
<amp-selector layout="container">
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"></amp-img>
  <div class="divider inline-block mx1"></div>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"></amp-img>
</amp-selector>

Demonya

2. Multi Select

Tambahkan beberapa atribut untuk mengaktifkan banyak pilihan.

Kodenya 
<amp-selector layout="container"
  multiple>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"></amp-img>
</amp-selector>

Demonya


3. Atribut

Atribut berikut ini kompatibel dengan elemen tertentu:

Disabled: nonaktifkan suatu item.
selected: pilih dulu item.

Kodenya 
<amp-selector layout="container"
  multiple>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"
    selected></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"
    disabled></amp-img>
</amp-selector>

Demonya


4. Dinonaktifkan

Tambahkan atribut Dinonaktifkan untuk menonaktifkan seluruh pemilih.

Kodenya 

  disabled>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"></amp-img>
</amp-selector>

Demonya


5. Forms

Di dalam formulir,amp-selector berperilaku seperti sekelompok tombol radio / kotak centang dan mengirimkan nilai yang dipilih ke nama amp-selector.

Kodenya 

<form action="#"
  method="get"
  target="_top">
  <amp-selector layout="container"
    name="form-select"
    multiple>
    <ul class="m0 p0">
      <li option="a"
        class="px1 mb1">Option A</li>
      <li option="b"
        class="px1 mb1">Option B</li>
      <li option="c"
        class="px1 mb1">Option C</li>
      <li option="na"
        selected
        class="px1 mb1">N/A</li>
    </ul>
  </amp-selector>
  <input type="submit"
    value="Select"
    class="ampstart-btn ampstart-btn-secondary caps">
</form>

Demonya

  • Option A
  • Option B
  • Option C
  • N/A

¿Untuk apa ini? amp-selector

Selektor AMP adalah kontrol yang menyajikan daftar opsi dan memungkinkan pengguna untuk memilih satu atau banyak opsi.




Tags:

Share:

Related post

You Might Also Like:

Disqus comments:

Facebook comments: