Tabs

the Tabs-Component ermoglicht the Organisation from Inhalten in separate, leicht zugangliche Abschnitte. them ist besonders nutzlich, um Platz to sparen and verwandte contents ubersichtlich to gruppieren.

Installation

the Tabs-Component ist Teil the Casoon UI Library.

# Installation the gesamten Bibliothek
npm install @casoon/ui-lib

Import

/* Import aller UI-Components */
@import '@casoon/ui-lib/ui.css';

/* or only the Tabs-Component */
@import '@casoon/ui-lib/ui/components/tabs.css';

Basic Usage

<div class="tabs">
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab active" role="tab" aria-selected="true" id="tab-1" aria-controls="panel-1">
      Tab 1
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-2" aria-controls="panel-2">
      Tab 2
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-3" aria-controls="panel-3">
      Tab 3
    </button>
  </div>
  <div class="tabs__panels">
    <div class="tabs__panel active" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
      content for Tab 1
    </div>
    <div class="tabs__panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
      content for Tab 2
    </div>
    <div class="tabs__panel" role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
      content for Tab 3
    </div>
  </div>
</div>

content for Tab 1

Hier ist a Exampletext for den ersten Tab. these contents become angezeigt, if Tab 1 aktiv ist.

Variants

Tabs with icons

<div class="tabs">
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab active" role="tab" aria-selected="true" id="tab-1" aria-controls="panel-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        <polyline points="9 22 9 12 15 12 15 22"></polyline>
      </svg>
      Home
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-2" aria-controls="panel-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <circle cx="12" cy="10" r="3"></circle>
        <path d="M7 20.66l2-3.26"></path>
        <path d="M17 20.66l-2-3.26"></path>
        <path d="M14.5 14.5l-2.5 2"></path>
        <path d="M9.5 14.5l2.5 2"></path>
      </svg>
      Einstellungen
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-3" aria-controls="panel-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
        <circle cx="12" cy="7" r="4"></circle>
      </svg>
      Profil
    </button>
  </div>
  <div class="tabs__panels">
    <!-- panels hier -->
  </div>
</div>

Home-contents

Willkommen on the Startseite deiner Application.

Vertikale Tabs

<div class="tabs tabs--vertical">
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab active" role="tab" aria-selected="true" id="tab-1" aria-controls="panel-1">
      Tab 1
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-2" aria-controls="panel-2">
      Tab 2
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-3" aria-controls="panel-3">
      Tab 3
    </button>
  </div>
  <div class="tabs__panels">
    <div class="tabs__panel active" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
      content for Tab 1
    </div>
    <div class="tabs__panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
      content for Tab 2
    </div>
    <div class="tabs__panel" role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
      content for Tab 3
    </div>
  </div>
</div>

content for Tab 1

Vertikale Tabs eignen oneself besonders for komplexe Forme or umfangreiche Einstellungen.

Pills-Style

<div class="tabs tabs--pills">
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab active" role="tab" aria-selected="true" id="tab-1" aria-controls="panel-1">
      Tab 1
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-2" aria-controls="panel-2">
      Tab 2
    </button>
    <button class="tabs__tab" role="tab" aria-selected="false" id="tab-3" aria-controls="panel-3">
      Tab 3
    </button>
  </div>
  <div class="tabs__panels">
    <!-- panels hier -->
  </div>
</div>

content for Tab 1

Pills-Tabs bieten a modernes design and eignen oneself for Anwendungen with einem leichten, freundlichen Erscheinungsbild.

Usagesbeispiele

Produkt-Detailseite

<div class="product-details">
  <div class="tabs">
    <div class="tabs__list" role="tablist">
      <button class="tabs__tab active" role="tab" aria-selected="true" id="details-tab" aria-controls="details-panel">
        Details
      </button>
      <button class="tabs__tab" role="tab" aria-selected="false" id="specs-tab" aria-controls="specs-panel">
        Spezifikationen
      </button>
      <button class="tabs__tab" role="tab" aria-selected="false" id="reviews-tab" aria-controls="reviews-panel">
        Bewertungen
      </button>
    </div>
    <div class="tabs__panels">
      <div class="tabs__panel active" role="tabpanel" id="details-panel" aria-labelledby="details-tab">
        <h3>Produktbeschreibung</h3>
        <p>Ausfuhrliche Description des Produkts...</p>
      </div>
      <div class="tabs__panel" role="tabpanel" id="specs-panel" aria-labelledby="specs-tab" hidden>
        <h3>Technische Daten</h3>
        <ul>
          <li>Masse: 10 x 15 x 5 cm</li>
          <li>Gewicht: 250g</li>
          <li>Material: Aluminium</li>
        </ul>
      </div>
      <div class="tabs__panel" role="tabpanel" id="reviews-panel" aria-labelledby="reviews-tab" hidden>
        <h3>Kundenbewertungen</h3>
        <div class="reviews-list">
          <!-- Bewertungen hier -->
        </div>
      </div>
    </div>
  </div>
</div>

Produktbeschreibung

this hochwertige Produkt wurde for maximale Leistung and Langlebigkeit entwickelt. it verfugt over a ergonomische Form and a modernes design, the oneself nahtlos in jede Umgebung einfugt.

the intuitive Bedienung and the vielseitigen functions machen it zur idealen Wahl for anspruchsvolle Anwender.

Einstellungen-panel

<div class="settings-panel">
  <h2>Kontoeinstellungen</h2>
  <div class="tabs tabs--vertical">
    <div class="tabs__list" role="tablist">
      <button class="tabs__tab active" role="tab" aria-selected="true" id="profile-tab" aria-controls="profile-panel">
        <svg><!-- Profil-icon --></svg>
        Profil
      </button>
      <button class="tabs__tab" role="tab" aria-selected="false" id="security-tab" aria-controls="security-panel">
        <svg><!-- Sicherheits-icon --></svg>
        Sicherheit
      </button>
      <button class="tabs__tab" role="tab" aria-selected="false" id="notifications-tab" aria-controls="notifications-panel">
        <svg><!-- Benachrichtigungs-icon --></svg>
        notifications
      </button>
      <button class="tabs__tab" role="tab" aria-selected="false" id="billing-tab" aria-controls="billing-panel">
        <svg><!-- Zahlungs-icon --></svg>
        Zahlungen
      </button>
    </div>
    <div class="tabs__panels">
      <div class="tabs__panel active" role="tabpanel" id="profile-panel" aria-labelledby="profile-tab">
        <form class="settings-form">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" value="Max Mustermann">
          </div>
          <div class="form-group">
            <label for="email">E-Mail</label>
            <input type="email" id="email" value="max@example.com">
          </div>
          <button type="submit" class="button button--primary">save</button>
        </form>
      </div>
      <!-- additional panels -->
    </div>
  </div>
</div>

Kontoeinstellungen

Name

E-Mail

Customization

the Tabs-Component kann with CSS Variables angepasst become:

:root {
  --tabs-border: 1px solid var(--color-neutral-200);
  --tabs-border-radius: var(--radius-m);
  --tabs-background: var(--color-white);
  
  --tabs-tab-padding: 0.75rem 1rem;
  --tabs-tab-color: var(--color-neutral-700);
  --tabs-tab-font-weight: 500;
  --tabs-tab-active-color: var(--color-primary-500);
  --tabs-tab-hover-color: var(--color-neutral-900);
  --tabs-tab-hover-bg: var(--color-neutral-50);
  
  --tabs-tab-border-active: 2px solid var(--color-primary-500);
  
  --tabs-panel-padding: 1rem;
  
  /* Pills-Variante */
  --tabs-pills-background: var(--color-neutral-100);
  --tabs-pills-active-bg: var(--color-primary-500);
  --tabs-pills-active-color: var(--color-white);
  --tabs-pills-border-radius: var(--radius-full);
  
  /* Vertikale Tabs */
  --tabs-vertical-width: 200px;
  --tabs-vertical-tab-border-active: 3px solid var(--color-primary-500);
}

Accessibility

• Verwende korrekte ARIA-attributes (role="tablist", role="tab", role="tabpanel")
• Stelle sicher, that Tabs with the Tastatur bedient become can (Pfeiltasten zum Navigieren)
• Behalte den Fokus im aktiven Tab, if between Tabs gewechselt wird
• Verwende aria-selected="true" for den aktiven Tab
• Setze hidden on inaktive panels, um them from Screenreadern auszuschliessen
• Verwende aria-controls and aria-labelledby zur Verknupfung from Tabs and panels

JavaScript-Example

Hier ist a einfaches JavaScript-Example, um the Tabs funktionsfahig to machen:

document.addEventListener('DOMContentLoaded', function() {
  const tabLists = document.querySelectorAll('.tabs__list');
  
  tabLists.forEach(tabList => {
    const tabs = tabList.querySelectorAll('.tabs__tab');
    const panels = tabList.closest('.tabs').querySelectorAll('.tabs__panel');
    
    tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => {
        // all Tabs and panels deactivate
        tabs.forEach(t => {
          t.classList.remove('active');
          t.setAttribute('aria-selected', 'false');
        });
        
        panels.forEach(panel => {
          panel.classList.remove('active');
          panel.hidden = true;
        });
        
        // Aktuellen Tab and panel activate
        tab.classList.add('active');
        tab.setAttribute('aria-selected', 'true');
        panels[index].classList.add('active');
        panels[index].hidden = false;
      });
      
      // Tastaturnavigation
      tab.addEventListener('keydown', (e) => {
        let targetTab;
        
        switch (e.key) {
          case 'ArrowRight':
            targetTab = tab.nextElementSibling || tabs[0];
            break;
          case 'ArrowLeft':
            targetTab = tab.previousElementSibling || tabs[tabs.length - 1];
            break;
          default:
            return;
        }
        
        e.preventDefault();
        targetTab.click();
        targetTab.focus();
      });
    });
  });
});

Browser-Kompatibilitat

the Tabs-Component ist with allen modernen Browsern kompatibel.

Function	Chrome	Firefox	Safari	Edge
Grundlegende Funktionalitat	✅	✅	✅	✅
flexbox-layout	29+	28+	9+	16+
CSS Variables	49+	31+	9.1+	15+