Reply To: Hide Header and Tab Bar in docking LayoutPanel

[admin]

Hi velocitytoo,
The header of each LayoutPanel inside the DockingLayout can be repositioned via it’s headerPosition property to any of the following sides ‘top’, ‘bottom’, ‘left’, ‘right’ and ‘none’. Setting headerPosition: ‘none’ will hide the header of the item. headerPosition property is part of SmartWindow API.
The Tab Bar section of a LayoutPanel item can also be repositioned to become hidden thanks to the tabPosition property. Setting tabPosition property to ‘hidden’ will hide the Tab Bar section of the LayoutPanel. tabPosition property is part of the SmartTabs API. However tabPosition property of the LayoutPanels will reset when the item becomes autoHidden because of the nature of the autoHidden items which needs the Tab Bar section to be visible and positioned on the corresponding side.
Here’s an example:

    const smartDockingLayout = document.querySelector('smart-docking-layout')
    smartDockingLayout.layout = [
        {
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    type: 'LayoutPanel',
                    label: 'Window A',
                    headerPosition: 'none',
                    tabPosition: 'hidden',
                    items: [{
                        id: 'itemA',
                        label: '#itemA',
                        content: 'Content of item with id "itemA"'
                    }]
                }
            ]
        }
    ];

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com