AboutSupportDeveloper GuideVersion 44.144.100.59

Interface LayoutOptions

interface LayoutOptions {
    content?: LayoutContent;
    dimensions?: {
        borderWidth?: number;
        headerHeight?: number;
        minItemHeight?: number;
        minItemWidth?: number;
    };
    settings?: {
        constrainDragToContainer?: boolean;
        constrainDragToHeaders?: boolean;
        hasHeaders?: boolean;
        newTabButtonUrl?: string;
        popoutWholeStack?: boolean;
        preventDragIn?: boolean;
        preventDragOut?: boolean;
        preventSplitterResize?: boolean;
        reorderEnabled?: boolean;
        showCloseIcon?: boolean;
        showMaximiseIcon?: boolean;
        showPopoutIcon?: boolean;
        tabOverflowBehavior?: "dropdown" | "scroll";
    };
}

Properties

content? dimensions? settings?

Properties

Optionalcontent

content?: LayoutContent

Content of the layout. There can only be one top-level LayoutItem in the content array. We do not recommend trying to build Layouts or LayoutItems by hand and instead use calls such as getSnapshot.

Optionaldimensions

dimensions?: {
    borderWidth?: number;
    headerHeight?: number;
    minItemHeight?: number;
    minItemWidth?: number;
}

Optionalsettings

settings?: {
    constrainDragToContainer?: boolean;
    constrainDragToHeaders?: boolean;
    hasHeaders?: boolean;
    newTabButtonUrl?: string;
    popoutWholeStack?: boolean;
    preventDragIn?: boolean;
    preventDragOut?: boolean;
    preventSplitterResize?: boolean;
    reorderEnabled?: boolean;
    showCloseIcon?: boolean;
    showMaximiseIcon?: boolean;
    showPopoutIcon?: boolean;
    tabOverflowBehavior?: "dropdown" | "scroll";
}

Represents a potential ways to customize behavior of your Layout

Type declaration

  • OptionalconstrainDragToContainer?: boolean

    Limits the area to which tabs can be dragged. If true, the layout container is the only area where tabs can be dropped.

    Default

    false
  • OptionalconstrainDragToHeaders?: boolean

    Limits the area to which tabs can be dragged. If true, stack headers are the only areas where tabs can be dropped.

    Default

    false
  • OptionalhasHeaders?: boolean

    Turns tab headers on or off. If false, the layout will be displayed with splitters only.

    Default

    true
  • OptionalnewTabButtonUrl?: string

    The button will create a new tab with the URL specified in newTabButtonUrl.

  • OptionalpopoutWholeStack?: boolean

    Whether the popout button will only act on the entire stack, as opposed to only the active tab.

    Default

    false
  • OptionalpreventDragIn?: boolean

    @defaultValue=false

    If true, tabs can't be dragged into the window.

    Default

    false
  • OptionalpreventDragOut?: boolean

    If true, tabs can't be dragged out of the window.

    Default

    false
  • OptionalpreventSplitterResize?: boolean

    When true the splitters will not be draggable and the layout will not resize.

    Default

    false
  • OptionalreorderEnabled?: boolean

    If true, the user can re-arrange the layout by dragging items by their tabs to the desired location.

    Default

    true
  • OptionalshowCloseIcon?: boolean

    Whether to show the close button on stack header (not to be confused with close button on every tab).

    Default

    false
  • OptionalshowMaximiseIcon?: boolean

    Whether to show the maximize button on stack header. The button will maximize the current tab to fill the entire window.

    Default

    false
  • OptionalshowPopoutIcon?: boolean

    Whether to show the popout button on stack header. The button will create a new window with current tab as its content. In case popoutWholeStack is set to true, all tabs in the stack will be in the new window.

    Default

    false
  • OptionaltabOverflowBehavior?: "dropdown" | "scroll"

    When set to 'scroll', enables horizontal scrolling of tabs when they overflow the stack width. When set to 'dropdown', the default behavior occurs, in which excess tabs appear in a menu.

    Setting this to scroll might break styles written for the default dropdown behavior, as it significantly changes the DOM structure and CSS of tabs.

    The DOM structure is modified in this way:

    • lm_tabs is wrapped in a div with class lm_scroll_shadow. This div is revealed by a mask on the tabs when they are overflowing.
    • the .newTabButton (if enabled) is a direct child of .lm_header

    The following CSS variables are available to customize tab appearance:

    • --layout-tab-width: The default (max) width of the tabs. Using this enables using lm_tab as a queryable CSS container (must be an absolute value to use container queries). Default: fit-content
    • --layout-tab-min-width: The minimum width of the tabs before they start overflowing. Set this to enable tab shrinking. Defaults to the same value as --layout-tab-width (no shrinking).
    • --layout-tab-overflow-fade-size: The width of the scroll shadows when tabs are overflowing. Default: 20px
    • --layout-tab-overflow-shadow-color: The color of the scroll shadows when tabs are overflowing. Enabling a contrasting shadow color may require setting the background color on .lm_tabs if it was not previously set via --tabs-background-color. Default is transparent so overlowing tabs fade into the background.

    CSS Variables for advanced customization (dynamically updated and set on lm_tabs):

    • --layout-tab-overflow-fade-left: The strength of the left fade when tabs are overflowing. This is a number between 0 and 1 where 0 means no fade and 1 means a full fade.
    • --layout-tab-overflow-fade-right: The strength of the right fade when tabs are overflowing. This is a number between 0 and 1 where 0 means no fade and 1 means a full fade.
    • --layout-tabs-overflowing: A CSS space toggle that is empty when tabs are overflowing and initial otherwise. If you are targeting only Chrome 137 or greater, you might want to use the if() function with left/right fade instead of this toggle.

    Example

    .lm_tabs {
      --layout-tab-width: 200px;
      --layout-tab-min-width: 100px;
      --layout-tab-overflow-fade-size: 20px;
      --layout-tab-overflow-shadow-color: rgba(0, 0, 0, 0.3);
    }

    Default Value

    'dropdown'

Settings

On This Page

Properties