{node.getName()}
;\r\n }\r\n }\r\n\r\n return (\r\n ![\"Simple](\"screenshots/Screenshot_two_tabs.png?raw=true\" "\\"Generated")
\r\n\r\n\r\nTry it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)\r\n\r\nA simple Typescript example can be found here:\r\n\r\nhttps://github.com/nealus/flexlayout-vite-example\r\n\r\nThe model json contains 4 top level elements:\r\n\r\n* global - (optional) where global options are defined\r\n* layout - where the main row/tabset/tabs layout hierarchy is defined\r\n* borders - (optional) where up to 4 borders are defined (\"top\", \"bottom\", \"left\", \"right\").\r\n* popouts - (optional) where the popout windows are defined\r\n\r\nThe layout element is built up using 3 types of 'node':\r\n\r\n* row - rows contains a list of tabsets and child rows, the top level 'row' will render horizontally (unless the global attribute rootOrientationVertical is set)\r\n, child 'rows' will render in the opposite orientation to their parent row.\r\n\r\n* tabset - tabsets contain a list of tabs and the index of the selected tab\r\n\r\n* tab - tabs specify the name of the component that they should host (that will be loaded via the factory) and the text of the actual tab.\r\n\r\nThe layout structure is defined with rows within rows that contain tabsets that themselves contain tabs.\r\n\r\nWithin the demo app you can show the layout structure by ticking the 'Show layout' checkbox, rows are shown in blue, tabsets in orange.\r\n\r\n![FlexLayout Demo Showing Layout](screenshots/Screenshot_layout.png?raw=true \"Demo showing layout\")\r\n\r\nThe optional borders element is made up of border nodes\r\n\r\n* border - borders contain a list of tabs and the index of the selected tab, they can only be used in the borders\r\ntop level element.\r\n\r\nThe tree structure for the JSON model is well defined as Typescript interfaces, see [JSON Model](#json-model-definition)\r\n\r\nEach type of node has a defined set of requires/optional attributes.\r\n\r\nWeights on rows and tabsets specify the relative weight of these nodes within the parent row, the actual values do not matter just their relative values (ie two tabsets of weights 30,70 would render the same if they had weights of 3,7).\r\n\r\nNOTE: the easiest way to create your initial layout JSON is to use the [demo](https://caplin.github.io/FlexLayout/demos/v0.8/demo/index.html) app, modify one of the\r\nexisting layouts by dragging/dropping and adding nodes then press the 'Show Layout JSON in console' button to print the JSON to the browser developer console.\r\n\r\nBy changing global or node attributes you can change the layout appearance and functionality, for example:\r\n\r\nSetting tabSetEnableTabStrip:false in the global options would change the layout into a multi-splitter (without\r\ntabs or drag and drop).\r\n\r\n```\r\n global: {tabSetEnableTabStrip:false},\r\n```\r\n\r\n## Dynamically Changing the Theme\r\n\r\nThe 'combined.css' theme contains all the other themes and can be used for theme switching.\r\n\r\nWhen using combined.css, add a className (of the form \"flexlayout__theme_[theme name]\") to the div containing the `\r\n
\r\n```\r\n\r\nChange the theme in code by changing the className on the containing div.\r\n\r\nFor example:\r\n```\r\n containerRef.current!.className = \"flexlayout__theme_dark\"\r\n```\r\n\r\n## Customizing Tabs\r\n\r\nYou can use the `![\"FlexLayout](\"screenshots/Screenshot_customize_tab.png?raw=true\"\r\n "\\"Tab")
\r\n\r\nUpdate the renderValues parameter as needed:\r\n\r\nrenderValues.leading : the red block\r\n\r\nrenderValues.content : the green block\r\n\r\nrenderValues.buttons : the yellow block\r\n\r\nFor example:\r\n\r\n```\r\nonRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {\r\n // renderValues.leading = ![](\"images/menu.svg\"/)
);\r\n}\r\n```\r\n\r\n## Customizing Tabsets\r\n\r\nYou can use the `![\"FlexLayout](\"screenshots/Screenshot_customize_tabset.png?raw=true\"\r\n "\\"Tabset")
\r\n\r\nUpdate the renderValues parameter as needed:\r\n\r\nrenderValues.leading : the blue block\r\n\r\nrenderValues.stickyButtons : the red block\r\n\r\nrenderValues.buttons : the green block\r\n\r\n\r\nFor example:\r\n\r\n```\r\nonRenderTabSet = (node: (TabSetNode | BorderNode), renderValues: ITabSetRenderValues) => {\r\n renderValues.stickyButtons.push(\r\n );\r\n}\r\n```\r\n\r\n## Model Actions\r\n\r\nOnce the model json has been loaded all changes to the model are applied through actions.\r\n\r\nYou apply actions using the `Model.doAction()` method.\r\n\r\nThis method takes a single argument, created by one of the action\r\ngenerators (accessed as `FlexLayout.Actions.![\"PlaywrightUI\"](\"screenshots/PlaywrightUI.png?raw=true\" "\\"PlaywrightUI")
\r\n\r\nTo build the npm distribution run 'pnpm build'.\r\n\r\n## Alternative Layout Managers\r\n\r\n| Name | Repository |\r\n| ------------- |:-------------|\r\n| rc-dock | https://github.com/ticlo/rc-dock |\r\n| Dockview | https://dockview.dev/ |\r\n| lumino | https://github.com/jupyterlab/lumino |\r\n| golden-layout | https://github.com/golden-layout/golden-layout |\r\n| react-mosaic | https://github.com/nomcopter/react-mosaic |","users":{}}