LayoutDmduskmoonimplemented5 demos

DmSplitter

DmSplitter resizes panels with optional saved sizes and reset controls.

Import@duskmoon-dev/components/dm-splitter

6API sections

16documented props

3behavior scenarios

Key API

sizesdefaultSizespersistencegapcollapseBarOffsetTopmin

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

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

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmSplitter is most often configured through `sizes`, `defaultSizes`, `persistence`, `gap`.

Covered behavior

Renders panels through the local Splitter primitive

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 DmSplitter from its package subpath, then render it with the core props.

Source

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

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

Preview

Navigation

Workspace

Renders panels through the local Splitter primitive

test-backed

DmSplitter scenario from the component test coverage: renders panels through the local splitter primitive.

Source

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

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

Preview

Navigation

Workspace

Persists resized sizes to localStorage and restores them

test-backed

DmSplitter scenario from the component test coverage: persists resized sizes to localstorage and restores them.

Source

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

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

Preview

Navigation

Workspace

Supports reset and panel collapse basics

test-backed

DmSplitter scenario from the component test coverage: supports reset and panel collapse basics.

Source

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

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

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">
  <DmSplitter
  defaultSizes={[180, "1fr"]}
  gap={8}
  style={{ width: "100%" }}
>
  <DmSplitter.Panel>Navigation</DmSplitter.Panel>
  <DmSplitter.Panel>Workspace</DmSplitter.Panel>
</DmSplitter>
</div>

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

API

The API reference below lists every parsed exported type or interface for DmSplitter. Start with `sizes`, `defaultSizes`, `persistence`, `gap` for common usage.

Types: packages/components/src/components/dm-splitter/DmSplitter.types.tsScenarios: packages/components/src/components/dm-splitter/DmSplitter.test.tsx

DmSplitterPropsinterface extends Omit< SplitterProps, "sizes" | "defaultSizes" | "onResize" >

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	children configures DmSplitter.
`sizes`	`SplitterSize[]`	No	sizes configures DmSplitter.
`defaultSizes`	`SplitterSize[]`	No	defaultSizes configures DmSplitter.
`persistence`	`DmSplitterPersistence`	No	persistence configures DmSplitter.
`gap`	`number \| string`	No	gap configures DmSplitter.
`collapseBarOffsetTop`	`string`	No	collapseBarOffsetTop configures DmSplitter.
`min`	`SplitterSize[]`	No	min configures DmSplitter.
`max`	`SplitterSize[]`	No	max configures DmSplitter.
`resettable`	`boolean`	No	resettable configures DmSplitter.
`resetLabel`	`ReactNode`	No	resetLabel configures DmSplitter.
`onResize`	`(sizes: SplitterSize[]) => void`	No	onResize configures DmSplitter.

DmSplitterPersistenceAdapterinterface

Prop	Type	Required	Description
`fetch`	`(`	Yes	fetch configures DmSplitter.
`key`	`string,`	Yes	key configures DmSplitter.
`update`	`(key: string, data: { sizes: SplitterSize[] }) => Promise<unknown>`	Yes	update configures DmSplitter.

DmSplitterPersistenceinterface

Prop	Type	Required	Description
`persistenceKey`	`string`	Yes	persistenceKey configures DmSplitter.
`persistenceType`	`"localStorage" \| DmSplitterPersistenceAdapter`	No	persistenceType configures DmSplitter.

DmSplitterPanelPropstype

SplitterPanelProps

DmSplitterComponenttype

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

DmSplitterElementtype

ReactElement<DmSplitterProps>