Presets
Start with a sortable list or a dashboard grid in three lines, then graduate to the full components when you need more.
Two presets cover the boards people most often ask for. Each is one FlexiBoard wrapped around one FlexiTarget with the layout already chosen, so the first board you write has nothing to configure. Everything a board or target accepts still reaches them through config and targetConfig.
Sortable list
<script lang="ts">
import { FlexiSortable, FlexiWidget } from '@flexiboards/svelte';
</script>
<FlexiSortable class="w-72 gap-2">
<FlexiWidget class="bg-card rounded-lg border px-4 py-2">Write the docs</FlexiWidget>
<FlexiWidget class="bg-card rounded-lg border px-4 py-2">Record the demo</FlexiWidget>
<FlexiWidget class="bg-card rounded-lg border px-4 py-2">Ship it</FlexiWidget>
</FlexiSortable>FlexiSortable is a flow grid with one column (direction="vertical", the default) or one row (direction="horizontal"). Items pack together and keep their order; drag one onto another and they swap. Widgets are fully draggable unless config.widgetDefaults says otherwise.
| Name | Description |
|---|---|
controller Optional Bindable FlexiBoardController | undefined | The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
onfirstcreate Optional ((instance: FlexiBoardController) => void) | undefined | Fires when the component's controller is first created. |
direction Optional 'vertical' | 'horizontal' | Which way the list runs. Vertical is a column of rows, horizontal a row of columns. Default: |
key Optional string | The target key, used when a layout is exported or imported. Default: |
class Optional string | Classes for the list's grid element (the place for `gap-*`). |
containerClass Optional string | Classes for the element wrapping the grid. |
boardClass Optional ClassValue | Classes for the board's root element. |
config Optional FlexiBoardConfiguration<ClassValue> | Board configuration merged over the preset's defaults, which make widgets fully draggable. Anything a FlexiBoard accepts: callbacks, registry, layouts. |
targetConfig Optional Omit<FlexiTargetPartialConfiguration<ClassValue>, 'layout'> | Target configuration merged over the preset's. `direction` fixes the layout, and sizing and widget defaults are yours to set. |
children Optional Snippet | The list items: FlexiWidget declarations. |
Dashboard grid
<script lang="ts">
import { FlexiDashboard, FlexiWidget } from '@flexiboards/svelte';
</script>
<FlexiDashboard columns={3} rows={2} class="w-96 gap-2">
<FlexiWidget x={0} y={0} width={2} height={1} class="bg-card rounded-lg border p-3"
>Revenue</FlexiWidget
>
<FlexiWidget x={2} y={0} width={1} height={1} class="bg-card rounded-lg border p-3"
>Users</FlexiWidget
>
<FlexiWidget x={0} y={1} width={1} height={1} class="bg-card rounded-lg border p-3"
>Churn</FlexiWidget
>
</FlexiDashboard>FlexiDashboard is a free-form grid: widgets sit at coordinates and may leave gaps. columns fixes the width, rows the starting height, and maxRows how far the grid may grow when a widget is pushed down. Pass resizable to let widgets be resized from a FlexiResize handle.
| Name | Description |
|---|---|
controller Optional Bindable FlexiBoardController | undefined | The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
onfirstcreate Optional ((instance: FlexiBoardController) => void) | undefined | Fires when the component's controller is first created. |
columns Optional number | Columns in the grid. Default: |
rows Optional number | Rows the grid starts with. Default: |
maxRows Optional number | Rows the grid may grow to as widgets are pushed down. Default: |
resizable Optional boolean | Let widgets be resized from their FlexiResize handles. Default: |
key Optional string | The target key, used when a layout is exported or imported. Default: |
class Optional string | Classes for the grid element (the place for `gap-*`). |
containerClass Optional string | Classes for the element wrapping the grid. |
boardClass Optional ClassValue | Classes for the board's root element. |
config Optional FlexiBoardConfiguration<ClassValue> | Board configuration merged over the preset's defaults. |
targetConfig Optional Omit<FlexiTargetPartialConfiguration<ClassValue>, 'layout'> | Target configuration merged over the preset's. The layout comes from `columns`, `rows` and `maxRows`. |
children Optional Snippet | The tiles: FlexiWidget declarations with `x`, `y`, `width`, `height`. |
When to move on
A preset is a board with one target, so it stops fitting the moment you want two lists that trade items, a header above the grid, or a target that is not the whole board. The move is mechanical: the preset’s config becomes the FlexiBoard config, targetConfig plus the layout from the table above becomes the FlexiTarget config, and the children stay as they are. See Flow Grids, Free-Form Grids and Multiple Targets.