Cara membuat amp accordion

12/13/2017 09:37:00 PM


amp-accordion


Accordion adalah yang dapat memberi jalan bagi pengunjung untuk melihat konten dan melompat ke bagian atau pilihan pengunjung sesuka hati.

Tambahkan

Masukan komponen amp-accordion setelah code <head>


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

Penggunaan dasar

Masing-masing komponen accordion dianggap sebagai bagian accordion. Masing-masing node ini harus diberi label <section>. Masing-masing <section> hanya boleh berisi dua anak langsung. Anak pertama (bagian) akan dianggap sebagai judul bagian. Mengklik / mengklik bagian ini akan memicu perilaku ekspansi / kontraksi. Gunakan atributnya disable-session-states untuk menonaktifkan pelestarian status akordeon dalam satu sesi.


Contohnya




  

    
Section 1

    
Bunch of awesome content.

  

  

    
Section 2

    
Bunch of even more awesome content. This time in a
      <div>.

  

  

    
Section 3

    

      
      
Images work as well.

    

  




<amp-accordion>
  <section expanded>
    <h4>Section 1</h4>
    <p>Bunch of awesome content.</p>
  </section>
  <section>
    <h4>Section 2</h4>
    <div>Bunch of even more awesome content. This time in a
      <code>&lt;div&gt;</code>.</div>
  </section>
  <section>
    <h4>Section 3</h4>
    <figure>
      <amp-img src="/img/amp.jpg"
        width="1080"
        height="610"
        layout="responsive"
        alt="an image"></amp-img>
      <figcaption>Images work as well.</figcaption>
    </figure>
  </section>
</amp-accordion>

Accordion

Cara membuat amp accordion dan menambahkan atribut expanded untuk elemen yang diperluas. Bisa menggunakan pemilih atribut CSS untuk merancang bagian amp accordion tergantung yang telah diperluas atau diumpetin. Gunakan section[expanded] to design the expanded state and section:not([expanded]) to design the state of collapse


amp-accordion section[expanded] .show-more {
  display: none;
}
amp-accordion section:not([expanded]) .show-less {
  display: none;
}

Contoh ini menunjukkan judul yang berbeda berdasarkan apakah bagian tersebut diperluas atau tidak.


Contohnya




  

    

      Show more
      Show less
    

    
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
      in eu wisi. 

  




<amp-accordion disable-session-states>
  <section>
    <h4>
      <span class="show-more">Show more</span>
      <span class="show-less">Show less</span>
    </h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
      in eu wisi. </p>
  </section>
</amp-accordion>

Berikut adalah contoh lain, yang menyembunyikan tombol "Tampilkan Lagi" setelah diklik.


Contohnya




  

    

      Show more
    

    
Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
      in eu wisi. 

  




<amp-accordion id="hidden-header"
  disable-session-states>
  <section>
    <h4>
      <span class="show-more">Show more</span>
    </h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
      in eu wisi. </p>
  </section>
</amp-accordion>

Nested Accordions

Pastikan untuk menghindari elemen gaya berdasarkan keadaan penguat akordion yang disertakan. Secara khusus, hindari aturan umum seperti:


section[expanded] h4 {
  ...
}

Elemen langsung yang obyektif:


section[expanded] > h4 {
  ...
}

A nested accordion:


Contohnya




  

    
Section 1

    
Bunch of content.

  

  

    
Section 2

    
      

        
Nested Section 2.1

        
Bunch of content.

      

      

        
Nested Section 2.2

        
Bunch of more content.

      

    
  




<amp-accordion disable-session-states>
  <section>
    <h4>Section 1</h4>
    <p>Bunch of content.</p>
  </section>
  <section>
    <h4>Section 2</h4>
    <amp-accordion class="nested-accordion">
      <section>
        <h4>Nested Section 2.1</h4>
        <p>Bunch of content.</p>
      </section>
      <section>
        <h4>Nested Section 2.2</h4>
        <p>Bunch of more content.</p>
      </section>
    </amp-accordion>
  </section>
</amp-accordion>



Tags:



You Might Also Like

Comments: