Docking Layout CSS API Reference

All Common CSS variables:

    The following CSS selectors can be used to style DockingLayout:

    • smart-docking-layout - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
        • .smart-horizontal-hidden-items-container - a smartSplitter element used as the container for the horizontal autoHide items.
          • .smart-docking-layout-item-holder - smartSplitterItem element used as a container for the rest of the items.
            • .smart-vertical-hidden-items-container - a smartSplitter element used as a container fot the vertical autoHide items.
          • .smart-docking-layout-item-holder - a smartSplitterItem element used as a container for the rest of the items.
            • .smart-items-container - a smartSplitter element used as a container for the docked items.
              • .smart-placeholder - a smartSplitterItem element used as a placeholder when no docked items are present.
                • smart-tabs-window - a smartTabsWindow used as a placeholder item.
              • smart-tab-item - a smartTabItem element used to store the content of the placeholder.
        • .smart-tabs-window-feedback - a smartTabsWindow element used for item feedback during drag operation.
        • .smart-docking-layout-auto-hide-window - a smartTabsWindow element used as an autoHide window used to show the content of the selected autoHide items.
          • smart-tab-item - an empty smartTabItem element waiting for content.

    Demo

    <style>
            #dockinglayout{
                    --smart-color: #ccc;
                    --smart-font-size: 20px;
            }
    </style>