Sizable

Adds a handle to a block element to allow either horizontal or vertical resizing of this element.

Default Component

<sizable class="w-full h-[500px] bg-emerald-500" />

Result

A Vertical Sizable

<div class="flex flex-col w-full h-[500px]">
    <sizable :vertical="true" class="flex-shrink-0 mb-4 h-1/2">
        <div class="h-full bg-emerald-500"></div>
    </sizable>
    <div class="w-full h-full flex-shrink-1 bg-amber-500"></div>
</div>

Result

Using the handle Slot

<sizable class="w-full h-[500px] bg-emerald-500">
    <template #handle><ellipsis-vertical-icon class="size-8 -mx-3" /></template>
</sizable>

Result

Properties

Name	Type	Default	Description
vertical	Boolean		appends the handle to the lower end of the block element and changes height instead of width

Events

Name	Arguments	Description
dragStart		Emitted when a handle is grabbed by mouse or touch
dragStop		Emitted when a handle is released

Slots

Name	Scoped	Description
default		The sizable block element
handle		The handle