Skip to main content

Header

shadow

The header is part of the layout elements and is displayed at the top. It is mostly used to display navigation, logos, etc.

Basic use

The separate sample below shows the header in the simplest vertical layout with the main content below it.

note

For information on using the Header element, navigate to the [Layout] documentation(./layout).

When to use

Use wje-header 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.

  • 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

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

Events

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

Methods

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

CSS shadow parts

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

CSS custom variables

NázovPopis
--wje-header-backgroundVlastná CSS premenná na štýlovanie komponentu (background).
--wje-header-border-colorVlastná CSS premenná, ktorá riadi border color.
--wje-header-border-widthVlastná CSS premenná, ktorá riadi border width.
--wje-header-border-styleVlastná CSS premenná na štýlovanie komponentu (border style).
--wje-header-topVlastná CSS premenná na štýlovanie komponentu (top).
--wje-header-heightVlastná CSS premenná, ktorá riadi height.

Slots

NázovPopis
defaultPredvolený slot pre hlavný obsah komponentu.