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

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

Atribúty a Vlastnosti

initial

Description	Initial value of the distribution in percentage.
Attribute	initial
Type	number
Default	50

Eventy

No events available for this component.

Metódy

pixelsToPercentage

Description	Converts the pixel value to a percentage.
Signature	pixelsToPercentage(value: number) => number

CSS Shadow Parts

Name	Description
divider	Refers to the slider.

CSS Custom Vlastnosti

Name	Description
--wje-split-view-divider-area	Defines the interactive area (hitbox) of the resizing slider. Accepts any valid CSS length unit (e.g., px, rem, %).
--wje-split-view-divider-width	Specifies the visual width of the slider. Controls the display thickness of the slider.
--wje-split-view-min	Sets the minimum size for split views. Ensures that the view cannot be scaled below this value.
--wje-split-view-max	Sets the maximum size for split views. Ensures that the view cannot be enlarged beyond this value.
--wje-split-view-calc-a	Represents the calculated size of the first view. It is used to dynamically adjust the size of the first view.
--wje-split-view-calc-b	Represents the calculated size of the second view. It is used to dynamically adjust the size of the second view.
--wje-split-view-clamp-a	Limits the size of the first view between the minimum and maximum limits. Ensures that the calculated size remains within the defined range.
--wje-split-view-clamp-b	Limits the size of the second view between the minimum and maximum limits. Ensures that the calculated size remains within the defined range.
--wje-split-view-divider-background	Sets the background color of the slider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).
--wje-split-view-divider-size	Defines the overall size of the slider, affecting its visual and interactive dimensions. Accepts any valid CSS length unit.

Sloty

Name	Description
start	Slot for initial display.
end	Slot for end display.
divider	Slot for slider.