React 19 · 8 КБ в gzip · без зависимостей

Каркас
под вашим инструментом.

Полосы значков по краям, изменяемые зоны вокруг центра, который принадлежит вам, и раскладка, переживающая перезагрузку. Внизу — без разметки, наверху — перекрашивается целиком.

Посмотреть примеры
Всё вживую. Потяните за промежутки между поверхностями, нажмите значок на полосе или перетащите его в другую половину, измените размер окна.

Четыре способа начать

Каждый пример работает в вашем браузере, и весь его исходный код перед вами. Начните с ближайшего.

Минимум

Наименьший работающий каркас. Две колонки, нижняя полоса, центр — и ваша собственная шапка, которая всем управляет.

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;
}

Совет. Задайте токен акцента на любом предке, и каркас примет ваш фирменный стиль вместо своего. Нужно дальше? Каждая деталь экспортирована и заменяется отдельно.

Открыть «Перекрашенный»

Вся поверхность

Её немного, и в этом весь смысл. Шесть вещей, которые стоит знать.

Объявить

Панель — это описание: где она висит, как называется и что рисует.

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