MultiPanel

A front-end component that supports dynamic area segmentation and nesting of multiple panels.

简体中文 | English

Features

- Dynamic Panel Splitting: Support for both horizontal and vertical splitting with draggable splitters.
- Nested Layouts: MultiPanel can be nested within another MultiPanel to create complex layouts.
- Customizable Sizes: Set initial sizes, minimum sizes, and default sizes for each panel.
- Theme Support: Built-in light and dark themes, or provide a custom theme object.
- Event Callbacks: Get notified when panel sizes change.
- Pixel Precision: Control over splitter width and panel minimum sizes in pixels.

Installation

``bash
npm i multi-panel
`

`bash
yarn add multi-panel
`

Basic Usage

$3

`ts
function App() {
return (

Left Panel
Right Panel

);
}
`

$3

`


Top-Left Panel
Bottom-Left Panel


Top-Right Panel
Bottom-Right Panel


`

How It Works

`
┌────────────────────────────────────────┐
│ Initial State (Equal) │
├─────────────┬─────────────┬────────────┤
│ 33% │ 33% │ 33% │
│ Panel 1 │ Panel 2 │ Panel 3 │
└─────────────┴─────────────┴────────────┘
User Drags Splitter ↓
┌────────────────────────────────────────┐
│ After Dragging │
├───────────┬───────────────┬────────────┤
│ 25% │ 45% │ 30% │
│ Panel 1 │ Panel 2 │ Panel 3 │
└───────────┴───────────────┴────────────┘
`

API

$3

| Prop | Type | Default | Description |
| ------------------- | -------------------------------------- | -------------- | ----------------------------------------- |
| direction | 'horizontal' \| 'vertical' | 'horizontal' | Split direction |
| initialSizes | number[] | Equal division | Initial size array (in pixels) |
| minSize | number | 50 | Global minimum size in pixels |
| splitterSize | number | 2 | Splitter width in pixels |
| theme | 'light' \| 'dark' \| MultiPanelTheme | 'light' | Theme configuration |
| onPaneSizesChange | (sizes: number[]) => void | - | Callback function when panel sizes change |
| style | React.CSSProperties | - | Custom container styles |

$3

| Prop | Type | Default | Description |
| ------------- | --------------------- | ------- | ---------------------------------- |
| minSize | number | 10 | Panel minimum size (in percentage) |
| defaultSize | number | - | Panel default size (in percentage) |
| style | React.CSSProperties | - | Custom panel styles |

$3

`typescript
const MultiPanelThemes = {
light: {
splitterColor: "#e8e8e8",
splitterHoverColor: "#d9d9d9",
splitterActiveColor: "#e8e8e8",
} as MultiPanelTheme,
dark: {
splitterColor: "#434343",
splitterHoverColor: "#595959",
splitterActiveColor: "#434343",
} as MultiPanelTheme,
};
``