@elemental/ui / Class

LmnResizableDirective

Decorators:@Directive
Selectors:[lmnResizable]

A directive that enables resizing of an element using handles. It supports various configurations for handle positions and styles, and emits events when the element is resized. The directive also manages the state of the resizing process, including handling mouse events and updating the cursor style.

Properties

NameTypeDescription
#dragging
r
WritableSignal<boolean>

Whether the element is currently being dragged for resizing.

disabled
InputSignalWithTransform<boolean, unknown>

Whether resizing is disabled.

dragging
r
Signal<boolean>
handles
InputSignalWithTransform<"top" | "bottom" | "all" | LmnResizableHandles | "right" | "left", unknown>

The handles for resizing the element. Can be 'top', 'right', 'bottom', 'left', 'all', or a custom configuration.

negative
InputSignalWithTransform<boolean, unknown>

Whether the resizable handles should have a negative style.

resized
r
OutputEmitterRef<LmnResizeEvent>

Event emitted when the element is resized.

setInput
r
<This, T extends keyof { [P in keyof This as This[P] extends InputSignalWithTransform<any, any> ? P : never]: any; }>(this: This, input: T, value: ExtractInputSignal<This[T]>) => void

Function to set an input programmatically.