https://github.com/pip-install-python/dash-flex-layout
inspired by FlexLayout-react built tof the dash community
https://github.com/pip-install-python/dash-flex-layout
Last synced: 10 days ago
JSON representation
inspired by FlexLayout-react built tof the dash community
- Host: GitHub
- URL: https://github.com/pip-install-python/dash-flex-layout
- Owner: pip-install-python
- License: other
- Created: 2026-01-05T05:00:20.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-05T05:31:53.000Z (5 months ago)
- Last Synced: 2026-05-13T12:48:57.127Z (26 days ago)
- Language: Julia
- Size: 977 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Dash Flex Layout
A flexible docking layout system for Dash applications built on [FlexLayout](https://github.com/caplin/FlexLayout).
## Docs
https://pip-install-python.com/pip/dash_flex_layout
## 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
```bash
pip install flexlayout-dash
```
## Simple Example
```python
import dash
from dash import html
import dash_flex_layout
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_flex_layout.Tab(
id="tab-1",
children=[
html.H3("Tab 1 Content"),
html.P("This is the content for tab 1")
]
),
dash_flex_layout.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 Flex Layout Example"),
dash_flex_layout.DashFlexLayout(
id='dock-layout',
model=dock_config,
children=tab_components,
useStateForModel=True
)
])
if __name__ == '__main__':
app.run_server(debug=True)
```
## Premium Version
Dash Flex Layout 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 DashFlexLayout component:
```python
dash_flex_layout.DashFlexLayout(
id='dock-layout',
model=dock_config,
children=tab_components,
apiKey="your-api-key-here"
)
```
### Getting an API Key
Visit [My Shop](https://pipinstallpython.pythonanywhere.com/catalogue/dash-flex-layout_96/) to obtain an API key for the premium version.
## Component Properties
### DashFlexLayout
| Property | Type | Description |
|----------|------|-------------|
| `id` | string | The ID used to identify this component |
| `model` | object | FlexLayout model configuration |
| `children` | list | React components to render in the tabs |
| `headers` | object | Custom headers for tabs |
| `useStateForModel` | boolean | Use internal state for the model (default: false) |
| `font` | object | Override font styles for tabs |
| `supportsPopout` | boolean | Whether pop-out windows are supported |
| `popoutURL` | string | URL for pop-out windows |
| `realtimeResize` | boolean | Resize tabs during dragging (default: false) |
| `apiKey` | string | API key for premium features |
| `freeTabLimit` | number | Maximum number of tabs in free version (default: 3) |
| `debugMode` | boolean | Enable debug mode (default: false) |
### Tab
| Property | Type | Description |
|----------|------|-------------|
| `id` | string | The ID used to identify this tab |
| `children` | list | React components to render in the tab |
## Development
### Prerequisites
- Node.js >= 14
- npm >= 6
- Python >= 3.7
### Setup
1. Clone the repository:
```bash
git clone https://github.com/pip-install-python/dash-flex-layout.git
cd dash-flex-layout
```
2. Create a Python virtual environment:
```bash
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
```
3. Install dependencies:
```bash
pip install -r requirements.txt
npm install
```
4. Build the component:
```bash
npm run build
```
5. Run the example:
```bash
python usage.py
```
## License
This was created under the [Pip Install Python LLC](https://pip-install-python.com) and licensed under the MIT License.