Tab Control: Adaptivity

Nazaj: predstavitveni pregled

Kaj se zgodi z zavihki, ki ne gredo več drug ob drugega: preselijo se v meni za prelivanje, namesto da bi se vrstica prelomila ali pomikala vodoravno.

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