4/30/2017

Cara Menggunakan amp-accordion di AMP Html


amp-accordion


accordion biasanya digunakan untuk menampilkan dan menyembunyikan element HTML atau "lompat" dari satu bagian ke bagian yang lain. Ini, dimaksudkan untuk mendapatkan tampilan (interface) yang lebih baik, khususnya untuk perangkat mobile, ukuran layar kecil dan sejenisnya.

Setup Cara Penggunaan

Sisipkan script dibawah ini dan letakkan sebelum tag <head>


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

Penggunaan dasar

Setiap komponen amp-akordeon dianggap sebagai bagian pada akordeon. Setiap node ini harus merupakan label <section>. Masing-masing <section> debe contener sólo dos hijos directos. Anak pertama (bagian ini) akan dianggap sebagai judul bagian tersebut. Mengklik / mengklik pada 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>

Sesuaikan acordeon

amp-accordion tambahkan atribut expanded ke elemen yang diperluas. Anda bisa menggunakannya penyeleksi atribut CSS untuk merancang bagian akordeon sesuai dengan apakah itu telah diperluas atau dikontrak. Gunakan section[expanded] untuk merancang negara yang diperluas dan section:not([expanded]) untuk merancang negara yang runtuh


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

Contohnya 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>

Ini adalah contoh lain, yang menyembunyikan tombol "Show more" 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>

Akordeon bersarang

Anda bahkan dapat membuat beberapa akordion. Pastikan untuk menghindari elemen gaya berdasarkan status diperluas dari amplifier akordeon yang disertakan. Secara khusus, hindari aturan yang terlalu umum seperti:


section[expanded] h4 {
  ...
}

Alih-alih elemen obyektif langsung:


section[expanded] > h4 {
  ...
}

Un acordeón anidado:


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:

Share:

Related post

You Might Also Like:

Disqus comments:

Facebook comments: