Split

Basic Usage

Create a split view using the k-split component. Add content to the left pane by placing it inside the component, and add content to the right 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 width of the left pane can be set using the --left_width CSS custom property.

<k-split style="--left_width: 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 --left_width to set the initial size.

Set the CSS Custom Property --min_pane_width to set the minimum size each side can be.

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

<k-split
  style="
    --left_width: 100px;
    --min_pane_width: 100px;
    --handle_width: 20px;
    height: 10rem
  "
  class="b"
>
  <p>left</p>
  <p slot="right">right</p>
</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>

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.

CSS Custom Properties

--left_width

The width of the left pane. Default is calc((100% - var(--handle_width)) / 2).

--handle_width

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

--min_pane_width

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

Methods

setSize(size): void

Sets the width of the left pane.

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 }.