FlexiWidget

A widget is a component (such as a tile) that is stored within a target (dropzone). Widgets can be moved around within a target or between targets.

FlexiWidget (component)

Props

Name	Type	Description
class	string	The class names to apply to this widget.
children	Snippet<[{ widget: FlexiWidgetController, component?: Component, componentProps?: Record<string, any> }]>	The content rendered within the widget.
draggable	boolean	Whether the widget is draggable.
resizability	'none' \| 'horizontal' \| 'vertical' \| 'both'	The resizability of the widget.
width	number	The width of the widget in units.
height	number	The height of the widget in units.
component	Component<T>	The component rendered within the widget.
componentProps	T	The props applied to the component rendered, if it has one.
controller	FlexiWidgetController (bindable)	The controller for this widget.
onfirstcreate	(controller: FlexiWidgetController) => void	A callback that fires when the widget's controller is first created.

FlexiWidgetController

FlexiWidgetController uses a controller to manage its state and behaviour. You can access the controller via binding to the controller prop or using the onfirstcreate callback.

The FlexiWidgetController allows you to access widget state directly.

Properties

Name	Type	Description
target	FlexiTargetController \| undefined	The target this widget is under. This is not defined if the widget has not yet been dropped in the board.
ref	HTMLElement \| undefined	The DOM element bound to this widget.
config	FlexiWidgetDerivedConfiguration	The reactive configuration of the widget.
isShadow	boolean	Whether this widget is a shadow dropzone widget.
isGrabbed	boolean	Whether this widget is grabbed.
isResizing	boolean	Whether this widget is being resized.
currentAction	WidgetAction \| null	The current action being performed on the widget.
draggable	boolean	Whether the widget is draggable.
resizability	'none' \| 'horizontal' \| 'vertical' \| 'both'	The resizability of the widget.
width	number	The width of the widget in units.
height	number	The height of the widget in units.
component	Component \| undefined	The component rendered within the widget.
componentProps	Record<string, any> \| undefined	The props applied to the component rendered, if it has one.
snippet	Snippet<[{ widget: FlexiWidgetController }]> \| undefined	The content rendered within the widget.
className	ClassValue \| undefined	The class name that is applied to this widget.
x	number	The column (x-coordinate) of the widget.
y	number	The row (y-coordinate) of the widget.
grabTrigger	FlexiWidgetTriggerConfiguration	The configuration for how pointer events should trigger a grab event on the widget. E.g. a long press.
resizeTrigger	FlexiWidgetTriggerConfiguration	The configuration for how pointer events should trigger a resize event on the widget. E.g. a long press.
transitionConfig	FlexiWidgetTransitionConfiguration	Gets the transition configuration for this widget.
hasGrabbers	boolean	Whether the widget has any grabbers attached.
hasResizers	boolean	Whether the widget has any resizers attached.
isBeingDropped	boolean	Whether the widget is currently being dropped after a drag operation.
metadata	Record<string, any> \| undefined	The metadata associated with this widget, if any.

FlexiWidgetController does not expose any methods.

FlexiWidgetConfiguration

The configuration object for the FlexiWidget component. This is not reactive when invoked as props on the component, so to mutate it reactively you will need to mutate properties on the controller.

Properties

Name	Type	Description
draggable	boolean	Whether the widget is draggable. Defaults to true. Reactive property.
resizability	'none' \| 'horizontal' \| 'vertical' \| 'both'	The resizability of the widget. Defaults to 'both'. Reactive property.
width	number	The width of the widget in units. Defaults to 1. Not reactive.
height	number	The height of the widget in units. Defaults to 1. Not reactive.
snippet	Snippet	The snippet that is rendered by this widget. Reactive property.
component	Component	The component that is rendered by this widget. Reactive property.
componentProps	Record<string, any>	The props applied to the component rendered, if it has one. Reactive property.
className	ClassValue	The class names to apply to this widget. Reactive property.
x	number	The column (x-coordinate) of the widget. Not reactive.
y	number	The row (y-coordinate) of the widget. Not reactive.
metadata	Record<string, any>	The metadata associated with this widget, if any. Reactive property.
transition	FlexiWidgetTransitionConfiguration	The transition configuration for this widget. Reactive property.
grabTrigger	FlexiWidgetTriggerConfiguration	The configuration for how pointer events should trigger a grab event on the widget. E.g. a long press.
resizeTrigger	FlexiWidgetTriggerConfiguration	The configuration for how pointer events should trigger a resize event on the widget. E.g. a long press.