Flexiboards

FlexiBoard

The main container component of a board, managing the targets and widgets within it.

FlexiBoard (component)

Props

config FlexiBoardConfiguration

The configuration object for the board.

class ClassValue

The class to apply to the board.

children Snippet

The child content of the board, which should contain the inner FlexiTarget and FlexiWidget components.

controller FlexiBoardController (bindable)

The controller for the board.

onfirstcreate (controller: FlexiBoardController) => void

A callback that fires when the board's controller is first created.

FlexiBoardController

FlexiBoard 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 FlexiBoardController allows you to manage the board directly and carry out actions.

Properties

style string

The reactive styling to apply to the board's root element.

ref HTMLElement | null

The reactive DOM reference to the board's root element.

Methods

moveWidget (widget: FlexiWidgetController, from: FlexiTargetController | undefined, to: FlexiTargetController) => void

Moves an existing widget from one target to another.

FlexiBoardConfiguration

The configuration object for the FlexiBoard component, which supports reactivity where specified.

To use reactivity, ensure that the config prop has a reactive source (proxy).

Properties

widgetDefaults FlexiWidgetDefaults

The default configuration for widgets. Reactive.

targetDefaults FlexiTargetDefaults

The default configuration for targets. Reactive.

FlexiTargetDefaults

The default configuration for targets.

Properties

rowSizing string | ({ target, grid }: { target: FlexiTargetController, grid: FlexiGrid }) => string

Allows the specifying of the value inside the `repeat()` function of the `grid-template-rows` CSS property for the target. Defaults to 'minmax(1rem, auto)'. Reactive.

columnSizing string | ({ target, grid }: { target: FlexiTargetController, grid: FlexiGrid }) => string

Allows the specifying of the value inside the `repeat()` function of the `grid-template-columns` CSS property for the target. Defaults to 'minmax(0, 1fr)'. Reactive.

layout TargetLayout

The layout algorithm and parameters to use for the target grid.

FlexiWidgetDefaults

The default configuration for widgets.

Properties

draggable boolean

Whether the widget is draggable. Defaults to true. Reactive.

resizability 'none' | 'horizontal' | 'vertical' | 'both'

The resizability of the widget. Defaults to 'both'. Reactive.

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.

component Component

The component that is rendered by this widget. Reactive.

componentProps Record<string, any>

The props applied to the component rendered, if it has one. Reactive.

className ClassValue

The class names to apply to this widget. Reactive.

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.