SplitView

shadow

Element Split view je všestranný komponent, ktorý umožňuje vytvoriť delené zobrazenie s dvoma alebo viacerými sekciami. Poskytuje deliaci posuvník, ktorý umožňuje dynamicky meniť veľkosť sekcií. Podporované sú dve orientácie – vertikálna a horizontálna a vnorením ďalšieho SplitView vytvoriť zložitejšie zobrazenia.

Základné použitie

Ukážka predstavuje split-view v jeho predvolenom rozdelení, aby bolo jasné správanie dvoch panelov vedľa seba.

Vertikálny SplitView

Podporované sú dve orientácie. Pridaním atribútu vertical zobrazíte vertikálny SplitView.

Min/Max

Pridaním vlastnosti min a max s hodnotami “0” až “100” obmedzíte škálu pohybu oddeľovača.

Disabled

Pridaním atribút disabled deaktivuje možnosť posúvania oddeľovača.

Vnorený SplitView

Vnorením ďalšieho SplitView je možné vytvoriť zložitejšie zobrazenia.

Úprava štýlov

Ukážka sa sústreďuje na vlastné vizuálne úpravy split-view, najmä keď potrebujete layout prispôsobiť dizajnovému systému.

Kedy použiť

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

initial

Popis	Riadi správanie voľby initial v komponente.
Atribút	initial
Typ	any
Predvolené	50

Udalosti

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

Metódy

detectSize

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

pixelsToPercentage

Popis	Spustí metódu pixelsToPercentage na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(value: number) => number

CSS tieňové časti

Názov	Popis
wje-divider	Štýluje shadow časť wje-divider.

CSS vlastné premenné

Názov	Popis
--wje-split-view-divider-area	Vlastná CSS premenná na štýlovanie komponentu (divider area).
--wje-split-view-divider-width	Vlastná CSS premenná, ktorá riadi divider width.
--wje-split-view-min	Vlastná CSS premenná na štýlovanie komponentu (min).
--wje-split-view-max	Vlastná CSS premenná na štýlovanie komponentu (max).
--wje-split-view-calc-a	Vlastná CSS premenná na štýlovanie komponentu (calc a).
--wje-split-view-calc-b	Vlastná CSS premenná na štýlovanie komponentu (calc b).
--wje-split-view-clamp-a	Vlastná CSS premenná na štýlovanie komponentu (clamp a).
--wje-split-view-clamp-b	Vlastná CSS premenná na štýlovanie komponentu (clamp b).
--wje-split-view-divider-background	Vlastná CSS premenná na štýlovanie komponentu (divider background).
--wje-split-view-divider-size	Vlastná CSS premenná na štýlovanie komponentu (divider size).

Sloty

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.
divider	Slot pre obsah oddeľovača.