Tab Control: Adaptivity

Nazaj: predstavitveni pregled

Stanje: [Live]. Referenca: DevExpress-ov adaptivni način ASPxPageControl (zavihki se prelivajo v meni „Več…„).

osnovna pogodba Tab Controla že razumljena.

Če trak zavihkov preliva razpoložljivo širino, se najbolj desno postavljeni naslovi premaknejo za gumb „Več …“ (scripts/tabs.js, ResizeObserver) — aktivni naslov ostane vedno viden.

Samodejno aktivno v načinu panelov; navigacijski trakovi to omogočijo prek atributa data-wk-tabs-overflow na <ul class="wk-tabs">.

Relevantno, ko porabnik prikaže več zavihkov, kot jih je moč umestiti v razpoložljivo širino.

Pod razpoložljivo širino najbolj desno postavljeni zavihki izginejo za naslov „Več …„, ki ob kliku odpre meni v videzu kontekstnega menija (role=„menu“/menuitem); izbira vnosa klikne pravi, skriti naslov zavihka — ena sama pot kode, brez druge poti aktivacije. Trenutno aktivni naslov zavihka se nikoli ne skrije.

Rezervni način brez JS: vsi zavihki ostanejo vidni drug ob drugem in se prelomijo (flex-wrap) — brez menija „Več…“ brez JavaScripta, saj bi sicer ustvaril nedosegljive zavihke.

Glej osnove → način panelov — prelivanje tam ne potrebuje dodatnega parametra.

• Merjenje širine rezervira prostor za naslov „Več …„ — pri izjemno ozkih vsebnikih lahko vse razen aktivnega naslova preide v meni.

Meni „Več …“ je upravljiv s tipkovnico (fokus na prvem vnosu, Enter/Escape) — enak vzorec kot kontekstni meni knjižnice.

Se ne uporablja.

• predstavitveni pregled — vsaka kategorija
• FluentUI: javni API pomočnika — vzorec kontekstnega menija, ki ga izvedba znova uporabi