Dash Dock

A flexible docking window system for Dash applications.

Docs

https://pip-install-python.com/pip/dash-dock

Features

• Create dock-able, resizable, and floatable windows in your Dash apps
• Drag and drop tabs between dock containers
• Maximize, close, and pop-out tabs
• Compatible with both Dash 2 and Dash 3
• Free version with up to 3 tabs
• Premium version with unlimited tabs (requires API key)

Installation

pip install dash-dock

Simple Example

import dash
from dash import html
import dash_dock

app = dash.Dash(__name__)

# Define the layout configuration
dock_config = {
    "global": {
        "tabEnableClose": False,
        "tabEnableFloat": True
    },
    "layout": {
        "type": "row",
        "children": [
            {
                "type": "tabset",
                "children": [
                    {
                        "type": "tab",
                        "name": "Tab 1",
                        "component": "text",
                        "id": "tab-1",
                    }
                ]
            },
            {
                "type": "tabset",
                "children": [
                    {
                        "type": "tab",
                        "name": "Tab 2",
                        "component": "text",
                        "id": "tab-2",
                    }
                ]
            }
        ]
    }
}

# Create tab content components
tab_components = [
    dash_dock.Tab(
        id="tab-1",
        children=[
            html.H3("Tab 1 Content"),
            html.P("This is the content for tab 1")
        ]
    ),
    dash_dock.Tab(
        id="tab-2",
        children=[
            html.H3("Tab 2 Content"),
            html.P("This is the content for tab 2")
        ]
    )
]

# Main app layout
app.layout = html.Div([
    html.H1("Dash Dock Example"),
    dash_dock.DashDock(
        id='dock-layout',
        model=dock_config,
        children=tab_components,
        useStateForModel=True
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Premium Version

DashDock is available in two versions:

• Free Version: Limited to 3 tabs
• Premium Version: Unlimited tabs (requires API key)

To use the premium version, obtain an API key and include it in your DashDock component:

dash_dock.DashDock(
    id='dock-layout',
    model=dock_config,
    children=tab_components,
    apiKey="your-api-key-here"
)

Getting an API Key

Visit My Shop to obtain an API key for the premium version.

Component Properties

DashDock

Tab

Development

Prerequisites

• Node.js >= 14
• npm >= 6
• Python >= 3.7

Setup

1. Clone the repository:

   git clone https://github.com/pip-install-python/dash-dock.git
   cd dash-dock
   

2. Create a Python virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   

3. Install dependencies:

   pip install -r requirements.txt
   npm install
   

4. Build the component:

   npm run build
   

5. Run the example:

   python usage.py
   

License

This was created under the Pip Install Python LLC and licensed under the MIT License.