React 19 · 8 kB compressi · nessuna dipendenza

Il telaio
sotto il tuo strumento.

Barre di icone sui bordi, zone ridimensionabili attorno a un centro che è tuo, e una disposizione che sopravvive a un ricaricamento. Senza rendering sotto, ridipingibile sopra.

Guarda gli esempi
È dal vivo. Trascina gli spazi tra le superfici, premi un’icona della barra o spostala in un’altra metà, ridimensiona la finestra.

Quattro modi per cominciare

Ognuno gira nel tuo browser e tutto il suo codice è sullo schermo. Parti dal più vicino a ciò che ti serve.

Minimo

Il telaio più piccolo che funzioni. Due colonne, una fascia, un centro — e un’intestazione tua che lo governa.

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>

Consiglio. I pannelli che condividono zona e metà si alternano; la barra passa dall’uno all’altro. Dai al secondo la metà secondary e si sistemerà sotto il primo. Qui le icone della barra si trascinano anche da una metà all’altra.

Apri Minimo

React Router

Il centro è un outlet. Navigare cambia solo la parte centrale: le colonne mantengono la larghezza e i pannelli aperti restano aperti.

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

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

Consiglio. Dichiara i pannelli nella rotta di layout, sopra l’outlet. Dichiarati per pagina verrebbero smontati a ogni navigazione, perdendo quello che tenevano.

Apri React Router

Schede di documenti

Il centro porta i documenti su Dockview — schede che si trascinano e si dividono — mentre i pannelli restano sui bordi.

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

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

Consiglio. Importalo dal punto d’ingresso dockview: così il suo peso ricade solo sui progetti che vogliono le schede. Un pannello non entra mai nel centro: un documento ha un nome, un pannello un’icona.

Apri Schede di documenti

Ridipinto

Lo stesso telaio sotto quattro tavolozze. Colori, raggio, larghezza della barra, altezza dell’intestazione — tutte proprietà personalizzate.

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

Consiglio. Imposta il token d’accento su un antenato qualsiasi e il telaio erediterà la tua identità invece di imporre la sua. Vuoi andare oltre? Ogni pezzo è esportato e sostituibile da solo.

Apri Ridipinto

Tutta la superficie

Non è molta, ed è proprio questo il punto. Sei cose da sapere.

Dichiarare

Un pannello è un descrittore: dove si aggancia, come si chiama, cosa disegna.

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

Un solo hook per ogni intestazione, scorciatoia o menu che debba agire sui pannelli.

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

Una prop, e chi legge trascina un’icona della barra in un’altra metà. Il posto scelto viene ricordato con il resto della disposizione.

<Panels<PanelId> draggablePanels>
Governare da fuori React

Crea tu lo store e un socket, un menu nativo o un worker potranno aprire un pannello.

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

Ogni valore è una proprietà personalizzata. Imposta l’accento e le barre seguiranno la tua identità.

.pnl-root {
  --pnl-panel: #101418;
  --pnl-accent: #47965c;
  --pnl-radius: 10px;
}
Oppure prendere solo la logica

I componenti poggiano su hook che non disegnano nulla. Disegnaci sopra il tuo telaio.

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