Layout component

Layout Splitter

Theme-aware, responsive layout splitter component.

7 props3 slots1 outputsTheme readyResponsive

Interactive playground

Configure Layout Splitter

Change any prop and inspect the server-rendered component immediately.

Live preview

Component code

<LayoutSplitter
  label="Layout Splitter">
  <div data-slot="start">
    <div class="showcase-slot">start slot</div>
  </div>
  <div data-slot="end">
    <div class="showcase-slot">end slot</div>
  </div>
</LayoutSplitter>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Drag or arrow the divider

Two panes with a movable divider. Drag it, or focus it and use the arrow keys; Home and End go to the bounds. The size is resolved in the runtime and written onto the container as a custom property, because a pointermove fires far too often to route through a client function.

Live preview

Component usage.wrn

<LayoutSplitter
  size="40"
  minSize="20">
  <div data-slot="start">
    <div class="showcase-slot">start slot</div>
  </div>
  <div data-slot="end">
    <div class="showcase-slot">end slot</div>
  </div>
</LayoutSplitter>

Advanced

Stacked panes

Vertical orientation splits top from bottom and switches the arrow keys to up and down. Below the small breakpoint both orientations stack, because two panes side by side stop making sense on a phone.

Live preview

Component usage.wrn

<LayoutSplitter
  size="60"
  orientation="vertical"
  minSize="25"
  step="10"
  label="Resize rows">
  <div data-slot="start">
    <div class="showcase-slot">start slot</div>
  </div>
  <div data-slot="end">
    <div class="showcase-slot">end slot</div>
  </div>
</LayoutSplitter>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@sizeChangeFires when the component emits the sizeChange event.

Declarative handlers.wrn

<LayoutSplitter
  @sizeChange='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"LayoutSplitter\"], [data-component=\"LayoutSplitter\"]")

if (component) registerOutputHandler(component, "sizeChange", (payload) => {
  console.log("sizeChange", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`color`	string	`"primary"`	No
`size`	number	`50`	No
`orientation`	string	`"horizontal"`	No
`minSize`	number	`15`	No
`step`	number	`5`	No
`label`	string	`"Resize panels"`	No
`class`	string	`""`	No