Tab Control: Adaptivity

Zurück: Demo-Übersicht

Was mit Reitern geschieht, die nicht mehr nebeneinander passen: sie wandern in ein Überlaufmenü, statt die Leiste umbrechen oder waagerecht scrollen zu lassen.

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