Tile UI Vue
Source code

Components

Resizable

Resizable panel group.

Use ResizablePanelGroup to create adjustable split layouts.

Left

Right

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@tile-ui/vue';
 
export default function ResizableDemo() {
	return (
		<ResizablePanelGroup direction="horizontal" style={{ height: '140px', display: 'flex', width: '100%' }}>
			<ResizablePanel style={{ background: 'var(--docs-surface-hover)' }}>

Registry install

pnpm dlx shadcn@latest add @tile-ui/resizable

Package usage

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@tile-ui/vue';
 
<ResizablePanelGroup direction="horizontal">
	<ResizablePanel>Left</ResizablePanel>
	<ResizableHandle />
	<ResizablePanel>Right</ResizablePanel>
</ResizablePanelGroup>

Highlights

  • Horizontal and vertical
  • Panel and handle
  • Persistent layout id

Registry dependencies

Item Purpose
resizable Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

ResizablePanelGroup

Prop Type Default
direction 'horizontal' | 'vertical' ‘horizontal’
id string —
PreviousRadioGroupNextScrollArea