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>