Guides

Organize the basic rules for row/column direction, layoutName/containerName, and nested layouts.

Configure resizable panels with isResizePanel, grow, panelMode, and panelMovementMode.

Fold and unfold panels with containerOpenCloseSubjectMap and double click hook.

Store and restore the grow values adjusted by the user in storage with rememberResize.

Create a dynamic split screen like VS Code with FlexLayoutSplitScreen.

Render page.tsx in a split pane in the Next.js App Router using the URL and restore the split state based on refresh/browser URL.

Create draggable tabs/cards/menu items with FlexLayoutSplitScreenDragBox.

Create a UI that sticks within layout boundaries using stickyMode and FlexLayoutStickyBox.

Synchronize container height to match viewport and content height with FlexLayoutDynamicHeight.

Save/restore scroll position within the split screen using FlexLayoutSplitScreenScrollBox.

Use useFlexLayoutControl to fold and restore the head container of the root layout based on scroll.

Use list paging hooks for sentinel-based infinite/page scrolling.