Hi Jozef,
By default when you drag and drop a panel item inside the DockingLayout, a new Panel is created and the dragged item is placed inside. Since the new Panel belongs only to that item, the label of the Panel is set to match the label of the dragged item.
Regarding the missing tabs close button on the newly created Panel from the dragged item, that is an issue that we will be fixing for our next release which is expected in the end of this month.
Also we have a solution on how to achieve the functionality you want to.
const dockinglayout = document.querySelector('smart-docking-layout');
dockinglayout.addEventListener('stateChange', function (event) {
const detail = event.detail;
if(['dock', 'float'].indexOf(detail.type) > -1 && detail.item.items.length === 1){
event.detail.item.label= '';
event.detail.item.tabCloseButtons=true;
}
})
We use the ‘stateChange’ event to add an empty string label to the item and to add the close button for the tab.
Also we check if the event is ‘float’ or ‘dock’ because these are responsible for drag and drop and we also check if this is a new tab because if we don’t have this check a window which has a header with some text it will be set it to empty string.
Let me know if that works for you and thank you for your feedback!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/
.
