Dapat diciutkan

Komponen ini adalah satu <details> — elemen yang sama dengan yang membangun akordeon, tanpa hiasannya. Pakai untuk satu detail opsional di tengah halaman; pakai accordion() ketika ada sekumpulan darinya.

Ia tidak butuh skrip, dan karena kontennya tetap berada di dokumen, ia bisa ditemukan lewat pencarian dalam halaman milik peramban maupun oleh mesin pencari.

Dasar

Tampilkan konfigurasi yang dihasilkan

Semua yang ditulis sitelo ketika Anda menjalankan build tanpa berkas konfigurasi sendiri.

collapsible({ trigger: 'Tampilkan konfigurasi yang dihasilkan' },
  text({ variant: 'small' }, 'Semua yang ditulis sitelo ketika Anda menjalankan build tanpa berkas konfigurasi sendiri.'),
)

Terbuka secara bawaan

Mengapa ini ada

Karena halaman yang menyembunyikan penjelasannya di balik satu klik adalah halaman yang tak dibaca siapa pun.

collapsible({ trigger: 'Mengapa ini ada', open: true },
  text({ variant: 'small' }, 'Karena halaman yang menyembunyikan penjelasannya di balik satu klik adalah halaman yang tak dibaca siapa pun.'),
)

Konten kaya

Tampilkan keluaran lengkapnya
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Tampilkan keluaran lengkapnya' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Di dalam hal lain

Komponen ini duduk dengan nyaman di dalam kartu, peringatan, atau sel tabel.

Build gagal

2 tautan rusak

Tampilkan tautan yang gagal
  • /docs/old-routing
    ditautkan dari /docs
  • /blog/draft
    ditautkan dari /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Build gagal', subtitle: '2 tautan rusak' }),
    cardBody(
      collapsible({ trigger: 'Tampilkan tautan yang gagal' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'ditautkan dari /docs' }),
          listItem({ title: '/blog/draft', description: 'ditautkan dari /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Halaman lambat' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Satu halaman butuh lebih dari 500 ms untuk dirender.'),
      collapsible({ trigger: 'Tampilkan waktunya' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

Pemicunya

Batasi pada teks dan ikon. Sebuah <summary> sudah interaktif, jadi tombol atau tautan di dalamnya menyarangkan dua kendali padahal hanya ada satu tindakan — aturan yang sama diikuti menu().

Dapat diciutkan atau akordeon?

Satu pengungkap berdiri sendiri: collapsible(). Sekumpulan darinya, bergaris dan dikelompokkan, dengan pilihan hanya satu terbuka pada satu waktu: accordion().

Props

PropTipeBawaanDeskripsi
triggerChild—Isi ringkasannya. Hanya teks dan ikon.
openbooleanfalseApakah ia mulai dalam keadaan terbentang.