React 19 · 8 kB comprimido · sin dependencias

El chasis
bajo tu herramienta.

Raíles de iconos en los bordes, zonas redimensionables alrededor de un centro que es tuyo, y una disposición que sobrevive a una recarga. Sin renderizado por debajo, repintable por encima.

Ver los ejemplos
En vivo. Arrastra las separaciones entre superficies, pulsa un icono del raíl o llévalo a otra mitad, cambia el tamaño de la ventana.

Cuatro formas de empezar

Cada uno se ejecuta en tu navegador y su código completo está a la vista. Empieza por el más cercano.

Mínimo

El chasis más pequeño que funciona. Dos columnas, una banda, un centro — y una cabecera tuya que lo gobierna.

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>

Consejo. Los paneles que comparten zona y mitad se turnan; el raíl alterna entre ellos. Dale a uno la mitad secundaria para apilarlo bajo el primero. Aquí, además, los iconos del raíl se arrastran de una mitad a otra.

Abrir Mínimo

React Router

El centro es una salida de ruta. Navegar cambia el medio y nada más: las columnas mantienen su ancho y los paneles abiertos siguen abiertos.

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

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

Consejo. Declara los paneles en la ruta de layout, por encima de la salida. Declarados por página, se desmontarían en cada navegación y perderían lo que contenían.

Abrir React Router

Pestañas de documentos

El centro lleva documentos sobre Dockview — pestañas que se arrastran y se dividen — mientras los paneles permanecen en los bordes.

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

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

Consejo. Impórtalo desde el punto de entrada dockview: así su peso solo recae en los proyectos que quieren pestañas. Un panel nunca entra en el centro: un documento tiene nombre, un panel tiene icono.

Abrir Pestañas de documentos

Repintado

El mismo chasis bajo cuatro paletas. Colores, radio, ancho del raíl, altura de cabecera — todo son propiedades personalizadas.

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

Consejo. Define el token de acento en cualquier ancestro y el chasis heredará tu marca en lugar de imponer la suya. ¿Necesitas ir más lejos? Cada pieza está exportada y se puede sustituir por separado.

Abrir Repintado

Toda la superficie

No hay mucha, y esa es la idea. Seis cosas que saber.

Declarar

Un panel es un descriptor: dónde se cuelga, cómo se llama y qué dibuja.

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

Un único hook para cualquier cabecera, atajo o menú que deba actuar sobre los paneles.

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

Una prop, y quien lee arrastra un icono del raíl a otra mitad. El sitio que elige se recuerda con el resto de la disposición.

<Panels<PanelId> draggablePanels>
Gobernar fuera de React

Crea tú el store y un socket, un menú nativo o un worker podrán abrir un panel.

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

Cada valor es una propiedad personalizada. Define el acento y los raíles seguirán tu marca.

.pnl-root {
  --pnl-panel: #101418;
  --pnl-accent: #47965c;
  --pnl-radius: 10px;
}
O quedarte solo con la lógica

Los componentes se apoyan en hooks que no dibujan nada. Dibuja tu propio marco sobre ellos.

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