ResponsiveFlexiBoard

A wrapper component that manages different board layouts for different viewport breakpoints.

ResponsiveFlexiBoard (component)

Props

config ResponsiveFlexiBoardConfiguration

The configuration object for the responsive board.

lg Snippet

Snippet rendered for large breakpoints. No parameters.

md Snippet

Snippet rendered for medium breakpoints. No parameters.

sm Snippet

Snippet rendered for small breakpoints. No parameters.

xs Snippet

Snippet rendered for extra-small breakpoints. No parameters.

children Snippet<[{ currentBreakpoint: string }]>

Fallback snippet rendered when no breakpoint-specific snippet matches. Receives the current breakpoint as a parameter.

controller ResponsiveFlexiBoardController (bindable)

The controller for the responsive board.

onfirstcreate (controller: ResponsiveFlexiBoardController) => void

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

ResponsiveFlexiBoardController

ResponsiveFlexiBoard 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.

Properties

currentBreakpoint string

The currently active breakpoint key (e.g., 'lg', 'md', or 'default').

definedBreakpoints string[]

All breakpoint keys that have stored layouts.

configuredBreakpoints string[]

All breakpoint keys from the configuration.

Methods

importLayout (layout: ResponsiveFlexiLayout) => void

Imports layouts for all breakpoints, replacing any existing stored layouts.

exportLayout () => ResponsiveFlexiLayout

Exports layouts for all breakpoints that have been used.

getLayoutForBreakpoint (breakpoint: string) => FlexiLayout | undefined

Gets the stored layout for a specific breakpoint.

setLayoutForBreakpoint (breakpoint: string, layout: FlexiLayout) => void

Sets the layout for a specific breakpoint.

hasLayoutForBreakpoint (breakpoint: string) => boolean

Checks if a layout exists for a specific breakpoint.

ResponsiveFlexiBoardConfiguration

The configuration object for the ResponsiveFlexiBoard component.

Properties

breakpoints Record<string, number>

Breakpoint definitions mapping keys (lg, md, sm, xs) to minimum viewport widths in pixels. Evaluated largest-first; the first match wins.

loadLayouts () => ResponsiveFlexiLayout | undefined

Function to load initial layouts on mount. Called once when the responsive board is ready.

onLayoutsChange (layouts: ResponsiveFlexiLayout) => void

Callback fired when any layout changes (widget moved, resized, added, or removed). Receives all breakpoint layouts.

onBreakpointChange (newBreakpoint: string, oldBreakpoint: string) => void

Callback fired when the active breakpoint changes.

ResponsiveFlexiLayout

A responsive layout is a map of breakpoint keys to FlexiLayout objects:

type ResponsiveFlexiLayout = {
    [breakpoint: string]: FlexiLayout;
};

// Example
{
    lg: {
        "main": [
            { type: "chart", x: 0, y: 0, width: 2, height: 2 }
        ]
    },
    default: {
        "main": [
            { type: "chart", x: 0, y: 0, width: 1, height: 2 }
        ]
    }
}

Note: Layouts are lazily initialized. Only breakpoints that have been actively visited will have stored layouts.