flexlayout-react
    Preparing search index...

    Interface ILayoutProps

    interface ILayoutProps {
        classNameMapper?: (defaultClassName: string) => string;
        constrainFloatPanels?: boolean;
        factory: (node: TabNode) => ReactNode;
        i18nMapper?: (id: I18nLabel, param?: string) => string | undefined;
        icons?: IIcons;
        invalidateTabContentOnParentRender?: boolean;
        keyMap?: IKeyMap;
        model: Model;
        onAction?: (action: Action) => Action | undefined;
        onAuxMouseClick?: NodeMouseEvent;
        onContextMenu?: NodeMouseEvent;
        onExternalDrag?: (
            event: DragEvent<HTMLElement>,
        ) =>
            | {
                json: ITabAttributes;
                onDrop?: (node?: Node, event?: DragEvent<HTMLElement>) => void;
            }
            | undefined;
        onModelChange?: (model: Model, action: Action) => void;
        onPopoutClose?: (
            layout: ModelLayout,
            popoutWindow: Window,
            popoutDocument: Document,
        ) => void;
        onPopoutOpen?: (
            layout: ModelLayout,
            popoutWindow: Window,
            popoutDocument: Document,
        ) => void;
        onRenderDragRect?: DragRectRenderCallback;
        onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
        onRenderTabSet?: (
            tabSetNode: TabSetNode | BorderNode,
            renderValues: ITabSetRenderValues,
        ) => void;
        onShowOverflowMenu?: ShowOverflowMenuCallback;
        onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
        popoutClassName?: string;
        popoutURL?: string;
        popoutWindowName?: string;
        realtimeResize?: boolean;
        renderPopoutContent?: (
            renderContext: {
                children: ReactNode;
                layout: ModelLayout;
                popoutDocument: Document;
                popoutWindow: Window;
            },
        ) => ReactNode;
        supportsPopout?: boolean;
        tabDragSpeed?: number;
    }
    Index
    classNameMapper? constrainFloatPanels? factory i18nMapper? icons? invalidateTabContentOnParentRender? keyMap? model onAction? onAuxMouseClick? onContextMenu? onExternalDrag? onModelChange? onPopoutClose? onPopoutOpen? onRenderDragRect? onRenderTab? onRenderTabSet? onShowOverflowMenu? onTabSetPlaceHolder? popoutClassName? popoutURL? popoutWindowName? realtimeResize? renderPopoutContent? supportsPopout? tabDragSpeed?
    classNameMapper?: (defaultClassName: string) => string

    function called with default css class name, return value is class name that will be used. Mainly for use with css modules.

    constrainFloatPanels?: boolean

    set to constrain floating panels to within the layout control

    factory: (node: TabNode) => ReactNode

    factory function for creating the tab components

    i18nMapper?: (id: I18nLabel, param?: string) => string | undefined

    function called for each I18nLabel to allow user translation, currently used for tab and tabset move messages, return undefined to use default values

    icons?: IIcons

    Custom icons for close, pin, maximize, restore, more, popout buttons.

    invalidateTabContentOnParentRender?: boolean

    boolean value, defaults to true. When true every render of the host element invalidates memoized tab content, so factories capturing host state stay fresh. Set to false when tab content does not depend on host render scope: content then refreshes only on model changes or an explicit redraw() call, so unrelated parent renders no longer re-invoke the factory for every visible tab

    keyMap?: IKeyMap

    keyboard bindings for the layout's command shortcuts (close tab, rename tab, focus toggle, close overlay border), merged over defaultKeyMap; pass an explicit undefined for a binding to disable that shortcut. The configured bindings are advertised to assistive technology via aria-keyshortcuts

    model: Model

    the model for this layout

    onAction?: (action: Action) => Action | undefined

    function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning undefined from the function will halt the action, otherwise return the action to continue

    onAuxMouseClick?: NodeMouseEvent

    callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks

    onContextMenu?: NodeMouseEvent

    callback for handling context actions on tabs and tabsets

    onExternalDrag?: (
        event: DragEvent<HTMLElement>,
    ) =>
        | {
            json: ITabAttributes;
            onDrop?: (node?: Node, event?: DragEvent<HTMLElement>) => void;
        }
        | undefined

    Handle external drag-and-drop onto the layout. Return undefined to reject.

    onModelChange?: (model: Model, action: Action) => void

    function called when model has changed

    onPopoutClose?: (
        layout: ModelLayout,
        popoutWindow: Window,
        popoutDocument: Document,
    ) => void

    Called when a popout window closes, after its layout has been removed from the model. Allows teardown (e.g. disposing per-window style caches). Fires once per popout, including when the main window unloads.

    onPopoutOpen?: (
        layout: ModelLayout,
        popoutWindow: Window,
        popoutDocument: Document,
    ) => void

    Called once a popout window's document is ready, before its content is rendered. Allows styling-specific setup to run with the popout window/document in hand (e.g. pre-creating an emotion cache or styled-components sheet that targets the popout document).

    onRenderDragRect?: DragRectRenderCallback

    callback for rendering the drag rectangles

    onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void

    function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized

    onRenderTabSet?: (
        tabSetNode: TabSetNode | BorderNode,
        renderValues: ITabSetRenderValues,
    ) => void

    function called when rendering a tabset, allows header and buttons to be customized

    onShowOverflowMenu?: ShowOverflowMenuCallback

    callback for handling the display of the tab overflow menu

    onTabSetPlaceHolder?: TabSetPlaceHolderCallback

    callback for rendering a placeholder when a tabset is empty

    popoutClassName?: string

    sets a top level class name on popout windows

    popoutURL?: string

    URL of popout window relative to origin, defaults to popout.html

    popoutWindowName?: string

    Name given to popout windows, defaults to 'Popout Window'

    realtimeResize?: boolean

    boolean value, defaults to false, resize tabs as splitters are dragged. Warning: this can cause resizing to become choppy when tabs are slow to draw

    renderPopoutContent?: (
        renderContext: {
            children: ReactNode;
            layout: ModelLayout;
            popoutDocument: Document;
            popoutWindow: Window;
        },
    ) => ReactNode

    Wrap the content rendered into a popout window, e.g. to inject css-in-js styles into the popout document via an emotion CacheProvider or a styled-components StyleSheetManager targeting the popout document's head. css-in-js libraries that insert rules through the CSSOM (emotion's production "speedy" mode) are invisible to the runtime style copy, so styles must be written into the popout document directly. The default returns the children unchanged.

    supportsPopout?: boolean

    if left undefined will do simple check based on userAgent

    tabDragSpeed?: number

    the transition speed of the drag rectangle from one position to another, default is 0.3 secs

    Settings
    Member Visibility

    On This Page
    Properties