Table of Contents
Examples
Basic UsageResizing
JavaScript Reference
ConstructorRequirements
Attributes
Properties
Methods
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.