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

Dynamický breadcrumbs

Dynamický action

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

Pre tento komponent nie sú dostupné žiadne verejné metódy.

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