ToolbarActions

shadow

The ToolbarActions element serves as a wrapper for the buttons inserted into the Toolbar element and thus groups the different toolbar actions into a single unit.

wje-toolbar-actions supports responsive action collapsing through the breakpoint attribute. When actions move into the overflow menu, direct wje-button elements are handled automatically. Custom actions can join the same mechanism by adding the data-toolbar-action attribute.

When an icon-only action without visible text is moved into the overflow menu, the menu item uses a readable label from aria-label, title, label, data-label, or tooltip. For icon-only actions, always provide at least aria-label so the menu text and accessibility name are clear.

note

For more information on using ToolbarActions, go to the [Toolbar] element documentation(./toolbar).

When to use

Use wje-toolbar-actions to compose a stable page layout with a clear content hierarchy.

When not to use

Do not use it to solve business logic or for stateful orchestration of components.

Accessibility

Preserve the semantics of the document (header, main, aside, footer) and the logical order of focusable elements.

Recommended practices

• Define desktop/mobile breakpoints first and then fine-tune the details.
• Prefer consistent spacing tokens over ad-hoc margin/padding values.
• For layouts with overflow, always test keyboard navigation and readers.

Attributes and properties

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é	-

Events

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

Methods

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

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 shadow parts

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

CSS custom variables

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

Slots

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