Reply To: Hide Header and Tab Bar in docking LayoutPanel

[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