Getting Started

Build your first dockable layout with flexlayout-dash.

Install

pip install flexlayout-dash

import flexlayout_dash as dfl

The import name is flexlayout_dash (as of 1.1.0); the distribution on PyPI is flexlayout-dash.

Your first layout

A DashFlexLayout takes a model (the JSON layout tree) and children (Tab components whose id matches a tab id in the model). Wrap it in a container with an explicit height and you have a draggable, splittable dock.

# File: docs/getting-started/example.py

from dash import html
import flexlayout_dash as dfl

model = {
    "global": {"tabEnableClose": False, "tabEnableFloat": True},
    "layout": {
        "type": "row",
        "children": [
            {
                "type": "tabset",
                "weight": 50,
                "children": [{"type": "tab", "name": "Panel 1", "id": "gs-panel-1"}],
            },
            {
                "type": "tabset",
                "weight": 50,
                "children": [{"type": "tab", "name": "Panel 2", "id": "gs-panel-2"}],
            },
        ],
    },
}


def _panel(text):
    return html.Div(text, style={"padding": "16px"})


# Set the height on the component itself (its `style` is applied to the dock
# container). The component sets `position: relative` internally, so FlexLayout's
# absolutely-positioned layout stays contained within this box.
component = dfl.DashFlexLayout(
    id="gs-dock",
    model=model,
    useStateForModel=True,
    style={"height": "360px"},
    children=[
        dfl.Tab(id="gs-panel-1", children=[_panel("Drag this tab onto the other panel, or grab the splitter between them.")]),
        dfl.Tab(id="gs-panel-2", children=[_panel("Second panel.")]),
    ],
)

The three rules

1. Match IDs — every dfl.Tab(id=...) must correspond to a {"type": "tab", "id": ...} in the model.
2. Give it height — pass style={"height": "400px"} to the component (its style is applied to the dock container). FlexLayout positions its layout absolutely; the component sets position: relative on its own container, so the layout stays contained within that box.
3. Pick a model mode — useStateForModel=True keeps the layout in the browser (simplest). Use False when you want to read or drive the model from Dash callbacks (see Callbacks).

Next, see the full Component Reference, or jump to Basic Layouts.

Source: /getting-started