Splitter | Ark UI

Preview Component

Please note, the API of this component is currently in a preview phase and is subject to change.

Anatomy

To set up the splitter correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Splitter component in your project. Let’s take a look at the most basic example:

import { Splitter } from '@ark-ui/react'

const Basic = () => (
  <Splitter.Root
    defaultSize={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
)

import { Splitter } from '@ark-ui/solid'

const Basic = () => (
  <Splitter.Root
    size={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Splitter } from '@ark-ui/vue'

const size = ref([
  { id: 'a', size: 50 },
  { id: 'b', size: 50 },
])
</script>

<template>
  <Splitter.Root :size="size">
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
</template>

Using Render Props

The Splitter component allows you to pass a function as a child to gain direct access to its API. This provides more control and allows you to modify the size of the panels programmatically:

import { Splitter } from '@ark-ui/react'

const RenderProp = () => (
  <Splitter.Root
    defaultSize={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    {(api) => (
      <>
        <Splitter.Panel id="a">
          <button onClick={() => api.setSize('a', 10)}>Set to 10%</button>
        </Splitter.Panel>
        <Splitter.ResizeTrigger id="a:b" />
        <Splitter.Panel id="b">
          <button onClick={() => api.setSize('b', 10)}>Set to 10%</button>
        </Splitter.Panel>
      </>
    )}
  </Splitter.Root>
)

import { Splitter } from '@ark-ui/solid'

const RenderProp = () => (
  <Splitter.Root
    size={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    {(api) => (
      <>
        <Splitter.Panel id="a">
          <button onClick={() => api().setSize('a', 10)}>Set to 10%</button>
        </Splitter.Panel>
        <Splitter.ResizeTrigger id="a:b" />
        <Splitter.Panel id="b">
          <button onClick={() => api().setSize('b', 10)}>Set to 10%</button>
        </Splitter.Panel>
      </>
    )}
  </Splitter.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Splitter } from '@ark-ui/vue'

const size = ref([
  { id: 'a', size: 50 },
  { id: 'b', size: 50 },
])
</script>

<template>
  <Splitter.Root :size="size" v-slot="api">
    <Splitter.Panel id="a">
      <button @click="api.setSize('a', 10)">Set A to 10%</button>
    </Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">
      <button @click="api.setSize('b', 10)">Set B to 10%</button>
    </Splitter.Panel>
  </Splitter.Root>
</template>

Handling Events

Splitter also provides onSizeChangeStart and onSizeChangeEnd events which can be useful to perform some actions during the start and end of the resizing process:

import { Splitter } from '@ark-ui/react'

const Events = () => (
  <Splitter.Root
    defaultSize={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
    onSizeChangeStart={(details) => console.log('onSizeChangeStart', details)}
    onSizeChangeEnd={(details) => console.log('onSizeChangeEnd', details)}
  >
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
)

import { Splitter } from '@ark-ui/solid'

const Events = () => (
  <Splitter.Root
    size={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
    onSizeChangeStart={(details) => console.log('onSizeChangeStart', details)}
    onSizeChangeEnd={(details) => console.log('onSizeChangeEnd', details)}
  >
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Splitter } from '@ark-ui/vue'

const size = ref([
  { id: 'a', size: 50 },
  { id: 'b', size: 50 },
])
</script>

<template>
  <Splitter.Root
    :size="size"
    @size-change-start="(details) => console.log('onSizeChangeStart', details)"
    @size-change-end="(details) => console.log('onSizeChangeEnd', details)"
  >
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
</template>

Vertical Splitter

By default, the Splitter component is horizontal. If you need a vertical splitter, use the orientation prop:

import { Splitter } from '@ark-ui/react'

const Vertical = () => (
  <Splitter.Root
    orientation="vertical"
    defaultSize={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
)

import { Splitter } from '@ark-ui/solid'

const Vertical = () => (
  <Splitter.Root
    orientation="vertical"
    size={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Splitter } from '@ark-ui/vue'

const size = ref([
  { id: 'a', size: 50 },
  { id: 'b', size: 50 },
])
</script>

<template>
  <Splitter.Root :size="size" orientation="vertical">
    <Splitter.Panel id="a">A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">B</Splitter.Panel>
  </Splitter.Root>
</template>

API Reference

Root

Prop	Type	Default
`asChild`	`boolean`
`defaultSize`	`PanelSizeData[]`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`id`	`string`
`ids`	`Partial<{ root: string resizeTrigger(id: string): string label(id: string): string panel(id: string \| number): string }>`
`onSizeChange`	`(details: SizeChangeDetails) => void`
`onSizeChangeEnd`	`(details: SizeChangeDetails) => void`
`onSizeChangeStart`	`(details: SizeChangeDetails) => void`
`orientation`	`'horizontal' \| 'vertical'`
`size`	`PanelSizeData[]`

Panel

Prop	Type	Default
`id`	`PanelId`
`asChild`	`boolean`
`snapSize`	`number`

ResizeTrigger

Prop	Type	Default
`id`	type ONLY_FOR_FORMAT = \| `${string}:${string}` \| `${string}:${number}` \| `${number}:${string}` \| `${number}:${number}`
`asChild`	`boolean`
`disabled`	`boolean`
`step`	`number`