# Split

Table of Contents

###### Examples

Basic Usage
Resizing

###### JavaScript Reference

Constructor
Requirements
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

### 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 window 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>

Left Pane Content
Right Pane Content

## JavaScript Reference

### Constructor

###### Extends Component

##### `new Split()`

### Requirements

- Component

### Attributes

##### `resizing: boolean`

Indicates whether the split view is currently being resized.

### Methods

##### `setSize(size): void`

Sets the width of the left pane.