Ark Logo

Splitter

A component that divides your interface into resizable sections

A
B

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:

<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:

<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.Context v-slot="splitter">
      <Splitter.Panel id="a">
        <button @click="splitter.setSize('a', 10)">Set A to 10%</button>
      </Splitter.Panel>
      <Splitter.ResizeTrigger id="a:b" />
      <Splitter.Panel id="b">
        <button @click="splitter.setSize('b', 10)">Set B to 10%</button>
      </Splitter.Panel>
    </Splitter.Context>
  </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:

<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="(details) => console.log('onSizeChange', 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:

<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

PropDefaultType
asChildfalse
boolean

defaultSize
PanelSizeData[]

The initial size of the panels when it is first rendered. Use this when you do not need to control the state of the carousel.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string resizeTrigger(id: string): string label(id: string): string panel(id: string | number): string }>

The ids of the elements in the splitter. Useful for composition.

orientation
'horizontal' | 'vertical'

The orientation of the splitter. Can be `horizontal` or `vertical`

size
PanelSizeData[]

The size data of the panels

EmitEvent
sizeChange
[details: SizeChangeDetails]

Function called when the splitter is resized.

sizeChangeEnd
[details: SizeChangeDetails]

Function called when the splitter resize ends.

Data AttributeValue
[data-scope]splitter
[data-part]root
[data-orientation]The orientation of the splitter

Panel

PropDefaultType
id
PanelId

asChildfalse
boolean

snapSize
number

Data AttributeValue
[data-scope]splitter
[data-part]panel
[data-orientation]The orientation of the panel

ResizeTrigger

PropDefaultType
id
type ONLY_FOR_FORMAT = | `${string}:${string}` | `${string}:${number}` | `${number}:${string}` | `${number}:${number}`

asChildfalse
boolean

disabled
boolean

step
number

Data AttributeValue
[data-scope]splitter
[data-part]resize-trigger
[data-orientation]The orientation of the resizetrigger
[data-focus]Present when focused
[data-disabled]Present when disabled

Accessibility

Complies with the Window Splitter WAI-ARIA design pattern.