Toolbar Action

shadow

Stránka pre wje-toolbar-action bola automaticky doplnená, aby dokumentácia pokrývala aktuálnu verziu komponentov. Detailné návody na použitie a odporúčania doplníme v ďalšej obsahovej fáze.

wje-toolbar-action zoskupuje akčné tlačidlá v toolbare a podporuje responzívne zbaľovanie cez atribút breakpoint. Po jeho prekročení sa akcie presunú do overflow menu s tromi bodkami. Ak už komponent obsahuje vlastný wje-dropdown, overflow položky sa doplnia priamo do jeho menu a oddelia sa cez wje-divider. Napojenie na existujúci dropdown prebehne spoľahlivo už po načítaní stránky, bez potreby otvoriť menu alebo meniť šírku okna.

Štandardne sa do overflow správajú všetky priame wje-button prvky. Ak potrebujete pridať aj iný typ akcie, označte ho atribútom data-toolbar-action a komponent ho zahrnie do rovnakého mechanizmu zbalenia aj presunu do menu.

Kedy použiť

Použite wje-toolbar-action na skladanie stabilného rozloženia stránky s jasnou hierarchiou obsahu.

Kedy nepoužiť

Nepoužívajte ho na riešenie biznis logiky ani na stavovú orchestráciu komponentov.

Prístupnosť

Zachovajte semantiku dokumentu (header, main, aside, footer) a logické poradie fokusovateľných prvkov.

Odporúčané postupy

• Najprv definujte desktop/mobile breakpoints a až potom dolaďujte detaily.
• Preferujte konzistentné spacing tokeny pred ad-hoc margin/padding hodnotami.
• Pri layoutoch s overflow vždy otestujte klávesnicovú navigáciu a čítačky.

Atribúty a vlastnosti

breakpoint

Popis	Nastavuje textovú hodnotu uloženú vo voľbe breakpoint.
Atribút	breakpoint
Typ	string
Predvolené	-

maxItems

Popis	Nastavuje číselnú hodnotu používanú vo voľbe max-items.
Atribút	max-items
Typ	number｜string
Predvolené	0

visibleItems

Popis	Nastavuje číselnú hodnotu používanú vo voľbe visible-items.
Atribút	visible-items
Typ	number｜string
Predvolené	-

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

scheduleOverflow

Popis	Spustí metódu scheduleOverflow na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(doubleFrame?: boolean) => void

getActions

Popis	Vráti actions z aktuálneho stavu komponentu.
Signatúra	() => Array<HTMLElement>

getAssignedElements

Popis	Vráti assigned elements z aktuálneho stavu komponentu.
Signatúra	() => Array<HTMLElement>

getExistingDropdown

Popis	Vráti existing dropdown z aktuálneho stavu komponentu.
Signatúra	() => HTMLElement｜null

observeExistingDropdown

Popis	Spustí metódu observeExistingDropdown na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

getOverflowDropdown

Popis	Vráti overflow dropdown z aktuálneho stavu komponentu.
Signatúra	() => HTMLElement

getOverflowMenu

Popis	Vráti overflow menu z aktuálneho stavu komponentu.
Signatúra	() => HTMLElement｜null

getVisibleLimit

Popis	Vráti visible limit z aktuálneho stavu komponentu.
Signatúra	() => number

shouldCollapseByBreakpoint

Popis	Spustí metódu shouldCollapseByBreakpoint na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => boolean

isCollapsedByBreakpoint

Popis	Overí, či je collapsed by breakpoint aktuálne pravda.
Signatúra	() => boolean

getBreakpointWidth

Popis	Vráti breakpoint width z aktuálneho stavu komponentu.
Signatúra	() => number｜null

applyOverflow

Popis	Spustí metódu applyOverflow na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

restoreManagedActions

Popis	Spustí metódu restoreManagedActions na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(actions: Array<HTMLElement>) => void

restoreManagedOverflowContent

Popis	Spustí metódu restoreManagedOverflowContent na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

createMenuItem

Popis	Vytvorí menu položku a pripojí ho do štruktúry komponentu.
Signatúra	(action: HTMLElement) => HTMLElement

createOverflowDivider

Popis	Vytvorí overflow divider a pripojí ho do štruktúry komponentu.
Signatúra	() => HTMLElement

measureActionMetrics

Popis	Spustí metódu measureActionMetrics na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => {count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}

measureMoreWidth

Popis	Spustí metódu measureMoreWidth na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => number

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.