Tab Control: Grundlagen

Zurück: Demo-Übersicht

Status: Navigations-Form [Live] (widgets::tabs()); client- seitiges Content-Panel-Umschalten ohne Reload ist [Live] (Abschnitt 7).

tabs() rendert heute einen Navigations-Tab-Strip: jeder Tab ist ein vollständiger Link auf eine andere Seite. Zielgruppe: Formulare/Ansichten, die in mehrere Reiter mit jeweils eigenem Server-State aufgeteilt sind (z. B. Table-Designer-Tabs „Spalten„/„Indizes“/„Constraints„).

• DokuWiki mit aktiviertem Plugin wkfluentui.
• helper_plugin_wkfluentui_widgets geladen über plugin_load('helper', 'wkfluentui_widgets').
• Jeder Tab braucht eine eigene, per URL erreichbare Ziel-Ansicht (kein Client-Panel-Umschalten in der aktuellen Ausbaustufe).

Navigation, nicht Panel-Umschalten: jeder Klick lädt die Zielseite neu — das ist beabsichtigt, kein fehlendes Feature. Der Erstkonsument (Table-Designer-Reiter) hält je Tab eigenen Server-State (unterschiedliche Formulare je Reiter), ein Reload ist dort korrekt. Ein echtes, client-seitiges Panel-Umschalten ist als eigener Vertrag spezifiziert (Abschnitt 7), nicht Teil der Live-Grundform.

/** @var helper_plugin_wkfluentui_widgets $widgets */
$widgets = plugin_load('helper', 'wkfluentui_widgets');
 
echo $widgets->tabs([
    ['key' => 'spalten',   'label' => 'Spalten',   'href' => wl($ID, ['tab' => 'spalten'])],
    ['key' => 'indizes',   'label' => 'Indizes',   'href' => wl($ID, ['tab' => 'indizes'])],
    ['key' => 'constraints', 'label' => 'Constraints', 'href' => wl($ID, ['tab' => 'constraints'])],
], 'spalten');

Falsch: einen key-Wert als zweiten Parameter übergeben, der zu keinem Tab passt, in der Erwartung, dass „der erste Tab“ als Fallback aktiv markiert wird. Kein Tab gilt dann als aktiv — keine Fehlermeldung, aber auch keine automatische Auswahl.

public function tabs(array $tabs, $active): string

Zusammenfassung: Rendert einen Navigations-Tab-Strip aus Tab- Definitionen; der aktuell aktive Tab wird per Schlüssel-Vergleich markiert.

Rückgabewert: string — <ul class="wk-tabs">…</ul>. Leerer String bei leerem $tabs.

$active (zweiter Methodenparameter, string): key des aktuell aktiven Tabs. String-Vergleich; kein Match markiert keinen Tab als aktiv.

<ul class="wk-tabs"> → je Tab <li class="wk-tabs__item"><a class="wk-tabs__link[ wk-tabs__link--active]">…</a></li>.

Der echte „Tab Control„ im DevExpress-Sinn (ASPxPageControl): mehrere vorgerenderte Content-Panels liegen alle im DOM, ein Klick auf einen Tab-Kopf blendet nur das passende Panel ein (hidden-Attribut auf den übrigen, scripts/tabs.js) — kein Server-Roundtrip.

• tabs($tabs, $active, ['mode' => 'nav'|'panels']) (Default nav = unverändertes Navigations-Verhalten, byte-identisch zur Vorversion).
• Bei panels: $tabs-Einträge tragen zusätzlich 'panelHtml' => string (vertrauenswürdiges HTML, wie controlHtml bei propertyGrid()); jeder Tab-Kopf rendert als <button type="button" role="tab"> statt <a> — kein href mehr, da nichts navigiert. Der Container (.wk-tabcontrol) trägt role="tablist"/role="tabpanel"-Verdrahtung mit deterministischen ID-Paaren; $opts['id'] benennt den Control (Default: aus den Tab-Keys abgeleitet, kollisionsfrei bei mehreren Controls je Seite).
• No-JS-Fallback bei panels: alle Panels sind gleichzeitig sichtbar untereinander, mit dem jeweiligen Tab-Titel als <h4> davor — erst die JS-Schicht (js-enabled-Klasse) blendet inaktive Panels und die Doppel-Titel aus; ohne JavaScript ist kein Inhalt unerreichbar.

echo $widgets->tabs([
    ['key' => 'spalten', 'label' => 'Spalten', 'panelHtml' => $spaltenHtml],
    ['key' => 'indizes', 'label' => 'Indizes', 'panelHtml' => $indizesHtml],
], 'spalten', ['mode' => 'panels']);

• Tab-Overflow („Mehr…“-Menü bei schmalem Container) — Details: Adaptivity.
• panelHtml wird im nav-Modus ignoriert; href im panels-Modus ebenso.

• Vollständiger Überblick: Accessibility (konsolidiert, nicht hier dupliziert).
• Als reine Link-Navigation trägt der Tab-Strip bewusst kein role=„tablist“ — diese Rolle wäre für reine Navigation nicht korrekt und würde Screenreadern fälschlich ein Panel-Umschalt-Widget signalisieren.
• Ohne JavaScript vollständig bedienbar (native Link-Semantik).

Symptom: kein Tab erscheint als aktiv markiert.

Ursache: der übergebene $active-Wert stimmt mit keinem key in $tabs überein (Tippfehler oder falscher Request-Parameter-Name).

Lösung: $active gegen die tatsächlichen key-Werte in $tabs prüfen.

• Demo-Übersicht — alle Kategorien
• FluentUI: Öffentliche Helper-API — vollständiger Methodenvertrag
• FluentUI: Vertical Grid (Property Grid) — Demo-Übersicht — häufigster Konsument