Header

shadow

Header je súčasťou elementov určených na tvorbu layoutov a zobrazuje sa v hornej časti. Používa sa väčšinou na zobrazenie navigácie, loga a pod. Pri sticky použití sa poradie vrstiev nastavuje cez CSS premennú --wje-header-z-index, aby header vedel spolupracovať s overlay komponentmi a mobilnými panelmi.

Základné použitie

Samostatná ukážka nižšie zobrazuje header v najjednoduchšom vertikálnom layoute s hlavným obsahom pod ním.

note

Pre informácie o použití Header elementu sa presuňte do dokumentácie Layoutu.

Kedy použiť

Použite wje-header 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-header-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-header-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-header-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-header-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-header-top	Vlastná CSS premenná na štýlovanie komponentu (top).
--wje-header-height	Vlastná CSS premenná, ktorá riadi height.
--wje-header-z-index	Vlastná CSS premenná na štýlovanie komponentu (z index).

Sloty

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