ToolbarActions

shadow

Element ToolbarActions slúži ako obaľovací kontajner pre tlačidlá vložené do elementu Toolbar a zoskupuje tak rôzne akcie toolbaru do jedného celku.

wje-toolbar-actions podporuje responzívne zbaľovanie akcií cez atribút breakpoint. Po jeho prekročení sa tlačidlá presunú do overflow menu s tromi bodkami. Ak komponent už obsahuje vlastný wje-dropdown, overflow položky sa doplnia priamo do jeho menu a oddelia sa cez wje-divider.

Predvolene sa do overflow započítajú priame wje-button prvky. Vlastné akcie alebo iné elementy je možné pridať do rovnakého mechanizmu označením atribútom data-toolbar-action.

Ak sa do overflow menu presunie ikonkové tlačidlo bez viditeľného textu, položka v menu použije čitateľný label z atribútu aria-label, title, label, data-label alebo tooltip. Pre ikonkové akcie preto vždy nastavte aspoň aria-label, aby bol text v menu aj prístupnosť jednoznačné.

note

Pre viac informácií o použití ToolbarActions prejdite do dokumentácie elementu Toolbar.

Kedy použiť

Použite wje-toolbar-actions 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

cloneActionMenuNode

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

normalizeActionMenuIconSlot

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

getActionLabel

Popis	Vráti action label z aktuálneho stavu komponentu.
Signatúra	(action: HTMLElement) => string

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.