Ark UI

Getting Started

Start by importing the necessary components from the package:

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

Here is a basic example:

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

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

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

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

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

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

<template>
  <Splitter :size="size">
    <SplitterPanel id="a">A</SplitterPanel>
    <SplitterResizeTrigger id="a:b" />
    <SplitterPanel id="b">B</SplitterPanel>
  </Splitter>
</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, SplitterPanel, SplitterResizeTrigger } from '@ark-ui/react'

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

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

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

Story not available

Handling Events

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

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

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

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

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

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

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

<template>
  <Splitter
    :size="size"
    on-resize-start="() => console.log('onResizeStart')"
    on-resize-end="() => console.log('onResizeEnd')"
  >
    <SplitterPanel id="a">A</SplitterPanel>
    <SplitterResizeTrigger id="a:b" />
    <SplitterPanel id="b">B</SplitterPanel>
  </Splitter>
</template>

Vertical Splitter

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

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

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

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

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

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

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

<template>
  <Splitter :size="size" orientation="vertical">
    <SplitterPanel id="a">A</SplitterPanel>
    <SplitterResizeTrigger id="a:b" />
    <SplitterPanel id="b">B</SplitterPanel>
  </Splitter>
</template>

Conclusion

The Splitter component provides an intuitive way to divide your user interface into multiple resizable sections. With the use of its API, event handlers, and props, you can achieve a high level of control and customization, accommodating a wide range of design and functionality needs.