Resizable

Two-pane split

Two panes with a divider people drag — an editor and its preview, a list and its detail. Keep a sensible default size; many people never move it.

Basic

Pane A — 40%
drag, ← →, Home/End, dbl-click resets

Pane B1

Pane B2 (nested vertical)

<script setup lang="ts">
import { ref } from "vue";
import { BlessResizable } from "blessing-ui";
const split = ref(40);
</script>

<template>
  <div style="height: 200px; max-width: 720px; border: 1px solid var(--bless-color-border)">
    <BlessResizable v-model="split" :min="20" :max="80">
      <template #a>
        <div style="padding: 16px">
          Pane A — {{ split }}%<br /><small>drag, ← →, Home/End, dbl-click resets</small>
        </div>
      </template>
      <template #b>
        <BlessResizable direction="vertical">
          <template #a><div style="padding: 16px">Pane B1</div></template>
          <template #b><div style="padding: 16px">Pane B2 (nested vertical)</div></template>
        </BlessResizable>
      </template>
    </BlessResizable>
  </div>
</template>

• The divider is a focusable separator: arrows move it by step, Home/End go to min/max, Enter or a double-click resets to half.
• v-model is the first pane's size in %. direction="vertical" stacks the panes. In right-to-left pages the first pane is on the right and dragging follows the pointer.

Usage

import { BlessResizable } from "blessing-ui";

API

Props

Name	Type	Default	Description
direction	"horizontal" | "vertical"	"horizontal"
min	number	10	first pane size in %
max	number	90
step	number	2
label	string	"Resize"
modelValue	number	50	first pane size in %

Events

Name	Payload	Description
update:modelValue	[value: number]

Slots

Name	Scope	Description
a	—
b	—