One

Two

Three

Installation

pnpm dlx kliping@latest add resizable

Usage

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'
</script>

<template>
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel>One</ResizablePanel>
    <ResizableHandle />
    <ResizablePanel>Two</ResizablePanel>
  </ResizablePanelGroup>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/resizable/resizable-handle.vue components/ui/resizable/resizable-panel.vue components/ui/resizable/resizable-panel-group.vue components/ui/resizable/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<ResizablePanelGroup>
  <ResizablePanel>
    <ResizablePanelGroup>
      <ResizablePanel />
      <ResizableHandle />
    </ResizablePanelGroup>
  </ResizablePanel>
  <ResizableHandle />
</ResizablePanelGroup>

API Reference

ResizableHandle

Prop	Type	Default	Description
id?	string	—	Resize handle id (unique within group); falls back to useId when not provided
hitAreaMargins?	PointerHitAreaMargins	—	Allow this much margin when determining resizable handle hit detection
tabindex?	number	—	Tabindex for the handle
disabled?	boolean	—	Disable drag handle
nonce?	string	—	Will add nonce attribute to the style tag which can be used by Content Security Policy. If omitted, inherits globally from ConfigProvider.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
withHandle?	boolean	—	Shows a visible grip in the middle of the handle; the default slot replaces its icon.

Event	Payload	Description
@dragging	[isDragging: boolean]	Emitted when dragging the handle starts (true) or stops (false).

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"resizable-handle"
[data-orientation]	set at runtime

ResizablePanel

Prop	Type	Default	Description
collapsedSize?	number	—	The size of panel when it is collapsed; interpreted using sizeUnit.
collapsible?	boolean	—	Should panel collapse when resized beyond its minSize. When true, it will be collapsed to collapsedSize.
defaultSize?	number	—	Initial size of panel, interpreted using sizeUnit (percent by default).
id?	string	—	Panel id (unique within group); falls back to useId when not provided
maxSize?	number	—	The maximum allowable size of panel, interpreted using sizeUnit; defaults to 100 (percent).
minSize?	number	—	The minimum allowable size of panel, interpreted using sizeUnit; defaults to 10 (percent).
order?	number	—	The order of panel within group; required for groups with conditionally rendered panels
sizeUnit?	"%" | "px"	—	Unit used for sizing values; % by default, or px for fixed sizing.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@collapse	[]	Emitted when the panel collapses.
@expand	[]	Emitted when the panel expands.
@resize	[size: number, prevSize: number | undefined]	Emitted when the panel size changes: new size and previous size, in percent.

Slot	Props
#default	{ isCollapsed: boolean; isExpanded: boolean; collapse: () => void; expand: () => void; resize: (size: number) => void; }

Data attribute	Value
[data-slot]	"resizable-panel"

ResizablePanelGroup

Prop	Type	Default	Description
id?	string	—	Group id; falls back to useId when not provided.
autoSaveId?	string	—	Unique id used to auto-save group arrangement via localStorage.
direction	Direction$1	—	The group orientation of splitter.
keyboardResizeBy?	number	—	Step size when arrow key was pressed.
storage?	PanelGroupStorage	—	Custom storage API; defaults to localStorage
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@layout	[val: number[]]	Emitted when panel sizes change, as percentages in order.

Slot	Props
#default	{ layout: number[]; }

Data attribute	Value
[data-slot]	"resizable-panel-group"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.