Hide Header and Tab Bar in docking LayoutPanel

[admin]

Hello, Is it possible to hide the Header and/or 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

[admin]

Thanks, it works!

[admin]

Using the tabPosition: 'hidden' setting successfully hides the tab bar when the docking LayoutPanel is first shown. However, if the LayoutPanel is then dragged and docked to another position in the Docking Layout, the tab bar is again (incorrectly) shown. Is there any way to permanently disable the tab bar in a LayoutPanel from displaying? The reason we are trying to do this is because we will only ever have a single tab within the LayoutPanel, so showing the tab bar wastes space and is unnecessary. I tried adding content directly to the LayoutPanel using a content field, but that does not work, so it appears that the only way to add content to a LayoutPanel is to create a LayoutPanelItem in the LayoutPanel’s items field, then setting content there? Is there any other way to have content inside a LayoutPanel and completely and permanently disable the LayoutPanel’s tab bar?

[admin]

Hi velocitytoo,
DockingLayout items represent Windows with Tabs. So in order to change the content of a DockingLayout item there’s a method called update that accepts three arguments:

• index – represents the numeric index of the TabItem which content should be changed.
• label – is a string and represents the Label of the TabItem that will be displayed in the Tab bar
• content – is a string with the new content that will be added inside the TabItem.

Here’s an example:

const dockingLayout = document.querySelector('smart-docking-layout'),
 dockingLayoutItems = dockinglayout.items;
//Passing 'undefined' as a second argument will ignore the label and replace only the content of the target TabItem
dokcingLayoutItems[0].update(0, undefined, 'This text will be the new content for the first Tab inside the first LayoutPanel of the DockingLayout');

The update method is the same as in SmartTabs component. Here’s a link to the Tabs API.
Another approach on changing the content is to directly set the ‘content’ property of the desired TabItem. In order to do so you have to get a reference to the TabItem. This can be accomplished by calling the getter ‘items’ on the LayoutPanel. By doing so you will get a list of all present TabItems inside it. Here’s an example:

const dockingLayout = document.querySelector('smart-docking-layout'),
 firstLayoutPanel = dockinglayout.items[0];
//First TabItem inside the LayoutPanel
firstLayoutPanel.items[0].content = 'The New content of the first TabItem inside the LayoutPanel';

Unfortunately the tabPosition being reset when re-docking the item is an issue that will be fixed in our next release.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts