Aside

shadow

wje-aside je layoutový prvok pre doplnkový obsah vedľa wje-main. Najčastejšie sa používa na sekundárnu navigáciu, filtre, sumár, stavový panel alebo pomocné akcie.

Príklad použitia v layoute

Ukážka nižšie zobrazuje viac bežných layout kombinácií s wje-container, wje-header, wje-main a wje-footer. Sledujte hlavne atribút width, ktorý určuje šírku bočného stĺpca v konkrétnom layoute.

Na čo sa oplatí myslieť

• Obsah sa vkladá cez predvolený slot.
• width nastavuje CSS premennú --wje-aside-width, teda výslednú šírku panelu.
• Pri fixed komponent na desktopových breakpointoch používa position: fixed.
• top sa uplatní spolu s fixed a nastaví horný offset cez --wje-aside-top.
• Na menších viewportoch je aside predvolene skrytý. Variant top-start a trieda open riešia layout, nie vlastnú stavovú logiku komponentu.

Prístupnosť

• Používajte ho tam, kde má sekundárny obsah skutočne zmysel popri main, nie namiesto neho.
• Zachovajte logickú štruktúru dokumentu a poradie fokusovateľných prvkov.
• Ak sa v mobile zobrazuje ako vysunutý panel riadený nadradenou aplikáciou, nezabudnite zvládnuť focus management na úrovni tejto nadradenej logiky.

Odporúčané postupy

• Šírku určujte vedome podľa typu obsahu; na navigáciu často stačí stabilná pevná šírka, pri bohatšom obsahu sa oplatí tokenizovaná CSS premenná.
• Ak používate fixed, vždy myslite na top, aby sa aside neprekrýval s fixným headerom.
• Na mobiloch si správanie otestujte samostatne; default desktop layout automaticky neznamená dobré mobilné UX.
• Bočný panel používajte na doplnkový obsah, nie na to, čo je kľúčové pre dokončenie hlavnej úlohy používateľa.

Atribúty a vlastnosti

fixed

Popis	Určuje, či je voľba fixed zapnutá a ovplyvňuje správanie komponentu.
Atribút	fixed
Typ	boolean
Predvolené	-

top

Popis	Nastavuje textovú hodnotu uloženú vo voľbe top.
Atribút	top
Typ	string
Predvolené	-

variant

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	variant
Typ	string
Predvolené	-

width

Popis	Nastavuje rozmery alebo veľkosť pre voľbu width.
Atribút	width
Typ	string
Predvolené	-

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

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné

Názov	Popis
--wje-aside-width	Vlastná CSS premenná, ktorá riadi šírku bočného stĺpca aside.
--wje-aside-top	Vlastná CSS premenná, ktorá riadi horný offset fixného aside.
--wje-aside-border-color	Vlastná CSS premenná, ktorá riadi farbu okraja aside.
--wje-aside-border-width	Vlastná CSS premenná, ktorá riadi šírku okraja aside.
--wje-aside-border-style	Vlastná CSS premenná, ktorá riadi štýl okraja aside.

Sloty

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