React 19 · 8 kB terkompresi · tanpa dependensi

Rangka
di bawah perkakas Anda.

Rel ikon di tepi, zona yang bisa diubah ukurannya mengelilingi pusat yang sepenuhnya milik Anda, dan tata letak yang bertahan setelah halaman dimuat ulang. Tanpa render di bawah, bebas dicat ulang di atas.

Lihat contoh
Ini hidup. Seret celah di antara permukaan, klik ikon pada rel atau pindahkan ke paruh lain, atau ubah ukuran jendela.

Empat cara memulai

Semuanya berjalan di peramban Anda dan seluruh kodenya ada di layar. Mulailah dari yang paling dekat.

Minimal

Rangka terkecil yang benar-benar bekerja. Dua kolom, satu bilah bawah, satu pusat — dan header milik Anda yang mengendalikannya.

import { Panels, Panel } from '@pasquelin/panels'
import '@pasquelin/panels/styles.css'

<Panels<PanelId>>
  <Panel<PanelId> id="files" zone="left" title="Files">
    <FileTree />
  </Panel>

  <Panel<PanelId> id="notes" zone="right" opens={380}>
    <Notes />
  </Panel>

  <Panels.Center>
    <YourApp />
  </Panels.Center>
</Panels>

Tips. Panel yang berbagi zona dan separuh yang sama tampil bergantian; rel yang mengganti. Beri panel kedua separuh secondary agar ia tersusun di bawah yang pertama. Di sini ikon rel juga bisa diseret dari satu paruh ke paruh lain.

Buka Minimal

React Router

Pusatnya adalah outlet. Berpindah halaman hanya mengubah bagian tengah — kolom tetap selebar semula dan panel yang terbuka tetap terbuka.

function Layout() {
  return (
    <Panels<PanelId>>
      <Panel<PanelId> id="sites" zone="left" title="Sites">
        <SiteList />
      </Panel>

      <Panels.Center>
        <Outlet />
      </Panels.Center>
    </Panels>
  )
}

Tips. Deklarasikan panel di rute layout, di atas outlet. Jika dideklarasikan per halaman, panel akan dilepas setiap kali berpindah dan kehilangan isinya.

Buka React Router

Tab dokumen

Pusatnya membawa dokumen di atas Dockview — tab yang bisa diseret dan dibelah — sementara panel tetap di tepi.

import { DockviewCenter } from '@pasquelin/panels/dockview'

<Panels.Center>
  <DockviewCenter
    documents={{ editor: Editor }}
    empty={NothingOpen}
    onReady={setApi}
  />
</Panels.Center>

Tips. Impor dari entri dockview agar bebannya hanya jatuh pada proyek yang memang ingin tab. Panel tidak pernah masuk ke pusat: dokumen punya nama, panel punya ikon.

Buka Tab dokumen

Dicat ulang

Rangka yang sama dengan empat palet. Warna, radius, lebar rel, tinggi header — semuanya properti kustom.

.pnl-root {
  --pnl-chassis: #2e2b26;
  --pnl-panel: #1b1916;
  --pnl-accent: #d99a2b;
  --pnl-radius: 12px;
  --pnl-rail: 60px;
}

Tips. Setel token aksen pada leluhur mana pun, dan rangka akan mengikuti identitas Anda alih-alih memaksakan miliknya. Ingin lebih jauh? Setiap bagian diekspor dan bisa diganti sendiri-sendiri.

Buka Dicat ulang

Seluruh permukaan

Tidak banyak, dan memang itu maksudnya. Enam hal yang perlu diketahui.

Deklarasikan

Panel adalah deskriptor: di mana ia menggantung, apa namanya, dan apa yang digambarnya.

<Panel id="files" zone="left" title="Files" icon={<Icon />}>
  <FileTree />
</Panel>
Kendalikan

Satu hook untuk setiap header, pintasan, atau menu yang perlu memengaruhi panel.

const { reveal, close, toggle, isShown } = usePanels<PanelId>()
Susun ulang

Satu prop, dan pembaca menyeret ikon rel ke paruh lain. Tempat yang dipilihnya diingat bersama sisa tata letaknya.

<Panels<PanelId> draggablePanels>
Kendalikan dari luar React

Buat sendiri store-nya, lalu socket, menu native, atau worker pun bisa membuka panel.

const store = createPanelsStore<PanelId>()
socket.on('alert', () => store.getState().show('alerts'))
Cat ulang

Setiap nilai adalah properti kustom. Setel aksennya, dan rel akan mengikuti identitas Anda.

.pnl-root {
  --pnl-panel: #101418;
  --pnl-accent: #47965c;
  --pnl-radius: 10px;
}
Atau ambil logikanya saja

Komponen dibangun di atas hook yang tidak menggambar apa pun. Gambarlah rangka Anda sendiri di atasnya.

const zone = useZone('left')
useContainerFit(ref)