Heads up! These docs are still a work in progress.
Overview
Hello, World!
Anatomy of a Flexiboard
Flexiboards are constructed from a series of components, namely FlexiBoard
, FlexiTarget
, and FlexiWidget
. When used together, they allow you to build drag-and-drop grids for various use cases.
Below is a diagram showing the anatomy of a Flexiboard that would be used for a todos board.
<FlexiBoard>
<FlexiTarget>
<FlexiWidget>
Snippet | Component
<FlexiTarget>
<FlexiWidget>
Snippet | Component
<FlexiWidget>
Snippet | Component
Here’s that board in action (with added styling):
Incomplete
Done
In a Flexiboard, each of these components serves a specific purpose:
FlexiBoard
is the main container for the board, creating the drag-and-drop environment. It isolates the targets and widgets; you can have multiple boards on a single page, but widgets cannot be dragged between different FlexiBoards.FlexiTarget
is a dropzone and container for widgets. You can store widgets within it in a customisable layout, and you can move widgets between different FlexiTargets of the same board.FlexiWidget
is the widget itself. These can be moved, resized, and customised in a number of ways. Within a FlexiWidget, you can render content in two ways: either you can use thechildren
snippet, or you can use thecomponent
prop to render any custom component of your choosing. You can also combine them, which is helpful if you want to have a series of consistent looking widgets that can still render their own component.