Extending Tabs & Titles

Strelit Layout makes it easy to add new functionality to pretty much everything - and tabs are no exception. This tutorial shows how to add a simple counter to a tab, for instance to show new messages.

Interactive Example

Accessing the Tab

There are two primary ways to access a Tab instance in Strelit UI Kit:

1. Traversing the layout hierarchy: Accessing a Stack’s header tabs array (e.g. stack.header.tabs[0]).
2. Listening on the component container: When a component is docked, moved, or restored, its associated tab may be recreated. Listening to the container’s tab event provides the active tab instance reliably:

container.on('tab', (tab) => {
  tab.element.appendChild(counter);
});

Complete Implementation

Here is the full implementation using modern TypeScript / ES module conventions:

myLayout.registerComponentFactoryFunction('example', (container) => {
  // 1. Create message counter badge once
  const counter = document.createElement('span');
  counter.className = 'messageCounter';
  counter.textContent = '3';

  // 2. Attach counter badge to tab element whenever the tab is bound
  container.on('tab', (tab) => {
    tab.element.appendChild(counter);
  });

  // 3. Render component content inside container element
  container.element.innerHTML = '<div class="content">Messages stream active.</div>';
});

Because the counter element is preserved in memory and attached whenever tab fires, badge counts and event listeners persist even when tabs are dragged into new stacks or reordered.

Styling the Badge

Style the active vs inactive state using the .lm_active tab modifier:

.lm_tab .messageCounter {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  margin-left: 6px;
}

.lm_tab.lm_active .messageCounter {
  background: var(--accent-gold);
  color: #0b1220;
  font-weight: bold;
}