Изменяемые панели

ResizablePanelGroup, ResizablePanel и ResizableHandle оборачивают react-resizable-panels в стилях темы: горизонтальная и вертикальная ориентация, сворачиваемые панели, опциональный значок захвата и управляемые с клавиатуры разделители — стрелки, Home, End, Enter и F6.

Пример

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

Сайдбар

Содержимое

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

Импортируйте компонент из публичной точки входа пакета.

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "denjs-ui";

export function Example() {
  return (
    <ResizablePanelGroup className="h-64">
      <ResizablePanel defaultSize={30} minSize={20}>
        Sidebar
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel minSize={20}>Content</ResizablePanel>
    </ResizablePanelGroup>
  );
}