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.

• monster-dimension-changed

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

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.