Tab Control: Adaptivity

Zurück: Demo-Übersicht

Status: [Live]. Referenz: DevExpress ASPxPageControl Adaptive-Modus (Tabs überlaufen in ein „Mehr…„-Menü).

Tab-Control- Basiskontrakt bereits verstanden.

Überläuft der Tab-Strip die verfügbare Breite, wandern die am weitesten rechts stehenden Köpfe hinter einen „Mehr …“-Knopf (scripts/tabs.js, ResizeObserver) — der aktive Kopf bleibt immer sichtbar.

Im Panels-Modus automatisch aktiv; Navigations-Strips opten per data-wk-tabs-overflow-Attribut am <ul class="wk-tabs"> ein.

Relevant, sobald ein Konsument mehr Tabs zeigt, als in die verfügbare Breite passen.

Unterhalb verfügbarer Breite verschwinden die am weitesten rechts stehenden Tabs hinter einem „Mehr …„-Kopf, der beim Klick ein Menü im Kontextmenü-Look öffnet (role=„menu“/menuitem); die Wahl eines Eintrags klickt den echten, versteckten Tab-Kopf — ein Code-Pfad, kein zweiter Aktivierungsweg. Der jeweils aktive Tab-Kopf wird nie versteckt.

No-JS-Fallback: alle Tabs bleiben nebeneinander sichtbar und brechen um (flex-wrap) — kein „Mehr…“-Menü ohne JavaScript, da es sonst unerreichbare Tabs erzeugen würde.

Siehe Grundlagen → Panels-Modus — Overflow braucht dort keinen zusätzlichen Parameter.

• Die Breitenmessung reserviert Platz für den „Mehr …„-Kopf — bei extrem schmalen Containern kann außer dem aktiven Kopf alles ins Menü wandern.

Das „Mehr …“-Menü ist tastaturbedienbar (Fokus auf ersten Eintrag, Enter/Escape) — dasselbe Muster wie das Kontextmenü der Bibliothek.

Entfällt.

• Demo-Übersicht — alle Kategorien
• FluentUI: Öffentliche Helper-API — Kontextmenü-Muster, das die Umsetzung wiederverwendet