Split Screen
Display an Icon with a tooltip.
Overview
The split screen component is used to divide the screen into two parts. The user can adjust the size of the two parts by dragging the separator.
You can cascade the split screen component to create a multi-panel layout.
Key Features
- Horizontal and vertical split type
- Adjustable dimension of the start panel
- Customizable templates
Methods and Properties
Constructor
The constructor initializes the split screen with default.
Lifecycle Methods
[assembleMethodSymbol]()
: Sets up the button’s internals and event handlers during initialization.
Defaults
Provides default settings for templates, classes, and dimension.
Behavior Methods
fullStartScreen()
: Sets the start panel to full screen.fullEndScreen()
: Sets the end panel to full screen.resetScreen()
: Sets the start panel to the initial dimension.
Static Methods
getTag()
: Returns the tag name used for the button (monster-split-screen
).getCSSStyleSheet()
: Provides the CSS stylesheets associated with the split screen.
Events
The following events are fired by the component.
Examples
The SplitScreen
html tag can be used to create a split screen with two panels. In the example below, the split screen
is
divided vertically with a 70% dimension for the start panel.
<monster-split-screen data-monster-option-splittype="vertical">
<div slot="start"
style="background-color: rgba(227,13,147,0.21); padding: 10px; display: flex; height: calc( 100% - 20px ); align-items: stretch;">
<h2>Left Content</h2>
</div>
<div slot="end"
style="background-color: #9b410e;padding: 10px; padding: 10px; display: flex; height: calc( 100% - 20px ); align-items: stretch;">
<h2>Right Content</h2>
</div>
</monster-split-screen>
The result of the above example:
As a developer, you are responsible for how the content of the two panes behaves. You can set overflow or define a fixed height.
Options
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
splitType | The type of the split screen. | String | horizontal , vertical | horizontal |
dimension.initial | The initial dimension of the start panel in percentage. | String | 60% | |
dimension.min | The minimum dimension of the start panel in percentage. | String | 20% | |
dimension.max | The maximum dimension of the start panel in percentage. | String | 80% | |
templates.main | The template of the component | String |
Layout
The split screen control can be customized to your own needs. For this purpose, the control can be designed via css.
The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.
#select1::part(handle) {
background-color: white;
}
The individual parts and slots are shown in the following picture.