Макет

Dock-макет

DockLayout размещает шапку, узкую панель навигации, две боковые панели, нижнюю панель и статус-бар вокруг областей с изменяемым размером, сворачиванием и разворачиванием на весь экран — как в VS Code. Семейство компонентов DockFrame, DockHeader, DockRail, DockStatusBar и DockDrawer собирает конкретные части раскладки; изменение размеров панелей обрабатывается внутри компонента, а видимость слотов и развёрнутая панель остаются под управлением потребителя.

Пример

Интерактивный пример

DenJS Workspace

Рабочая область

Обзор пространства

Управляйте проектами, активностью команды и статусом деплоев из одного места.

Активные проекты

Успешные сборки

98.4%

Открытые задачи

Использование

Импортируйте layout из публичного входа пакета и передайте содержимое вместе с необходимыми настройками компоновки или навигации.

"use client";

import { useRef, useState } from "react";
import {
  DockFrame,
  DockHeader,
  DockLayout,
  type DockLayoutHandle,
  type DockMaximizedSlot,
  DockRail,
  DockStatusBar,
} from "denjs-ui";
import { Home, Settings } from "lucide-react";

const sections = [
  {
    items: [
      { label: "Home", href: "/", icon: <Home aria-hidden="true" />, current: true },
      { label: "Settings", href: "/settings", icon: <Settings aria-hidden="true" /> },
    ],
  },
];

export function Example() {
  const [primaryOpen, setPrimaryOpen] = useState(true);
  const [panelOpen, setPanelOpen] = useState(true);
  const [maximizedSlot, setMaximizedSlot] = useState<DockMaximizedSlot>(null);
  const dockLayoutRef = useRef<DockLayoutHandle>(null);

  return (
    <DockLayout
      ref={dockLayoutRef}
      header={<DockHeader brand={<span>Workspace</span>} />}
      rail={<DockRail sections={sections} title="Workspace" />}
      maximizedSlot={maximizedSlot}
      primarySidebarOpen={primaryOpen}
      panelOpen={panelOpen}
      onPrimarySidebarVisibilityChange={setPrimaryOpen}
      onPanelVisibilityChange={setPanelOpen}
      onSashDoubleClick={(slot) =>
        setMaximizedSlot((current) => (current === slot ? null : slot))
      }
      primarySidebar={
        <DockFrame
          title="Explorer"
          onClose={() => {
            setPrimaryOpen(false);
            setMaximizedSlot((current) =>
              current === "primarySidebar" ? null : current,
            );
          }}
        >
          <ProjectTree />
        </DockFrame>
      }
      panel={
        <DockFrame
          title="Console"
          onClose={() => {
            setPanelOpen(false);
            setMaximizedSlot((current) =>
              current === "panel" ? null : current,
            );
          }}
        >
          <Console />
        </DockFrame>
      }
      statusBar={<DockStatusBar start={<BranchStatus />} />}
    >
      <DockFrame title="Workspace">
        <Editor />
      </DockFrame>
    </DockLayout>
  );
}