Components
Splitter
Splitter, dressed in the paper-and-ink system: panels divide on a hairline and a small paper-seal thumb answers the hand. The parts — Root, Panel, ResizeTrigger, ResizeTriggerIndicator.
#Basic usage
Draft
Notes
<script setup lang="ts">
import { Splitter } from "@bysages/vue";
</script>
<template>
<Splitter.Root :panels="[{ id: 'draft' }, { id: 'notes' }]" :default-size="[40, 60]" class="h-40">
<Splitter.Panel id="draft">Draft</Splitter.Panel>
<Splitter.ResizeTrigger id="draft:notes" aria-label="Resize panels">
<Splitter.ResizeTriggerIndicator />
</Splitter.ResizeTrigger>
<Splitter.Panel id="notes">Notes</Splitter.Panel>
</Splitter.Root>
</template>
#Props
#Panel
| Prop | Type | Default | Description |
|---|---|---|---|
id | PanelId | — |
#ResizeTriggerIndicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#ResizeTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | — | |
id | ResizeTriggerId | — |
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number[] | The initial size of the panels when rendered. Use when you don't need to control the size of the panels. | |
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. | |
keyboardResizeBy | number | The number of pixels to resize the panel by when the keyboard is used. | |
nonce | string | The nonce for the injected splitter cursor stylesheet. | |
orientation | 'horizontal' | 'vertical' | "horizontal" | The orientation of the splitter. Can be horizontal or vertical |
panels | splitter.PanelData[] | The size constraints of the panels. | |
registry | splitter.SplitterRegistry | The splitter registry to use for multi-drag support. | |
size | number[] | The controlled size data of the panels |