FlexLayout Examples

Each example is a small self-contained app served at its own URL.

1. Basic — minimal tabs plus a custom component tab
2. Borders — border tabs with a split/overlay toggle button
3. Context Menu — default and custom context menus
4. Tab Rendering — customizing tab buttons via onRenderTab
5. Tabset Rendering — customizing the tabset header via onRenderTabSet
6. Placeholder — a custom placeholder when a tabset is empty
7. Min Sizes — panels with a 200px minimum size
8. Tab Wrapping — wrapping tabs onto multiple lines
9. Pinned Tabs — tabs pinned to the start of the tabstrip
10. Tab Groups — Chrome-style colored group pills in the tabstrip
11. Theme — switching themes with the combined stylesheet
12. i18n — translating model text (tab names, groups, tabsets) via a registered translator
13. Iframe — Wikipedia articles in iframes across two tabsets
14. Sticky Button + Add Tabs — a sticky header button that adds tabs
15. Many Tabs — many tabs with a scrolling tabstrip
16. Internal Sublayout — a nested layout hosted inside a tab
17. Popout — tabs that pop out into a floating panel or native window
18. Undo / Redo — undo/redo with the useUndo hook
19. Bottom Tabs — tab strips on the bottom and single-tab stretch
20. Action Interception — vetoing and logging model actions via onAction / onModelChange
21. Load / Save — saving and loading the layout with localStorage
22. Keyboard Accessibility — configurable keyboard shortcuts (keyMap) and focus management
23. Custom Overflow Menu — replacing the hidden-tab overflow popup
24. External Drag — dragging a component into the layout