Splitter

panes with a handle between them, moving a whole column at a time, or a row stacked.

usage

scenario

example

code

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        defaultSize={[40, 60]}
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter :defaultSize="[40, 60]">
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter defaultSize={[40, 60]}>
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div class="CharcellSplitter">
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        orientation="vertical"
        defaultSize={[40, 60]}
        rule
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter orientation="vertical" :defaultSize="[40, 60]" rule>
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter orientation="vertical" defaultSize={[40, 60]} rule>
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div
    class="CharcellSplitter CharcellSplitter--vertical CharcellSplitter--rule"
  >
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        defaultSize={[40, 60]}
        minimumCells={[16, 12]}
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter :defaultSize="[40, 60]" :minimumCells="[16, 12]">
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter defaultSize={[40, 60]} minimumCells={[16, 12]}>
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div class="CharcellSplitter">
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        orientation="vertical"
        defaultSize={[40, 60]}
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter orientation="vertical" :defaultSize="[40, 60]">
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter orientation="vertical" defaultSize={[40, 60]}>
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div class="CharcellSplitter CharcellSplitter--vertical">
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        defaultSize={[40, 60]}
        snap="none"
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter :defaultSize="[40, 60]" snap="none">
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter defaultSize={[40, 60]} snap="none">
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div class="CharcellSplitter">
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        defaultSize={[40, 60]}
        keep="start"
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter :defaultSize="[40, 60]" keep="start">
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter defaultSize={[40, 60]} keep="start">
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div class="CharcellSplitter">
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        defaultSize={[40, 60]}
        keep="end"
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter :defaultSize="[40, 60]" keep="end">
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter defaultSize={[40, 60]} keep="end">
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div class="CharcellSplitter">
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

import { Splitter } from 'charcell/react';

export function SplitterExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <Splitter
        defaultSize={[40, 60]}
        rule
        start={
          <div style={{ padding: '0 1ch' }}>
            <div>kickstand</div>
            <div>melonweed</div>
            <div>the gorge</div>
            <div>corley motors</div>
          </div>
        }
        end={
          <div style={{ padding: '0 1ch' }}>
            <div>moe's shack</div>
            <div>todd's trailer</div>
            <div>the junkyard</div>
            <div>the gas tower</div>
          </div>
        }
      />
    </div>
  );
}

<script setup lang="ts">
import { Splitter } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 10)">
    <Splitter :defaultSize="[40, 60]" rule>
      <template #start>
        <div style="padding: 0 1ch">
          <div>kickstand</div>
          <div>melonweed</div>
          <div>the gorge</div>
          <div>corley motors</div>
        </div>
      </template>
      <template #end>
        <div style="padding: 0 1ch">
          <div>moe's shack</div>
          <div>todd's trailer</div>
          <div>the junkyard</div>
          <div>the gas tower</div>
        </div>
      </template>
    </Splitter>
  </div>
</template>

<script lang="ts">
  import { Splitter } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <Splitter defaultSize={[40, 60]} rule>
    {#snippet start()}
      <div style="padding: 0 1ch;">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    {/snippet}
    {#snippet end()}
      <div style="padding: 0 1ch;">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    {/snippet}
  </Splitter>
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 10)">
  <!-- component: SplitterDriver (behavior not included) -->
  <div class="CharcellSplitter CharcellSplitter--rule">
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>kickstand</div>
        <div>melonweed</div>
        <div>the gorge</div>
        <div>corley motors</div>
      </div>
    </div>
    <button
      class="CharcellSplitter__handle"
      type="button"
      aria-label="resize panels"
    >
      <span class="CharcellSplitter__grip" aria-hidden="true"></span>
    </button>
    <div class="CharcellSplitter__handle-row">
      <div class="CharcellSplitter__handle-start"></div>
      <div class="CharcellSplitter__handle-end"></div>
    </div>
    <div class="CharcellSplitter__panel">
      <div style="padding: 0 1ch">
        <div>moe's shack</div>
        <div>todd's trailer</div>
        <div>the junkyard</div>
        <div>the gas tower</div>
      </div>
    </div>
  </div>
  <!-- /component -->
</div>

as text

at rest

 stops     places
         ⠿

hover

 stops     places
         ⠿

press

 stops     places
         ⠿

focus

 stops     places
         ⠿

props

Splitter

direction'ltr' | 'rtl': The reading direction its keys and placement follow ('rtl' mirrors the arrow keys); the page's, once mounted, when unset.
orientation'horizontal' | 'vertical'= 'horizontal': horizontal lays the panels side by side; vertical stacks them.
defaultSizenumber[]: Initial panel sizes in percent, uncontrolled, e.g. [40, 60].
sizenumber[]: Controlled panel sizes in percent; pair it with onSizeChange.
onSizeChange(size: number[]) => void: Called with the new sizes, in percent, as a boundary moves.
translationsSplitterTranslations: What the split says: its handle's accessible name (handleLabel).
snap'character' | 'none'= 'character': An uncontrolled split snaps its boundaries to whole character columns, or whole rows stacked; 'none' opts out. A controlled split is not snapped.
fillboolean: Takes the container's box: grows in a flex or grid layout, and takes the full height of a block that has one.
keep'start' | 'end': The panel that keeps its cells when the split resizes, the other taking the difference; both keep their proportion by default.
minimumCellsnumber[]: The least cells each panel keeps, start then end (columns side by side, rows stacked), over the split's own least: a drag, an arrow key or Home and End stop there.
ruleboolean: Draws the handle as a line through its cells, the grip in its middle.
join'start' | 'end' | 'both': Runs a ruled handle's ends on to meet the line beyond: a frame's ring when the split sits directly in its body, or else the line in the next cell (┬ ┴, ├ ┤).

SplitterPanel

it takes any attribute of its <div>.

SplitterHandle

labelstring: The handle's accessible name.

it also takes any other attribute of its <button>.

SplitterHandleRow

it takes any attribute of its <div>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

Splitter

start: The first panel.
handleStart: Content on a stacked split's handle row, before the grip: a heading for the panel below.
handleEnd: Content on a stacked split's handle row, after the grip: its controls.
end: The second panel.

SplitterPanel

default

SplitterHandleRow

start: Content at the row's start, before the grip.
end: Content at the row's end, after the grip.