Flexiboards

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

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

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

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.