HTML Elements Forums Tabs Change tab title

This topic contains 3 replies, has 3 voices, and was last updated by  Anonymous 1 month, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #100447

    Anonymous

    How do I change the titles of existing tabs from javascript, without resorting to direct manipulation of the DOM by targeting the div that contains the title? Changing the “label” property on a <smart-tab-item> after it has been added to a <smart-tabs> does not appear to change the displayed tab title.

    #100448

    Anonymous

    Hello Starlight Sparkle,

    Thank you for your interest. The proper way to update a tab item’s label and/or content is by calling the method update. Here is an example of setting only the title:

    document.getElementById('tabs').update(0, 'Updated title');

    If you wish to change the content, too, pass a third argument, e.g.:

    document.getElementById('tabs').update(0, 'Updated title', 'Updated content');

    Here is also a demo that showcases this method among others: https://www.htmlelements.com/demos/tabs/insert-remove-update/.

    Best regards,
    Dimitar

    Smart HTML Elements Team
    https://www.htmlelements.com

    #100458

    Anonymous

    Damn, can’t believe I missed that in the documentation. Sorry and thanks!

    But on a related note, is it possible to set the default label that will be used by new tabs created through the built-in “new tab” button?

    #100463

    Anonymous

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.