Usage
The DashboardPanel component provides a flexible panel for dashboard layouts with optional resizing capabilities.
<template>
<UDashboardPanel>
<div class="p-4">
<h2>Panel Content</h2>
<p>This is the main content area.</p>
</div>
</UDashboardPanel>
</template>
Resizable
Enable resizing to allow users to adjust the panel width.
<UDashboardPanel
id="side-panel"
resizable
:min-size="15"
:max-size="40"
:default-size="25"
>
<div class="p-4">
<h2>Resizable Panel</h2>
<p>Drag the resize handle to adjust width.</p>
</div>
</UDashboardPanel>
With Header, Body, and Footer
Organize panel content using the structured slots.
<UDashboardPanel resizable>
<template #header>
<div class="p-4 border-b">
<h2 class="font-bold">Panel Header</h2>
</div>
</template>
<template #body>
<div class="p-4">
<p>Main panel content goes here.</p>
</div>
</template>
<template #footer>
<div class="p-4 border-t">
<UButton label="Action" block />
</div>
</template>
</UDashboardPanel>
Custom Resize Handle
Customize the resize handle appearance.
<UDashboardPanel resizable>
<template #default>
<div class="p-4">
<h2>Content</h2>
</div>
</template>
<template #resize-handle="{ onMouseDown, onTouchStart, onDoubleClick }">
<div
class="w-1 bg-primary cursor-col-resize hover:bg-primary-600"
@mousedown="onMouseDown"
@touchstart="onTouchStart"
@dblclick="onDoubleClick"
/>
</template>
</UDashboardPanel>
Layout Example
Combine multiple panels in a dashboard layout.
<template>
<div class="flex h-screen">
<UDashboardSidebar>
<!-- Sidebar content -->
</UDashboardSidebar>
<main class="flex-1">
<!-- Main content -->
</main>
<UDashboardPanel
id="right-panel"
resizable
:default-size="20"
>
<template #header>
<div class="p-4">
<h3>Details</h3>
</div>
</template>
<template #body>
<div class="p-4">
<!-- Panel content -->
</div>
</template>
</UDashboardPanel>
</div>
</template>
Props
Unique identifier for the panel (used for persistence of size).
Minimum size percentage when resizable.
Maximum size percentage when resizable.
Default size percentage when resizable.
Custom class to apply to the root element.
Override default theme classes.
Slots
Main content slot. If provided, overrides header, body, and footer slots.
Header section of the panel.
Body section of the panel.
Footer section of the panel.
resize-handle
{ onMouseDown, onTouchStart, onDoubleClick }
Customize the resize handle appearance and behavior.