• Public
  • Public/Protected
  • All

Interface LayoutProps


  • LayoutProps



Optional defaultLayout

defaultLayout: LayoutData
  • when LayoutProps.loadTab callback is defined, tabs in defaultLayout only need to have an id, unless loadTab requires other fields
  • when LayoutProps.loadTab is not defined, tabs must contain title and content, as well as other fields in TabData when needed

Optional dockId

dockId: string

when there are multiple DockLayout, by default, you can't drag panel between them but if you assign same dockId, it will allow panels to be dragged from one layout to another

Optional dropMode

dropMode: "default" | "edge"
  • default mode: showing 4 to 9 squares to help picking drop areas
  • edge mode: using the distance between mouse and panel border to pick drop area
    • in edge mode, dragging float panel's header won't bring panel back to dock layer

Optional groups

groups: {}

Tab Groups, defines additional configuration for different groups

Type declaration

Optional layout

layout: LayoutBase

set layout only when you want to use DockLayout as a fully controlled react component when using controlled layout, [[LayoutProps.onChange]] must be set to enable any layout change

Optional maximizeTo

maximizeTo: string | HTMLElement

when specified, docklayout will create a react portal for the maximized panel use dom element as the value, or use the element's id

Optional style

style: CSSProperties


Optional afterPanelLoaded

  • modify the loadedPanel, you can retrieve additional data into the panel

    • modifying panel tabs is allowed, make sure to add or replace full TabData with title and content, because loadTab won't be called after this
    • if tabs is empty, but still remaining in layout because of panelLock, make sure also set the group if it's not null


    Returns void

Optional afterPanelSaved

Optional loadTab

Optional onLayoutChange

Optional saveTab

Generated using TypeDoc