Accessing the Tab

There are two ways to access an instance of a Tab object. Either by traversing the item-tree, e.g.

tab = myLayout.root.contentItems[0].header.tabs[1];

or, more commonly, via a container. The tricky bit though is that GoldenLayout changes the tab that’s associated with a component whilst it is dragged around the layout. So in order to manipulate the tab, we have to listen to the container’s tab event.

container.on('tab',function( tab ){
tab.element.append( counter );});

To put it into perspective, here's what the essential bits of our example-component look like:

Please note that the counter's DOM element (the orange bubble with the number) is only created once and then moved to every new tab that's created. This way we don't have to rebind events.
Another note-worthy bit is the css. Our bubble should be a bit darker when its tab isn't selected. This can be done by checking for an .lm_active class on the tab.