C&C Docs
Log in

cnc-floater

A movable, optionally collapsible and resizable panel. Its surface uses cnc-overlay, placing it in the browser top layer above application content.

Quick start

Bind $open and give the panel a heading. Everything else — dragging, collapsing, resizing — is opt-in, so a floater with no flags is a plain movable box with a close button. 

<div x-data="{ shown: false }">
  <cnc-button @press="shown = true">Open panel</cnc-button>

  <cnc-floater
    heading="Quick start"
    handle
    collapsible
    resizable
    $open="shown"
    @close="shown = false"
  >
    <div class="p-4">Panel content</div>
  </cnc-floater>
</div>

Basic markup

<cnc-floater
  heading="Inspector"
  $open="showInspector"
  handle
  collapsible
  resizable
  persistent
  snap
  class="min-w-60 min-h-36"
  x="96"
  y="128"
  style="width: 24rem; height: 18rem"
  @close="showInspector = false"
>
  ...
</cnc-floater>

Usage guidance

A floater is for content the user wants to keep visible WHILE working elsewhere — an inspector, a chat panel, a running log. That is the whole reason to accept its costs: it is non-modal, it covers application content, and the user has to manage its position themselves. When the content demands attention before anything else can continue, that is cnc-modal; when it is anchored to a control, cnc-drop.

Set persistent whenever the panel is long-lived. Position and size are otherwise forgotten on reload, and a panel the user has deliberately placed reappearing in the corner is a worse first impression than never having moved. Keep constrainToViewport on unless you have a reason not to — it is what stops a panel being dragged somewhere it cannot be dragged back from.

Use beforeclose rather than close when a dismissal needs confirming. It is cancelable; close is the notification that it already happened.

← Back to Widgets