Skip to main content
Docs

DataPanel Component

A flexible panel component that can pin to screen edges, float as a detached window, or slide up as a mobile-style card.

Panel Controls

Full Variant (Traditional Panel)

Card Variant (Mobile Bottom Sheet)

Bottom sheet style with collapsed/expanded states. Click header to expand, drag handle to reposition horizontally.

Current State

Variant: full

Mode: pinned

Edge: right

Expanded: true

Features

Full Variant (Traditional Panel)

  • Pin to edges: Left, right, top, or bottom of the screen
  • Detach mode: Float freely and drag anywhere on screen
  • Resize: Drag edges to resize (single edge when pinned, all edges when detached)
  • Collapse: Click the chevron to collapse to a tab
  • Snap to edge: When detached, drag near an edge to snap back to pinned mode

Card Variant (Mobile Bottom Sheet)

  • Collapsed state: Shows header bar with title, subtitle, and controls
  • Expanded state: Shows full content with scrollable area
  • Click header: Toggle between collapsed and expanded
  • Drag handle (desktop): Drag left/right to reposition the card
  • Touch drag (mobile): Swipe up/down to expand/collapse
  • Resize: When expanded, drag the top edge to resize height

Common Features

  • Persistence: Use the persistKey prop to save state to localStorage
  • Mode menu: Click the three-dot menu to switch modes (full variant)
  • Keyboard accessible: Escape closes the panel, full keyboard navigation

Usage

Full Variant (Default)

<DataPanel
  bind:open={panelOpen}
  bind:mode={panelMode}
  bind:edge={panelEdge}
  bind:expanded={panelExpanded}
  variant="full"
  title="Panel Title"
  subtitle="Optional subtitle"
  actions={[...]}
  persistKey="my-panel"
>
  <p>Panel content goes here</p>
</DataPanel>

Card Variant (Bottom Sheet)

<DataPanel
  bind:open={panelOpen}
  variant="card"
  expanded={false}
  onExpandedChange={(exp) => expanded = exp}
  cardConfig={{
    maxWidth: 600,
    showDragHandle: true,
  }}
  title="Property Details"
  subtitle="123 Main Street"
>
  <p>Card content - visible when expanded</p>
</DataPanel>