Tab

The component show a simple tab system.

The tab system essentially consists of a container with the block class .tab, and with a list (.tab__list) of items (.tab__items) in it. Additional content (e.g. Forms or Buttons) can be added in the container before and after the actual tabs. These addons must be bundled in the .tab__before and .tab__after container.

The following code examples shows how to use tab:

<div class="tab">
  <div class="tab__list">
    <div class="tab__item">Tab 1</div>
    <div class="tab__item">Tab 2</div>
  </div>
</div>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .tab - required the block that represent the tab component and contains all elements
• .tab__list - required this list contains the list of items and handle the before/after elements
• .tab__item - required a single tab item with text within
• .tab__before - a space before the item list with optional content
• .tab__after - a space after the item list with optional content
• Modifier
  • .tab--no-initial-active This modifier prevents the selection of an item while page load, even if some item has the active parameter.
  • .tab--suppress-selection This modifier prevents automatically selection of an item while page load.
  • .tab--store-active-item This modifier stores the state of an tab and restore it after page load. The state is stored in the session storage of the browser.
  • .tab__item--active There is always a tab item to be active. If this modifier is set initially, the corresponding item will also be active. If this value is not set, the first item in the list is set to active during initialization.
  • .tab__item--disable If an item is set to disable, it cannot be selected. it cannot be activated either, not even during initialization.
  • .tab--secondary - theme color variant
  • .tab--card - theme color variant
  • .tab--chart - theme color variant
  • .tab--inner-card - theme color variant
  • .tab--pro - f.net PRO theme color variant
  • .tab--pro-invert - f.net PRO theme color variant, only works with dark backgrounds

The tabs can be used in different ways.

• You can combine the tabs with a Tab Region to display different content.
• The tab items can be hyperlinks which, when clicked, load another page (this method is not recommended).
• With the help of the observer pattern you can listen to a click on a tab item and react dynamically with custom code.

Basic Example:

Theme

In the following we show additional variants of tabs, which are exclusively for the respective themes.

finanzen.net Secondary

In addition to the standard tabs design, we also added a second design exclusive for finnet. This uses the class modifier .tab--secondary.

The secondary tabs are used on a second level. An example of how it use is displayed in the region tab.

f.net PRO

A special design for the f.net PRO theme.

finanzen.net Chart

A design that is used special above charts in finanzen.net.

finanzen.net Card & Inner Card

The Card & Inner Card design is used for finanzen.net and multiple inner placed. See more in Tab Region - finanzen.net Tab Cards.

Card Example:

Inner Card Example:

Icons & Logo

You can add Logos and Icons into the .tab__item. Here is an example with finanzen.net designs.

Observer

The tab system use the Observer Pattern. The tab is a subject and notify all observers, if an tab item is changed to active (for example by clicking).

type Tab = TComponent;
type TabItem = HTMLElement;
type SubjectData = { tab: Tab, activeItem: TabItem };

/**
 * simplified excerpt from tab-handler.ts
 */
class TabHandler extends Subject<SubjectData> {
  // ...
  activated(tab: Tab, tabItem: TabItem): void {
    this.deactivatedAll(tab, [tabItem]);
    tabItem.classList.add('tab__item--active');
    this.notifyObserver(tab);
  }

  private notifyObserver(tab: Tab): void {
    this.notify({ tab, activeItem: this.getActiveTabItem(tab) });
  }
  // ...
}

You can listen to the notification by adding into the tab as an observer.

import { styleGuide, Observer } from '@finanzen-net/style-guide';

/**
 * This is what your code should look like
 */
class YourClass extends Observer {
   update({tab, activeItem}) {
     console(`In the tab "${tab.id}" the item "${activeItem.innerText}" was activated`);
   }
}

const yourClass = new YourClass();
styleGuide.tabHandler.addObserver(yourClass);