JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Tabs › Change tab title › Reply To: Change tab title
October 28, 2019 at 8:22 am
#100463
admin
Keymaster
Hi Starlight Sparkle,
the newly added item via the “addNewTab” button always has a label of “New Tab” and it’s not possible to change that via API. However since the new item becomes the selected item by default you can accomplish the same result by binding to the change
event and calling update
method on it. Here’s how to do it:
document.querySelector('smart-tabs').addEventListener('change', function (event) {
const newTabIndex = event.detail.index;
//Get all tab items inside the element
const allTabItems = this.querySelectorAll('smart-tab-item');
//Update the label
if (allTabItems[newTabIndex].label === 'New Tab') {
this.update(newTabIndex, 'New Custom Label');
}
});
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com