React 19 · 8 kB gzipped · keine Abhängigkeiten

Das Gerüst
unter Ihrem Werkzeug.

Icon-Leisten an den Rändern, größenveränderbare Zonen um eine Mitte, die Ihnen gehört, und ein Layout, das ein Neuladen übersteht. Ohne Rendering darunter, frei umfärbbar darüber.

Beispiele ansehen
Live. Ziehen Sie an den Fugen zwischen den Flächen, klicken Sie ein Leistensymbol an oder ziehen Sie es in eine andere Hälfte, ändern Sie die Fenstergröße.

Vier Einstiege

Jedes läuft in Ihrem Browser, und der vollständige Quelltext steht daneben. Fangen Sie beim nächstliegenden an.

Minimal

Das kleinste Gerüst, das funktioniert. Zwei Spalten, ein Band, eine Mitte — und eine eigene Kopfzeile, die es steuert.

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>

Tipp. Panels, die sich Zone und Hälfte teilen, wechseln sich ab; die Leiste schaltet zwischen ihnen um. Geben Sie einem die zweite Hälfte, damit es unter dem ersten steht. Hier lassen sich die Leistensymbole zudem von einer Hälfte in die andere ziehen.

Minimal öffnen

React Router

Die Mitte ist ein Outlet. Navigation ändert nur die Mitte — Spalten behalten ihre Breite, offene Panels bleiben offen.

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

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

Tipp. Deklarieren Sie die Panels in der Layout-Route, oberhalb des Outlets. Pro Seite deklariert, würden sie bei jeder Navigation ausgehängt und verlören ihren Inhalt.

React Router öffnen

Dokument-Tabs

Die Mitte trägt Dokumente über Dockview — Tabs, die sich ziehen und teilen lassen — während die Panels an den Rändern bleiben.

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

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

Tipp. Aus dem dockview-Einstiegspunkt importieren, damit sein Gewicht nur die Projekte trifft, die Tabs wollen. Ein Panel betritt nie die Mitte: ein Dokument hat einen Namen, ein Panel ein Symbol.

Dokument-Tabs öffnen

Umgefärbt

Dasselbe Gerüst unter vier Paletten. Farben, Radius, Leistenbreite, Kopfzeilenhöhe — alles Custom Properties.

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

Tipp. Setzen Sie das Akzent-Token auf einem beliebigen Vorfahren, und das Gerüst übernimmt Ihre Marke, statt seine aufzudrängen. Weiter gehen? Jedes Teil ist exportiert und einzeln austauschbar.

Umgefärbt öffnen

Die gesamte Oberfläche

Es ist wenig, und genau das ist der Punkt. Sechs Dinge, die man wissen muss.

Deklarieren

Ein Panel ist ein Deskriptor: wo es hängt, wie es heißt, was es zeichnet.

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

Ein Hook für jede Kopfzeile, jedes Tastenkürzel und jedes Menü, das auf die Panels wirken soll.

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

Eine Prop, und ein Leistensymbol lässt sich in eine andere Hälfte ziehen. Wo es landet, wird mit dem übrigen Layout gemerkt.

<Panels<PanelId> draggablePanels>
Von außerhalb React steuern

Erzeugen Sie den Store selbst, dann können ein Socket, ein natives Menü oder ein Worker ein Panel öffnen.

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

Jeder Wert ist eine Custom Property. Setzen Sie den Akzent, und die Leisten folgen Ihrer Marke.

.pnl-root {
  --pnl-panel: #101418;
  --pnl-accent: #47965c;
  --pnl-radius: 10px;
}
Oder nur die Logik nehmen

Die Komponenten stehen auf Hooks, die nichts zeichnen. Zeichnen Sie Ihren eigenen Rahmen darauf.

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