Layoutduskmoonimplemented7 demos

Splitter

Splitter creates resizable panels for workspace-style layouts.

Import@duskmoon-dev/components/splitter

7API sections

16documented props

5behavior scenarios

Key API

layoutsizesdefaultSizesonResizedefaultSizesize

Usage

When to use

Use it to build predictable page, toolbar, panel, or grid structure.
Keep layout primitives responsible for geometry and let child components own behavior.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Composition primitive

Documents spacing, responsive behavior, and nested regions used to build larger screens.

Stable geometry

Examples keep predictable dimensions so the surrounding UI does not jump while content changes.

Primary API surface

Splitter is most often configured through `layout`, `sizes`, `defaultSizes`, `onResize`.

Covered behavior

Renders horizontal panels with default sizes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Navigation

Workspace

Basic usage

authored

Import the component stylesheet and Splitter from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Splitter } from "@duskmoon-dev/components/splitter";

export function Example() {
  return (<Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>);
}

Preview

Navigation

Workspace

Renders horizontal panels with default sizes

test-backed

Splitter scenario from the component test coverage: renders horizontal panels with default sizes.

Source

import "@duskmoon-dev/components/styles.css";
import { Splitter } from "@duskmoon-dev/components/splitter";

export function SplitterRendersHorizontalPanelsWithDemo() {
  return (<Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>);
}

Preview

Navigation

Workspace

Supports vertical layout and controlled sizes

test-backed

Splitter scenario from the component test coverage: supports vertical layout and controlled sizes.

Source

import "@duskmoon-dev/components/styles.css";
import { Splitter } from "@duskmoon-dev/components/splitter";

export function SplitterSupportsVerticalLayoutAndDemo() {
  return (<Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>);
}

Preview

Navigation

Workspace

Resizes uncontrolled numeric panels

test-backed

Splitter scenario from the component test coverage: resizes uncontrolled numeric panels.

Source

import "@duskmoon-dev/components/styles.css";
import { Splitter } from "@duskmoon-dev/components/splitter";

export function SplitterResizesUncontrolledNumericPanelsDemo() {
  return (<Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>);
}

Preview

Navigation

Workspace

Collapses and expands collapsible panels

test-backed

Splitter scenario from the component test coverage: collapses and expands collapsible panels.

Source

import "@duskmoon-dev/components/styles.css";
import { Splitter } from "@duskmoon-dev/components/splitter";

export function SplitterCollapsesAndExpandsCollapsibleDemo() {
  return (<Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>);
}

Preview

Navigation

Workspace

Disables handle when adjacent panel is not resizable

test-backed

Splitter scenario from the component test coverage: disables handle when adjacent panel is not resizable.

Source

import "@duskmoon-dev/components/styles.css";
import { Splitter } from "@duskmoon-dev/components/splitter";

export function SplitterDisablesHandleWhenAdjacentDemo() {
  return (<Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>);
}

Preview

Navigation

Workspace

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>
</div>

<div data-theme="moonlight">
  <Splitter
  defaultSizes={[180, "1fr"]}
  style={{ width: "100%" }}
>
  <Splitter.Panel>Navigation</Splitter.Panel>
  <Splitter.Panel>Workspace</Splitter.Panel>
</Splitter>
</div>

API

The API reference below lists every parsed exported type or interface for Splitter. Start with `layout`, `sizes`, `defaultSizes`, `onResize` for common usage.

Types: packages/components/src/components/splitter/Splitter.types.tsScenarios: packages/components/src/components/splitter/Splitter.test.tsx

SplitterPropsinterface extends Omit<ComponentProps<"div">, "onResize">

Prop	Type	Required	Description
`layout`	`SplitterLayout`	No	layout configures Splitter.
`sizes`	`SplitterSize[]`	No	sizes configures Splitter.
`defaultSizes`	`SplitterSize[]`	No	defaultSizes configures Splitter.
`onResize`	`(sizes: SplitterSize[], info: SplitterResizeInfo) => void`	No	onResize configures Splitter.

SplitterResizeInfointerface

Prop	Type	Required	Description
`sizes`	`SplitterSize[]`	Yes	sizes configures Splitter.

SplitterPanelPropsinterface extends Omit< ComponentProps<"div">, "children" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Splitter.
`defaultSize`	`SplitterSize`	No	defaultSize configures Splitter.
`size`	`SplitterSize`	No	size configures Splitter.
`min`	`SplitterSize`	No	min configures Splitter.
`max`	`SplitterSize`	No	max configures Splitter.
`collapsible`	`boolean`	No	collapsible configures Splitter.
`collapsed`	`boolean`	No	collapsed configures Splitter.
`defaultCollapsed`	`boolean`	No	defaultCollapsed configures Splitter.
`resizable`	`boolean`	No	resizable configures Splitter.
`onCollapse`	`(collapsed: boolean) => void`	No	onCollapse configures Splitter.
`style`	`CSSProperties`	No	style configures Splitter.

SplitterLayouttype

"horizontal" | "vertical"

SplitterSizetype

number | string

SplitterPanelComponenttype

ForwardRefExoticComponent< SplitterPanelProps & RefAttributes<HTMLDivElement> >

SplitterComponenttype

ForwardRefExoticComponent< SplitterProps & RefAttributes<HTMLDivElement> > & { Panel: SplitterPanelComponent