SplitView | individual options within the Select component
shadow
The Split view element is a versatile component that allows you to create a split view with two or more sections. Provides a divider slider that allows you to dynamically resize sections. Two orientations are supported - vertical and horizontal, and nesting another SplitView to create more complex views.
Two orientations are supported. Add the vertical attribute to display a vertical SplitView.
Adding the min and max properties with values "0" to "100" will limit the range of motion of the separator.
Adding the disabled attribute disables the ability to scroll the separator.
By nesting another SplitView, more complex views can be created.
| Description | If true, the option to scroll the separator is deactivated |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | If true, the orientation of the separator changes to horizontal. |
| Attribute | horizontal |
| Type | boolean |
| Default | false |
| Description | Defines the initial position of the slider. |
| Attribute | initial |
| Type | number ｜ undefined |
| Default | undefined |
| Description | Defines the value of the maximum possible separator position. |
| Attribute | max |
| Type | number ｜ undefined |
| Default | undefined |
| Description | Defines the value of the minimum possible separator position. |
| Attribute | min |
| Type | number ｜ undefined |
| Default | undefined |
No events available for this component.
No public methods available for this component.
| Name | Description |
|---|
divider | Refers to the div element of the separator. |
| Name | Description |
|---|
--wj-split-view-divider-background | Defines the background of the element. |
--wj-split-view-divider-size | Adjusts the width/height of the separator. |
--wj-split-view-divider-width | Specifies the thickness of the separator. |
--wj-split-view-max | Represents the maximum allowed size (in percent) for the panel. |
--wj-split-view-min | Represents the minimum allowed size (in percent) for the panel. |
| Name | Description |
|---|
divider | The contents shall be placed in the separator. |
end | The content is placed to the right of the separator in the LTR and to the left in the RTL. |
start | The content is placed to the left of the separator in the LTR and to the right in the RTL. |