Laci

Laci adalah panel setinggi penuh yang ditambatkan pada satu sisi. Seperti modal(), ia adalah sebuah popover: tombol dengan popovertarget yang cocok membukanya, dan peramban menangani latarnya, klik di luar, serta Escape.

Tugas terseringnya di situs statis adalah menu navigasi di ponsel.

Laci dasar

fragment(
  button({ popovertarget: 'drawer-basic' }, 'Buka laci'),
  drawer({ id: 'drawer-basic', title: 'Pengaturan' },
    stack({ gap: 'md' },
      toggle({ label: 'Pencarian Pagefind', checked: true }),
      toggle({ label: 'Optimasi gambar', checked: true }),
      toggle({ label: 'Island server' }),
    ),
  ),
)

Sisi

fragment(
  stack({ direction: 'row', gap: 'sm' },
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-start' }, 'Dari awal'),
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-end' }, 'Dari akhir'),
  ),
  drawer({ id: 'drawer-start', side: 'start', title: 'Awal' },
    text({ variant: 'small', tone: 'muted' }, 'Ditambatkan pada tepi awal — sebelah kiri dalam bahasa yang ditulis kiri ke kanan.'),
  ),
  drawer({ id: 'drawer-end', title: 'Akhir' },
    text({ variant: 'small', tone: 'muted' }, 'Bawaannya: ditambatkan pada tepi akhir.'),
  ),
)

Lebar

Panjang CSS apa pun. Ia dibatasi pada 90% viewport, jadi laci lebar tetap muat di ponsel.

fragment(
  stack({ direction: 'row', gap: 'sm' },
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-narrow' }, 'Sempit'),
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-wide' }, 'Lebar'),
  ),
  drawer({ id: 'drawer-narrow', width: '14rem', title: 'Sempit' },
    text({ variant: 'small', tone: 'muted' }, 'width: 14rem'),
  ),
  drawer({ id: 'drawer-wide', width: '34rem', title: 'Lebar' },
    text({ variant: 'small', tone: 'muted' }, 'width: 34rem'),
  ),
)

Pola yang diinginkan kebanyakan situs: tombol menu di bilahnya, tautannya di dalam laci.

sitelo

fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      iconButton({
        label: 'Buka navigasi',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'drawer-nav',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'drawer-nav', title: 'Navigasi' },
    navLink({ href: '#docs', current: true }, 'Dokumentasi'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Contoh'),
    navLink({ href: '#about' }, 'Tentang'),
    divider({ spacing: 'sm' }),
    button({ block: true }, 'Mulai'),
  ),
)

fragment(
  button({ variant: 'soft', color: 'neutral', popovertarget: 'drawer-filters' }, 'Filter'),
  drawer({ id: 'drawer-filters', title: 'Filter', width: '22rem' },
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'Jenis',
        name: 'drawer-type',
        value: 'guide',
        options: [
          { value: 'guide', label: 'Panduan' },
          { value: 'example', label: 'Contoh' },
          { value: 'all', label: 'Semuanya' },
        ],
      }),
      choiceGroup({
        legend: 'Tag',
        name: 'drawer-tags',
        type: 'checkbox',
        value: ['routing'],
        options: ['routing', 'data', 'islands'],
      }),
      stack({ direction: 'row', gap: 'sm' },
        button({ variant: 'ghost', color: 'neutral', popovertarget: 'drawer-filters', popovertargetaction: 'hide' }, 'Batal'),
        button('Terapkan'),
      ),
    ),
  ),
)

Penggulungan latar

Halaman di belakang laci yang terbuka tidak tergulir — kunci hanya-CSS yang sama dengan yang dipakai modal(), tanpa skrip dan tanpa apa pun yang perlu diinisialisasi. Berikan lockScroll: false agar latarnya tergulir seperti biasa.

Props

Prop	Tipe	Bawaan	Deskripsi
`id`	`string`	—	Wajib. Apa yang ditunjuk popovertarget sebuah pemicu.
`title`	`Child`	—	Judul, sekaligus nama dialognya yang dapat diakses.
`side`	`'start' \| 'end'`	`'end'`	Pada tepi mana ia ditambatkan.
`width`	`string`	`'20rem'`	Lebar panel, dibatasi pada 90vw.
`closable`	`boolean`	`true`	Menampilkan × di kepalanya.
`closeLabel`	`string`	`'Close'`	Nama yang dapat diakses untuk tombol itu.
`lockScroll`	`boolean`	`true`	Menghentikan penggulungan halaman di belakangnya selagi ia terbuka.