React 19 · gzip 8 kB · 의존성 없음

당신의 도구
아래 골격.

가장자리에는 아이콘 레일, 가운데는 온전히 당신의 영역, 그 둘레에는 크기를 조절할 수 있는 구역. 새로고침해도 배치는 그대로 남습니다. 아래는 헤드리스, 위는 마음대로 다시 칠할 수 있습니다.

예제 보기

실제로 동작합니다. 면 사이의 여백을 끌어보거나, 레일 아이콘을 누르거나 다른 절반으로 옮겨보거나, 창 크기를 바꿔보세요.

시작하는 네 가지 길

모두 브라우저에서 바로 동작하며 전체 소스가 화면에 있습니다. 가장 가까운 것부터 시작하세요.

최소 구성

동작하는 가장 작은 골격. 두 개의 열, 아래 띠, 중앙 영역 — 그리고 이를 제어하는 당신의 헤더.

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 진입점에서 가져오면 그 무게는 탭이 필요한 프로젝트에만 실립니다. 패널은 결코 중앙에 들어가지 않습니다. 문서에는 이름이, 패널에는 아이콘이 있습니다.

문서 탭 열기

새로 칠하기

같은 골격에 네 가지 팔레트. 색, 모서리, 레일 너비, 헤더 높이 — 모두 커스텀 속성입니다.

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

팁. 아무 상위 요소에나 강조 토큰을 지정하면 골격이 자기 색을 강요하지 않고 당신의 브랜드를 따릅니다. 더 나아가고 싶다면 모든 조각이 개별로 교체 가능합니다.

새로 칠하기 열기

API 전부

많지 않습니다. 그게 핵심입니다. 알아야 할 것은 여섯 가지입니다.

선언하기: 패널은 서술자입니다. 어디에 걸리고, 무엇이라 불리며, 무엇을 그리는지.

<Panel id="files" zone="left" title="Files" icon={<Icon />}> <FileTree /> </Panel>
제어하기: 패널을 다뤄야 하는 모든 헤더, 단축키, 메뉴를 위한 하나의 훅.

const { reveal, close, toggle, isShown } = usePanels<PanelId>()
재배치하기: 프로퍼티 하나면 레일 아이콘을 다른 절반으로 끌어다 놓을 수 있습니다. 놓아둔 자리는 나머지 배치와 함께 기억됩니다.

<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)