Toolbar

shadow

Element Toolbar je flexibilný kontajner určený na zobrazovanie rôzneho obsahu organizovaným spôsobom, ktorý sa zvyčajne používa v hornej časti webových aplikácií alebo stránok. Môže obsahovať tlačidlá, navigáciu, pole vyhľadávania, a iné. Podporuje zarovnanie obsahu a tiež ho možno prilepiť k hornej časti obrazovky.

Súčasťou Toolbar je element ToolbarActions, ktorý zoskupuje rôzne akcie v podobe tlačidiel do jedného celku.

Základné použitie

Ukážka predstavuje základný toolbar s predvolenou skladbou obsahu a ovládacích prvkov.

Dynamický breadcrumbs

Ukážka skladá toolbar z dynamicky generovaného breadcrumb trailu, čo sa hodí pre kontextovo závislú navigáciu.

Dynamický action

Ukážka prepína breadcrumbs aj akcie podľa dostupnej šírky. wje-breadcrumbs vie pod breakpointom zbaliť stred trailu a wje-toolbar-action presunie tlačidlá do overflow menu.

Vonkajšie odsadenie

Toolbar má pre vonkajšie odsadenie samostatné CSS premenné --wje-toolbar-margin-inline a --wje-toolbar-margin-block. Použite ich vtedy, keď potrebujete upraviť okolie toolbaru bez zásahu do interného paddingu a rozloženia akcií.

wje-toolbar.compact {
  --wje-toolbar-margin-block: 0 0.5rem;
  --wje-toolbar-margin-inline: 0;
}

Zarovnanie slotov

Sloty start a end sú flex riadky. Obsah v start môže rásť aj sa zmenšovať a používa min-width: 0, aby breadcrumbs alebo dlhé texty vedeli korektne skracovať obsah. Obsah v end zostáva zarovnaný doprava a drží stabilnú šírku pre akcie.

Kedy použiť

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

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

Udalosti

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

Metódy

scheduleResponsiveLayout

Popis	Schedules responsive layout recalculation.
Signatúra	() => void

updateResponsiveLayout

Popis	Aktualizuje responsive layout podľa najnovších údajov komponentu.
Signatúra	() => Promise<void>

measureBreadcrumbs

Popis	Spustí metódu measureBreadcrumbs na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(breadcrumbs: HTMLElement) => Promise<{count: number, fullWidth: number, compactWidth: number}>

ensureBreadcrumbState

Popis	Spustí metódu ensureBreadcrumbState na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(breadcrumbs: HTMLElement, count: number) => {compactMaxItems: number}

setBreadcrumbCompactState

Popis	Nastaví breadcrumb compact state a aplikuje súvisiace zmeny stavu.
Signatúra	(breadcrumbs: HTMLElement｜null, compact: boolean) => void

setBreadcrumbMaxItems

Popis	Nastaví breadcrumb max položky a aplikuje súvisiace zmeny stavu.
Signatúra	(breadcrumbs: HTMLElement, value: number) => void

getVisibleActionsForWidth

Popis	Vráti visible actions for width z aktuálneho stavu komponentu.
Signatúra	(actionMetrics: object, width: number) => number

setVisibleActions

Popis	Applies visible action count.
Signatúra	(action: HTMLElement｜null, count: number) => void

clearVisibleActions

Popis	Vyčistí visible actions a obnoví súvisiace hodnoty.
Signatúra	(action: HTMLElement｜null) => void

getToolbarAction

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

getBreadcrumbs

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

isSelfManagedAction

Popis	Overí, či je self managed action aktuálne pravda.
Signatúra	(action: HTMLElement｜null) => boolean

isSelfManagedBreadcrumbs

Popis	Overí, či je self managed breadcrumbs aktuálne pravda.
Signatúra	(breadcrumbs: HTMLElement｜null, action: any) => boolean

nextFrame

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

CSS tieňové časti

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

CSS vlastné premenné

Názov	Popis
--wje-toolbar-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-toolbar-height	Vlastná CSS premenná, ktorá riadi height.
--wje-toolbar-min-height	Vlastná CSS premenná, ktorá riadi min height.
--wje-toolbar-padding-top	Vlastná CSS premenná, ktorá riadi padding top.
--wje-toolbar-padding-bottom	Vlastná CSS premenná, ktorá riadi padding bottom.
--wje-toolbar-padding-inline	Vlastná CSS premenná, ktorá riadi padding inline.
--wje-toolbar-margin-block	Vlastná CSS premenná, ktorá riadi margin block.
--wje-toolbar-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.
--wje-toolbar-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-toolbar-top	Vlastná CSS premenná na štýlovanie komponentu (top).

Sloty

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.