Split Panel

Split two content areas and drag the divider to resize them.

<sy-split-panel>Installation guide Basic usage

Live preview

Interact with the component to see results here.

DirectionFirst region percentageMinimum region percentage

Disable resizingHide divider

View code

HTML

<sy-split-panel
  type="horizontal"
  ratio="40"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>List</strong>
    <p>Try resizing.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>Details</strong>
    <p>You can also adjust the divider with the keyboard.</p>
  </div>
</sy-split-panel>

Usage guide

Use to view and resize two regions at once, such as an explorer and editor. Layout is better for a fixed sidebar.

Place two regions
Use the left and right slots, including for vertical splits. First ensure the parent has sufficient height.
Set proportions and limits
ratio is the percentage occupied by the left or top region. Set the minimum percentage on both sides with minRatio.
Connect resize results
Update the app's size state from the change event matching the direction.

Examples

Left and right split

Drag the divider or adjust it with the left and right arrow keys.

View code

HTML

<sy-split-panel
  ratio="40"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>List</strong>
    <p>Try resizing.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>Details</strong>
    <p>You can also adjust the divider with the keyboard.</p>
  </div>
</sy-split-panel>

Top and bottom split

Use the up and down arrow keys to adjust the top region's percentage.

View code

HTML

<sy-split-panel
  type="vertical"
  ratio="45"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>List</strong>
    <p>Try resizing.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>Details</strong>
    <p>You can also adjust the divider with the keyboard.</p>
  </div>
</sy-split-panel>

Reserve minimum space

Keep each region at or above 30%.

View code

HTML

<sy-split-panel
  ratio="50"
  minratio="30"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>List</strong>
    <p>Try resizing.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>Details</strong>
    <p>You can also adjust the divider with the keyboard.</p>
  </div>
</sy-split-panel>

Fixed proportions

disabled prevents resizing; hideDivider hides the divider.

View code

HTML

<sy-split-panel
  ratio="40"
  disabled
  hidedivider
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>List</strong>
    <p>Try resizing.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>Details</strong>
    <p>You can also adjust the divider with the keyboard.</p>
  </div>
</sy-split-panel>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-split-panel
  type="horizontal"
  ratio="40"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>List</strong>
    <p>Try resizing.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>Details</strong>
    <p>You can also adjust the divider with the keyboard.</p>
  </div>
</sy-split-panel>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["horizontalChanged", "verticalChanged"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Hidden divider

Use a 60:40 split while hiding the visual divider.

View code

HTML

<sy-split-panel
  type="horizontal"
  ratio="60"
  minratio="20"
  hidedivider
  style="height:260px;width:100%"
  id="supplement-1"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>List</strong>
    <p>Try resizing.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>Details</strong>
    <p>You can also adjust the divider with the keyboard.</p>
  </div>
</sy-split-panel>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "ratio": 60,
    "hideDivider": true
  });
</script>

Feature examples

Choose a feature from 8 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.