flexlayout-react
    Preparing search index...

    Interface ILayoutProps

    interface ILayoutProps {
        classNameMapper?: (defaultClassName: string) => string;
        factory: (node: TabNode) => ReactNode;
        i18nMapper?: (id: I18nLabel, param?: string) => undefined | string;
        icons?: IIcons;
        model: Model;
        onAction?: (action: Action) => undefined | Action;
        onAuxMouseClick?: NodeMouseEvent;
        onContextMenu?: NodeMouseEvent;
        onExternalDrag?: (
            event: DragEvent<HTMLElement>,
        ) =>
            | undefined
            | {
                json: any;
                onDrop?: (node?: Node, event?: DragEvent<HTMLElement>) => void;
            };
        onModelChange?: (model: Model, action: Action) => 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;
        supportsPopout?: boolean;
    }
    Index

    Properties

    classNameMapper? factory i18nMapper? icons? model onAction? onAuxMouseClick? onContextMenu? onExternalDrag? onModelChange? onRenderDragRect? onRenderTab? onRenderTabSet? onShowOverflowMenu? onTabSetPlaceHolder? popoutClassName? popoutURL? popoutWindowName? realtimeResize? supportsPopout?

    Properties

    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.

    factory: (node: TabNode) => ReactNode

    factory function for creating the tab components

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

    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

    object mapping keys among close, maximize, restore, more, popout to React nodes to use in place of the default icons, can alternatively return functions for creating the React nodes

    model: Model

    the model for this layout

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

    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>,
    ) =>
        | undefined
        | {
            json: any;
            onDrop?: (node?: Node, event?: DragEvent<HTMLElement>) => void;
        }

    function called when an external object (not a tab) gets dragged onto the layout, with a single dragenter argument. Should return either undefined to reject the drag/drop or an object with keys dragText, jsonDrop, to create a tab via drag (similar to a call to addTabToTabSet). Function onDropis passed the added tabNodeand thedrop DragEvent`, unless the drag was canceled.

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

    function called when model has changed

    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

    supportsPopout?: boolean

    if left undefined will do simple check based on userAgent

    Settings

    Member Visibility

    On This Page

    Properties