AMP

amp-accordion

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Provides a way for viewers to have a glance at the outline of the content and jump to a section of their choice at will.

 

Required Scripts

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

Supported Layouts

Menyediakan cara bagi pengunjung untuk melihat sekilas garis besar konten dan meloncat ke bagian mana pun. Cara ini berguna pada perangkat seluler yang bahkan beberapa kalimat dalam suatu bagian pun terkadang memerlukan scrolling.

Skrip yang Diperlukan <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Tata Letak yang Didukung container
Contoh Contoh kode yang dianotasi untuk amp-accordion

Perilaku

Komponen amp-accordion memungkinkan Anda menampilkan bagian konten yang dapat diciutkan dan diluaskan. Setiap turunan langsung dari komponen amp-accordion akan dianggap sebagai bagian dalam accordion. Setiap node tersebut harus berupa tag <section>.

  • Suatu amp-accordion dapat berisi satu atau beberapa elemen <section> sebagai turunan langsungnya.
  • Setiap <section> harus berisi persis dua turunan langsung.
  • Turunan pertama (dari bagian tersebut) menunjukkan judul bagian dan harus berupa elemen judul (salah satu dari h1, h2, ..., h6, header).
  • Turunan kedua (dari bagian tersebut) dapat berupa tag apa pun yang diizinkan dalam HTML AMP dan menunjukkan isi bagian.
  • Mengklik/menge-tap judul bagian akan memperluas atau menciutkan bagian itu.
  • Status diciutkan/diluaskan setiap bagian dalam elemen amp-accordion akan dipertahankan selama level sesi. Untuk berhenti mempertahankan status ini, tambahkan atribut disable-session-states ke elemen amp-accordion.

Contoh: Menampilkan accordion

Dalam contoh ini, kami menampilkan tiga bagian. Bagian ketiga diluaskan saat halaman dimuat. Selain itu, kami tidak mempertahankan status yang diciutkan/diluaskan dengan menetapkan disable-session-states.

Content in section 1.

Content in section 2.

Section 3

<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>
Buka cuplikan ini di playground

Untuk melihat demo amp-accordion lainnya, buka AMP By Example.

Peristiwa

Peristiwa di bawah akan dipicu pada section dari accordion.

expand Peristiwa ini dipicu pada section target yang berubah dari status diciutkan menjadi diluaskan. Perhatikan bahwa memanggil expand pada section yang telah diluaskan tidak akan memicu peristiwa ini.
collapse Peristiwa ini dipicu pada section target yang berubah dari status diluaskan menjadi diciutkan. Perhatikan bahwa memanggil collapse pada section yang telah diciutkan tidak akan memicu peristiwa ini.

Tindakan

expand Peristiwa ini dipicu pada section target yang berubah dari status diciutkan menjadi diluaskan. Perhatikan bahwa memanggil expand pada section yang telah diluaskan tidak akan memicu peristiwa ini.
toggle Tindakan ini memicu peralihan status antara expanded dan collapsed pada amp-accordion. Jika dipanggil tanpa argumen, status semua bagian accordion akan dialihkan. Bagian tunggal dapat ditetapkan dengan argumen section dan id yang sesuai sebagai nilainya.
expand Tindakan ini meluaskan amp-accordion. Jika sudah expanded, statusnya akan tetap seperti itu. Jika dipanggil tanpa argumen, semua bagian accordion akan diluaskan. Bagian tunggal dapat ditetapkan dengan argumen section dan id yang sesuai sebagai nilainya.
collapse Tindakan ini menciutkan amp-accordion. Jika sudah diciutkan, statusnya akan tetap seperti itu. Jika dipanggil tanpa argumen, semua bagian accordion akan diciutkan. Bagian tunggal dapat ditetapkan dengan argumen section dan id yang sesuai sebagai nilainya.

Atribut

animate Tetapkan atribut ini pada <amp-accordion> untuk menganimasikan perluasan/penciutan semua bagian accordion.
disable-session-states Tetapkan atribut ini pada <amp-accordion> untuk memilih tidak mempertahankan status diciutkan/diluaskan accordion.
expanded Tetapkan atribut ini pada <section> untuk menampilkan bagian sebagai diluaskan saat halaman dimuat.
expand-single-section Tetapkan atribut ini pada <amp-accordion> untuk mengizinkan hanya satu <section> yang diluaskan pada satu waktu. Jika pengguna berfokus pada satu <section>, <section> lain yang sebelumnya diluaskan akan diciutkan.

Penataan gaya

  • Anda dapat menggunakan pemilih elemen amp-accordion untuk menata gayanya dengan bebas.
  • Elemen amp-accordion selalu berupa display: block.
  • Elemen <section>, judul, dan isi tidak dapat dibuat mengapung.
  • Saat bagian diluaskan, elemen <section> memiliki atribut expanded.
  • Elemen isi telah di-clearfix dengan overflow: hidden, sehingga tidak dapat memiliki scrollbar.
  • Margin elemen <amp-accordion>, <section>, judul, dan isi ditetapkan ke 0 dan dapat diganti dalam gaya kustom.
  • Baik elemen judul maupun isi bersifat position: relative.

Validasi

Lihat aturan amp-accordion dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub