Splitter

TxSplitter divides a container into two resizable panes. It exposes a ratio through v-model, supports horizontal and vertical layouts, and keeps pointer and keyboard resizing on the same clamped ratio contract.

Basic Usage

Splitter

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const ratio = ref(0.4)
</script>

<template>
  <div style="width: 520px; height: 240px; border: 1px solid var(--tx-border-color); border-radius: 12px; overflow: hidden;">
    <TxSplitter v-model="ratio" style="width: 100%; height: 100%;">
      <template #a>
        <div style="height: 100%; padding: 12px; color: var(--tx-text-color-secondary);">
          A ({{ ratio.toFixed(2) }})
        </div>
      </template>
      <template #b>
        <div style="height: 100%; padding: 12px; color: var(--tx-text-color-secondary);">
          B
        </div>
      </template>
    </TxSplitter>
  </div>
</template>

API

Props

Prop	Type	Default	Description
`modelValue`	`number`	`0.5`	Current pane A ratio, clamped between `0` and `1` before rendering.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	`horizontal` splits left/right; `vertical` splits top/bottom.
`min`	`number`	`0.1`	Minimum ratio emitted while resizing.
`max`	`number`	`0.9`	Maximum ratio emitted while resizing.
`disabled`	`boolean`	`false`	Disables pointer and keyboard resizing and ends any active drag.
`barSize`	`number`	`10`	Separator size in pixels, with a runtime floor of `6px`.
`snap`	`number`	`0`	Optional ratio interval used to snap emitted values.

Slots

Name	Description
`a`	Content rendered in the first pane.
`b`	Content rendered in the second pane.

Events

Event	Params	Description
`update:modelValue`	`(ratio: number)`	Emitted whenever pointer or keyboard resizing requests a new ratio.
`change`	`(ratio: number)`	Emitted with the same clamped and snapped ratio for change listeners.
`drag-start`	-	Emitted when pointer resizing starts.
`drag-end`	-	Emitted when pointer resizing ends or is cancelled by disabling.