AMP

amp-accordion

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 Didukungcontainer
ContohContoh 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.

Tampilkan kode lengkap

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

Peristiwa

Peristiwa di bawah akan dipicu pada section dari accordion.

expandPeristiwa 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.
collapsePeristiwa 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

expandPeristiwa 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.
toggleTindakan 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.
expandTindakan 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.
collapseTindakan 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

animateTetapkan atribut ini pada <amp-accordion> untuk menganimasikan perluasan/penciutan semua bagian accordion.
disable-session-statesTetapkan atribut ini pada <amp-accordion> untuk memilih tidak mempertahankan status diciutkan/diluaskan accordion.
expandedTetapkan atribut ini pada <section> untuk menampilkan bagian sebagai diluaskan saat halaman dimuat.
expand-single-sectionTetapkan 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?

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