Split

Table of Contents

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>
Left Pane Content
Right Pane Content

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>
Left Pane Content
Right Pane Content

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>

left

right

JavaScript Reference

Constructor

Extends Component
new Split()

Requirements

Attributes

resizing: boolean

Indicates whether the split view is currently being resized.

Methods

setSize(size): void

Sets the width of the left pane.