Heads up! These docs are still a work in progress.

FlexiBoard

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

FlexiBoard (component)

Props

Name	Type	Description
config	FlexiBoardConfiguration	The configuration object for the board.
class	SvelteClassValue	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

Name	Type	Description
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

Name	Type	Description
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

Name	Type	Description
widgetDefaults	FlexiWidgetDefaults	The default configuration for widgets. Reactive.
targetDefaults	FlexiTargetDefaults	The default configuration for targets. Reactive.

FlexiTargetDefaults

The default configuration for targets.

Properties

Name	Type	Description
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.
baseColumns	number	The base number of columns for the target's grid. Defaults to 1. Not reactive.
baseRows	number	The base number of rows for the target's grid. Defaults to 1. Not reactive.
layout	TargetLayout	The layout algorithm and parameters to use for the target grid. Reactive.

FlexiWidgetDefaults

The default configuration for widgets.

Properties

Name	Type	Description
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.