Daftar isi

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

container

Contoh

amp-accordion Dynamic Accordion Housing

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.

Section 1

Content in section 1.

Section 2

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

amp-accordion 1.0 0.1