React 19 · gzip 後 8 kB · 依存なし

あなたのツールを
支える骨組み。

両端にアイコンレール、中央はあなたのもの、その周囲にサイズ変更できるゾーン。リロードしてもレイアウトは残ります。土台はヘッドレス、見た目は自由に塗り替えられます。

実際に動いています。面と面のすき間をドラッグしたり、レールのアイコンを押したり別の半分へ動かしたり、ウィンドウの大きさを変えてみてください。

4 つの入り口

どれもブラウザで動き、ソースはすべて画面上にあります。目的に近いものから始めてください。

最小構成

動く最小の骨組み。2 列、下段の帯、中央領域 — そしてそれを操作するあなた自身のヘッダー。

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>

ヒント。 同じゾーンと同じ半分を共有するパネルは交代で表示され、レールが切り替えます。二つ目に secondary の半分を与えれば、一つ目の下に重なって並びます。ここではレールのアイコンを別の半分へドラッグすることもできます。

最小構成を開く

React Router

中央はアウトレットです。移動しても変わるのは中央だけ — 列は幅を保ち、開いているパネルは開いたままです。

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

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

ヒント。 パネルはレイアウトルート側、アウトレットより上で宣言してください。ページごとに宣言すると移動のたびにアンマウントされ、保持していた状態を失います。

React Router を開く

ドキュメントタブ

中央は Dockview でドキュメントを扱います — ドラッグや分割ができるタブ — 一方でパネルは端に留まります。

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

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

ヒント。 dockview エントリーポイントから読み込めば、その重さはタブを使うプロジェクトにしかかかりません。パネルが中央に入ることはありません。ドキュメントには名前が、パネルにはアイコンがあります。

ドキュメントタブを開く

塗り替え

同じ骨組みに 4 つのパレット。色、角丸、レール幅、ヘッダーの高さ — すべてカスタムプロパティです。

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

ヒント。 任意の祖先要素にアクセントトークンを設定すれば、骨組みは自分の色を押しつけず、あなたのブランドを受け継ぎます。さらに先へ進みたい場合、各部品は個別に差し替えられます。

塗り替えを開く

API のすべて

多くはありません。それが狙いです。知るべきことは 6 つ。

宣言する: パネルは記述子です。どこに掛かり、何という名前で、何を描くか。

<Panel id="files" zone="left" title="Files" icon={<Icon />}> <FileTree /> </Panel>
操作する: パネルを動かしたいヘッダー、ショートカット、メニューのための単一のフック。

const { reveal, close, toggle, isShown } = usePanels<PanelId>()
並べ替える: プロパティ 1 つで、レールのアイコンを別の半分へドラッグできます。置いた場所はほかのレイアウトとともに記憶されます。

<Panels<PanelId> draggablePanels>
React の外から操作する: ストアを自分で作れば、ソケットやネイティブメニュー、ワーカーからパネルを開けます。

const store = createPanelsStore<PanelId>() socket.on('alert', () => store.getState().show('alerts'))
塗り替える: すべての値がカスタムプロパティ。アクセントを決めればレールが従います。

.pnl-root { --pnl-panel: #101418; --pnl-accent: #47965c; --pnl-radius: 10px; }
ロジックだけ使う: コンポーネントは何も描かないフックの上に建っています。その上に自分の枠を描いてください。

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