Shadix.Components.Resizable (shadix v0.0.1)

Copy Markdown View Source

Draggable split panes for a two-panel horizontal or vertical layout.

Unlike the React react-resizable-panels original, this v1 is deliberately simplified: it supports exactly one group with two panels separated by a single handle, with no nested groups and no persistence. The group is a flexbox; each panel sizes itself via flex-basis (a percentage) and the handle is a thin, grabbable divider carrying the ShadixResizable hook.

Dragging is pure client behavior that LiveView's JS commands can't express, so it lives in the hook (assets/ts/resizable.ts): on pointer drag it reads the direction from the parent's data-direction, computes the pointer delta as a fraction of the parent's size, and shifts that fraction from the next panel's flex-basis to the previous panel's (clamped to 0-100%).

Compose them like:

<.resizable id="demo">
  <.resizable_panel>One</.resizable_panel>
  <.resizable_handle />
  <.resizable_panel>Two</.resizable_panel>
</.resizable>

Summary

Functions

resizable(assigns)

Renders a resizable group (the flex container holding two panels and a handle).

resizable_handle(assigns)

Renders the draggable divider between two panels.

resizable_panel(assigns)

Renders a single resizable panel.

Functions

resizable(assigns)

Renders a resizable group (the flex container holding two panels and a handle).

:direction is mirrored onto data-direction so the hook can read it, and it switches the flex axis (flex-col for vertical).

Attributes

  • id (:string) (required)
  • direction (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

resizable_handle(assigns)

Renders the draggable divider between two panels.

Carries phx-hook="ShadixResizable", role="separator", and an aria-orientation derived from :direction. It paints a thin border-colored bar with a centered grip and an enlarged hit area (after: pseudo-element).

Attributes

  • id (:string) - Defaults to nil.
  • direction (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

resizable_panel(assigns)

Renders a single resizable panel.

The panel's size is driven by flex-basis; the hook rewrites it on drag. By default panels start at an even 50% split via the inline style, but callers may override style to set a different initial basis.

Attributes

  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to "flex-basis: 50%;".
  • Global attributes are accepted.

Slots

  • inner_block (required)