FlexiTarget

A 'target' for widgets, or a dropzone. Stores a series of widget instances in a managed grid layout.

FlexiTarget (component)

Props

header Snippet<[{ target: FlexiTargetController }]>

The header content of the target, above the grid.

children Snippet

The child content of the target, which should contain inner FlexiWidget definitions.

footer Snippet<[{ target: FlexiTargetController }]>

The footer content of the target, below the grid.

containerClass string

The class names to apply to the target's container element.

class string

The class names to apply to the target's root element.

config FlexiTargetConfiguration

The configuration object for the target.

key string

The unique identifier for the target. Used to identify the target when layouts are imported or exported.

controller FlexiBoardController (bindable)

The controller for the board.

onfirstcreate (controller: FlexiBoardController) => void

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

FlexiTargetController

FlexiTargetController 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 FlexiTargetController allows you to manage the target directly and carry out actions.

Properties

widgets SvelteSet<FlexiWidgetController>

The widgets currently in this target.

config FlexiTargetConfiguration

The reactive configuration of the target.

providerWidgetDefaults FlexiWidgetDefaults | undefined

The reactive default widget configuration passed through from the provider, if it exists.

prepared boolean

Whether the target is prepared and ready to render widgets.

columns number

The number of columns currently being used in the target grid.

rows number

The number of rows currently being used in the target grid.

Methods

createWidget (config: FlexiWidgetConfiguration) => FlexiWidgetController | undefined

Creates a new widget under this target.

More methods will be added in a future version.

FlexiTargetConfiguration

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

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

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.

widgetDefaults FlexiWidgetDefaults

The default configuration for widgets. Reactive.

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.