Split

Basic Usage

Create a split view using the k-split component. Add content to the first pane by placing it inside the component, and add content to the second pane by using the slot="right" attribute.

<k-split style="height: 10rem" class="b">
  <div>Left Pane Content</div>
  <div slot="right">Right Pane Content</div>
</k-split>

Resizing

The split view can be resized by dragging the divider handle. The initial size of the first pane can be set using the --pane_1_size CSS custom property.

<k-split style="--pane_1_size: 30%; height: 10rem" class="b">
  <div>Left Pane Content</div>
  <div slot="right">Right Pane Content</div>
</k-split>

Sizes

Set the CSS Custom Property --pane_1_size to set the initial size of the first pane.

Set the CSS Custom Property --min_pane_size to set the minimum size each pane can be.

Set the CSS Custom Property --handle_width to set the size of the handle (the draggable region between the panes).

<k-split
  style="
    --pane_1_size: 100px;
    --min_pane_size: 100px;
    --handle_width: 20px;
    height: 10rem
  "
  class="b"
>
  <p>left</p>
  <p slot="right">right</p>
</k-split>

Vertical Split

Use the direction="vertical" attribute to create a vertical split where the top and bottom panes are divided by a horizontal handle. Set an explicit height on the component for predictable sizing. The default slot provides the top pane content; use slot="right" for the bottom pane content.

<k-split direction="vertical" style="height: 16rem" class="b">
  <div>Top Pane Content</div>
  <div slot="right">Bottom Pane Content</div>
</k-split>

Stacking

When the screen size is small (mobile) a split panel may not make sense, rather than changing the markup set the stack-width attribute to stack the contents (disable split view) when the component's size is less than the provided size.

<k-split style="height: 10rem" stack-width="1080">
  <div>Left Pane Content</div>
  <div slot="right">Right Pane Content</div>
</k-split>

Persistent State

Add the persistent-id attribute to save and restore the pane size across page refreshes using localStorage. Each split that uses persistence must have a unique persistent-id value.

<k-split persistent-id="my-split" style="height: 10rem" class="b">
  <div>Left Pane Content</div>
  <div slot="right">Right Pane Content</div>
</k-split>

JavaScript Reference

Constructor

Extends ShadowComponent

new Split()

Requirements

• ShadowComponent

Properties

resizing: boolean

Whether the split view is currently being resized. Syncs to resizing attribute.

stacked: boolean

Whether the split view is in stacked mode. Syncs to stacked attribute.

stackWidth: number

The window width threshold for stacking behavior. Syncs to stack-width attribute.

direction: string

The direction of the split. Can be "horizontal" (default) or "vertical". Syncs to direction attribute.

persistentId: string

When set, the pane size is saved to localStorage on resize and restored on initialization. Must be unique per split instance. Syncs to persistent-id attribute.

CSS Custom Properties

--pane_1_size

The size of pane 1 (width in horizontal mode, height in vertical mode). Default is calc((100% - var(--handle_width)) / 2).

--handle_width

The width/height of the draggable divider handle. Default is 0.5rem.

--min_pane_size

The minimum size each pane can be resized to. Default is 6rem.

Methods

setSize(size): void

Sets the size of pane 1 via --pane_1_size. Controls width in horizontal mode and height in vertical mode.

Events

resizestart

Fired when the user starts dragging the divider handle. Detail contains { startSize }.

resize

Fired during dragging of the divider handle. Detail contains { size }.

resizeend

Fired when the user stops dragging the divider handle. Detail contains { size }.