Akordeon

Tiap bagian adalah sebuah <details>. Membuka, menutup, dukungan papan ketik, dan pencarian dalam halaman semuanya datang dari peramban, dan akordeonnya bekerja dengan JavaScript dimatikan — yang untuk FAQ, pemakaian tersering, itu penting.

Akordeon dasar

Apa itu sitelo?

Pembuat situs statis yang dibangun di atas Vite. Halaman adalah fungsi yang mengembalikan HTML.

Apakah ia mengirim runtime?

Tidak. Tidak ada yang sampai ke peramban kecuali Anda sendiri menautkan sebuah skrip.

Bisakah saya memakai TypeScript?

Bisa — .ht.ts dan .ht.tsx adalah ekstensi halaman seperti yang lain.

accordion({
  items: [
    { title: 'Apa itu sitelo?', content: 'Pembuat situs statis yang dibangun di atas Vite. Halaman adalah fungsi yang mengembalikan HTML.' },
    { title: 'Apakah ia mengirim runtime?', content: 'Tidak. Tidak ada yang sampai ke peramban kecuali Anda sendiri menautkan sebuah skrip.' },
    { title: 'Bisakah saya memakai TypeScript?', content: 'Bisa — .ht.ts dan .ht.tsx adalah ekstensi halaman seperti yang lain.' },
  ],
})

Terbuka secara bawaan

Terbuka begitu tiba

Yang ini punya open: true.

Tertutup

Yang ini tidak.

accordion({
  items: [
    { title: 'Terbuka begitu tiba', content: 'Yang ini punya open: true.', open: true },
    { title: 'Tertutup', content: 'Yang ini tidak.' },
  ],
})

Satu per satu

name yang sama membuat bagian-bagiannya saling meniadakan — membuka satu menutup yang lain. Itu perilaku bawaan peramban untuk <details name>, bukan sebuah skrip.

Pertama

Buka yang lain dan yang ini menutup.

Kedua

Yang ini pun begitu.

Ketiga

Selalu hanya satu yang terbuka.

accordion({
  name: 'demo-exclusive',
  items: [
    { title: 'Pertama', content: 'Buka yang lain dan yang ini menutup.', open: true },
    { title: 'Kedua', content: 'Yang ini pun begitu.' },
    { title: 'Ketiga', content: 'Selalu hanya satu yang terbuka.' },
  ],
})

Konten kaya

Bangun bagiannya dengan accordionItem() ketika kontennya lebih dari satu paragraf.

Pasang

Tambahkan paketnya dan pendamping markup-nya:

npm install sitelo javascript-to-html

Konfigurasi

Opsional. Opsi Vite tinggal di bawah kunci vite.

sitelo.config.js

Terapkan

Terbitkan direktori keluarannya ke hosting statis mana pun.

NetlifyVercelCloudflare PagesGitHub Pages

accordion(
  accordionItem({ title: 'Pasang', open: true },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Tambahkan paketnya dan pendamping markup-nya:'),
      code('npm install sitelo javascript-to-html'),
    ),
  ),
  accordionItem({ title: 'Konfigurasi' },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Opsional. Opsi Vite tinggal di bawah kunci vite.'),
      code('sitelo.config.js'),
    ),
  ),
  accordionItem({ title: 'Terapkan' },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Terbitkan direktori keluarannya ke hosting statis mana pun.'),
      stack({ direction: 'row', gap: 'sm', wrap: true },
        chip({ size: 'sm' }, 'Netlify'),
        chip({ size: 'sm' }, 'Vercel'),
        chip({ size: 'sm' }, 'Cloudflare Pages'),
        chip({ size: 'sm' }, 'GitHub Pages'),
      ),
    ),
  ),
)

Sebuah FAQ

Bentuk yang menjadi alasan komponen ini ada: konten yang sudah berada di HTML, diciutkan agar mudah dipindai, dan bisa ditemukan mesin pencari karena ia tidak pernah meninggalkan halamannya.

Benarkah tanpa konfigurasi?

Proyek dengan satu berkas di src/ dan tanpa konfigurasi bisa dibangun. Selebihnya bersifat pilihan.

Bagaimana rute dinamis bekerja?

Kurung siku di nama berkas. generateStaticParams mendaftar apa yang dibangun.

Bagaimana dengan pencarian?

Setel pagefind: true dan build akan mengindeks setiap halaman.

return (() => {
  const faq = [
    ['Benarkah tanpa konfigurasi?', 'Proyek dengan satu berkas di src/ dan tanpa konfigurasi bisa dibangun. Selebihnya bersifat pilihan.'],
    ['Bagaimana rute dinamis bekerja?', 'Kurung siku di nama berkas. generateStaticParams mendaftar apa yang dibangun.'],
    ['Bagaimana dengan pencarian?', 'Setel pagefind: true dan build akan mengindeks setiap halaman.'],
  ]

  return accordion({
    name: 'demo-faq',
    items: faq.map(([title, content]) => ({ title, content })),
  })
})()

Props

accordion():

Prop	Tipe	Bawaan	Deskripsi
`items`	`Array`	`[]`	String, atau objek { title, content, open }.
`name`	`string`	—	Nama yang sama membuat bagian-bagiannya saling meniadakan.

accordionItem():

Prop	Tipe	Bawaan	Deskripsi
`title`	`Child`	—	Baris ringkasannya.
`open`	`boolean`	`false`	Apakah ia mulai dalam keadaan terbentang.
`name`	`string`	—	Efeknya sama seperti pada induknya, saat membangun item secara manual.