Skip to main content

Tabs

Basic Tabs

 

Academic Journals content...
Business Publications content...
Books & Chapters content...
Conferences content...
Track Chairs content...
Case Studies content...

Sample Code

<div class="basic-tabs">
  <div class="basic-tabs-nav surface-third">
    <button class="basic-tab active" data-tab="academic">Academic Journals</button>
    <button class="basic-tab" data-tab="business">Business Publications</button>
    <button class="basic-tab" data-tab="books">Books & Chapters</button>
    <button class="basic-tab" data-tab="conferences">Conferences</button>
    <button class="basic-tab" data-tab="track">Track Chairs</button>
    <button class="basic-tab" data-tab="cases">Case Studies</button>
  </div>
  <div class="basic-tabs-content">
    <div class="basic-tab-panel active" id="academic">Academic Journals content...</div>
    <div class="basic-tab-panel" id="business">Business Publications content...</div>
    <div class="basic-tab-panel" id="books">Books & Chapters content...</div>
    <div class="basic-tab-panel" id="conferences">Conferences content...</div>
    <div class="basic-tab-panel" id="track">Track Chairs content...</div>
    <div class="basic-tab-panel" id="cases">Case Studies content...</div>
  </div>
</div>

Empty Template

<div class="basic-tabs">
  <div class="basic-tabs-nav surface-third">
    <button class="basic-tab active" data-tab="tab1">Tab 1</button>
    <button class="basic-tab" data-tab="tab2">Tab 2</button>
    <button class="basic-tab" data-tab="tab3">Tab 3</button>
  </div>
  <div class="basic-tabs-content">
    <div class="basic-tab-panel active" id="tab1">Content 1</div>
    <div class="basic-tab-panel" id="tab2">Content 2</div>
    <div class="basic-tab-panel" id="tab3">Content 3</div>
  </div>
</div>

Style options (add them to the outer basic-tabs element):

ClassEffect
(default)Pill style, tabs stretch to fill the width
basic-tabs-cardCard buttons with shadows
basic-tabs-minimalClean, subtle style

Text override for light surfaces (add it to basic-tabs-nav):

ClassEffect
basic-tabs-text-darkDark text on inactive tabs

Surface of the tab bar: add a surface class such as surface-third (or any gradient-NN class) to basic-tabs-nav. The footer navigation under each panel copies these classes automatically.

Side Tabs

 

Vertikale Tab-Leiste aus weißen Pillen – z. B. als linke Navigation einer Seite mit mehreren Bereichen (erster Einsatz: die Lab-Seite im Fablab-LMS). Alle Pillen haben die Rahmenfarbe der Skin (--color-border), die kleine Rundung (--radius-md) und Sekundärtext (--color-text-secondary). Hover: die Pille hebt sich um einen Pixel mit weichem Schatten, der Text wird türkis (--color-primary) – kein Skalieren, kein Fett, der Rahmen bleibt. Aktiv: Text in dunklem Türkis (--color-primary-deep). .is-open markiert einen Elterntab, dessen Untertabs gezeigt werden; Untertabs sind kleiner und eingerückt, ein Bereichskopf (.side-tabs__head) ist eine Pille ohne Link. Unter 860 px wird die Leiste zur zentrierten, umbrechenden Zeile. Das Umschalten der Inhalte übernimmt die Seite (z. B. per Hash), die Komponente liefert nur die Optik.

Sample Code

<nav class="side-tabs" aria-label="...">
  <ul>
    <li><a class="side-tabs__item is-active" href="#overview">Overview</a></li>
    <li><a class="side-tabs__item is-open" href="#material">Material</a>
      <ul class="side-tabs__sub">
        <li><a class="side-tabs__item side-tabs__item--sub" href="#slides">Slides</a></li>
        <li><a class="side-tabs__item side-tabs__item--sub" href="#worksheets">Worksheets</a></li>
      </ul>
    </li>
    <li><a class="side-tabs__item" href="#cockpit">Cockpit</a></li>
    <li><span class="side-tabs__head">Admin</span>
      <ul class="side-tabs__sub">
        <li><a class="side-tabs__item side-tabs__item--sub" href="#edit">Edit</a></li>
      </ul>
    </li>
  </ul>
</nav>

States:  .is-active (selected)  .is-open (parent whose sub tabs are shown)
Library: upmarkit_theme/side_tabs  (css/components/side-tabs.css, loaded globally)
Tokens:  --color-border (always)  --color-text-secondary (text)
         --color-primary (hover text)  --color-primary-deep (active text)  --radius-md