[ @sdxc/ui/mixins ]
resizeHandle
Pointer-driven resize for one handle of a Resizable panel group.
import { resizeHandle } from "@sdxc/ui/mixins";Usage
Adds pointer-driven resizing to one handle of a Resizable panel group,
sharing session with every other handle in the group; unmounting only
cancels a handle's own in-progress drag, leaving a sibling's drag alone.
Signature
resizeHandle(axis: ResizableAxis, session: ResizeSession): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
axis | "horizontal" | "vertical" | Axis the enclosing group resizes along. |
session | ResizeSession | Resize session shared by every handle in the same panel group. |
Examples
let session = new ResizeSession();
<div data-resizable-group>
<section data-resizable-panel id="sidebar">Sidebar</section>
<div
data-resizable-handle
role="separator"
aria-orientation="vertical"
aria-label={resizeSidebarLabel}
tabIndex={0}
mix={resizeHandle("horizontal", session)}
/>
<section data-resizable-panel id="content">Content</section>
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
ResizableLayoutChangeEvent
Dispatched on a Resizable group's host by resizeHandle once a drag ends by releasing over the handle, carrying every panel's settled size; a cancelled drag reverts the panels instead of dispatching this.
new ResizableLayoutChangeEvent(panels: readonly ResizeSession.Panel[])| Property | Type | Description |
|---|---|---|
panels | readonly readonly ResizeSession.Panel[] | Every panel's settled size, min, and max, in group order. |
RESIZABLE_GROUP_ATTRIBUTE
Attribute a Resizable panel group's own host element carries.
resizeHandle() walks up to the nearest ancestor carrying it to find the
group to coordinate, so a nested group's handles never reach outside it.
const RESIZABLE_GROUP_ATTRIBUTE = "data-resizable-group"RESIZABLE_PANEL_ATTRIBUTE
Attribute every panel in a Resizable group carries as a direct child of
the group's host element. resizeHandle() reads matching direct children,
in document order, as the panel list ResizeSession's panels indexes by.
const RESIZABLE_PANEL_ATTRIBUTE = "data-resizable-panel"RESIZABLE_HANDLE_ATTRIBUTE
Attribute every handle in a Resizable group carries as a direct child of
the group's host element. resizeHandle() reads matching direct children,
in document order, to resolve which pair of panels its host sits between.
const RESIZABLE_HANDLE_ATTRIBUTE = "data-resizable-handle"RESIZABLE_PANEL_MIN_ATTRIBUTE
Attribute a panel optionally carries to set the smallest percentage of the
group's main-axis size it may shrink to, as a plain number ("20", not
"20%"). Omitted entirely, a panel is free to shrink to 0.
const RESIZABLE_PANEL_MIN_ATTRIBUTE = "data-resizable-min"RESIZABLE_PANEL_MAX_ATTRIBUTE
Attribute a panel optionally carries to set the largest percentage of the
group's main-axis size it may grow to, as a plain number ("80", not
"80%"). Omitted entirely, a panel is free to grow to 100.
const RESIZABLE_PANEL_MAX_ATTRIBUTE = "data-resizable-max"RESIZABLE_PANEL_SIZE_PROPERTY
CSS custom property resizeHandle() writes on every panel with its
current resolved size as a percentage ("42.5%") of the group's
main-axis size, letting a panel's own styles read it back directly.
const RESIZABLE_PANEL_SIZE_PROPERTY = "--ui-resizable-panel-size"ResizableAxis
Axis a Resizable panel group lays its panels out along, and the direction
resizeHandle() reads pointer movement on: "horizontal" drags
left/right between side-by-side panels; "vertical" drags up/down.
type ResizableAxis = "horizontal" | "vertical"