Toolbar Action

shadow

wje-toolbar-action groups action buttons in a toolbar and supports responsive collapsing with the breakpoint attribute. Below the breakpoint, actions move into the three-dot overflow menu. If the component already contains a custom wje-dropdown, overflow items are added directly to that menu and separated with wje-divider. The existing dropdown is connected reliably on page load, without requiring the menu to be opened or the viewport to change.

By default, direct wje-button elements participate in overflow behavior. To include another action type, mark it with data-toolbar-action and the component will include it in the same collapse and menu transfer mechanism. For icon-only buttons, overflow item text is derived from aria-label, title, label, data-label, or tooltip. Icons from slot="icon-only" or without a slot are automatically moved to slot="start" when copied into the menu, so overflow items stay visually aligned.

<wje-toolbar-action breakpoint="md" visible-items="1">
  <wje-button tooltip="Tiles">
    <wje-icon name="grid-dots"></wje-icon>
  </wje-button>
  <wje-button tooltip="Delete">
    <wje-icon slot="icon-only" name="trash"></wje-icon>
  </wje-button>
</wje-toolbar-action>

When to use

Use wje-toolbar-action 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

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