Navigation Back to home

SplitPanel

The SplitPanel control is a simple layout control that allows you to split the screen

Import
the javascript logo
import { SplitPanel } from "@schukai/monster/source/components/layout/split-panel.mjs";
Source
the git logo
Package
the npm logo
Since
3.54.0
Start Panel
End Panel

Introduction

This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.

Key Features

  • Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
  • Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
  • Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
  • Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
  • Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.

Improving the user experience

This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.

These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.

Efficiency in the development process

Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.

Split Panel Simple

Javascript

import "@schukai/monster/source/components/layout/popper.mjs";

HTML

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The Monster Split Panel component uses the Shadow DOM to encapsulate its internal structure and styles. This ensures that the component's layout and behavior remain unaffected by external styles or scripts. It divides the available space into two resizable panels, offering either a vertical or horizontal split layout.

Shadow DOM and Accessibility

The Shadow DOM ensures that the internal structure of the Split Panel is isolated from external interference. Accessibility is maintained by providing proper ARIA roles, focus management, and keyboard interaction support, enabling all users, including those using assistive technologies, to interact with the component seamlessly.

Customizing Through Exported Parts

The Monster Split Panel exposes specific exported parts for targeted styling using the CSS part selector. This allows developers to customize the appearance of the panels and the draggable handle while preserving the component's functionality and encapsulation.

Available Part Attributes

  • control: Represents the entire split panel container.
  • startPanel: Targets the first (start) panel in the split layout.
  • endPanel: Refers to the second (end) panel.
  • dragger: Styles the draggable handle between the two panels.
  • handle: Refers to the internal part of the draggable element.

Below is an example of how to customize the appearance of the draggable handle and panels using the CSS part attributes.


monster-split-panel::part(control) {
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
}

monster-split-panel::part(startPanel),
monster-split-panel::part(endPanel) {
    background-color: #ffffff;
    padding: 16px;
}

monster-split-panel::part(dragger) {
    background-color: #007bff;
    width: 5px;
    cursor: ew-resize;
}

monster-split-panel::part(handle) {
    background-color: #0056b3;
    width: 100%;
    height: 100%;
}

Explanation of the Example

  • monster-split-panel::part(control): Styles the entire split panel container with a light border and rounded corners.
  • monster-split-panel::part(startPanel) and endPanel: Adds padding and background color to both panels.
  • monster-split-panel::part(dragger): Styles the draggable separator with a blue background and sets a cursor for resizing.
  • monster-split-panel::part(handle): Targets the draggable handle's internal area to ensure consistent styling.

Accessibility

The Monster Split Panel component includes accessibility features to support a wide range of users:

  • Keyboard Interaction: Users can trigger predefined actions (e.g., reset dimensions) using keyboard events.
  • ARIA Roles: The component employs proper ARIA roles and attributes for better screen reader support.
  • Focus Management: Focus is managed appropriately when interacting with the draggable handle.

These features ensure that the Split Panel component delivers an inclusive experience for all users, including those utilizing assistive technologies.

HTML Structure

<monster-split-panel></monster-split-panel>

JavaScript Initialization

const element = document.createElement('monster-split-panel');
document.body.appendChild(element);

Exported

SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option
Type
Default
Description
templates
object
Template definitions
templates.main
string
undefined
Main template
splitType
string
undefined
Split type (vertical or horizontal)
dimension
string
Dimension
dimension.initial
string
60%
Initial dimension of the start panel
dimension.max
string
80%
Maximum dimension of the start panel (in percentage)
dimension.min
string
20%
Minimum dimension of the start panel (in percentage)

  • since
  • deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

  • data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
  • data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

resetScreen()
To set the options via the HTML tag, the attribute data-monster-options must be used. The individual configuration values can be found in the table.

State query methods

isFullEndScreen()
To set the options via the HTML tag, the attribute data-monster-options must be used. The individual configuration values can be found in the table.
isFullStartScreen()
To set the options via the HTML tag, the attribute data-monster-options must be used. The individual configuration values can be found in the table.
isInitialScreen()
To set the options via the HTML tag, the attribute data-monster-options must be used. The individual configuration values can be found in the table.

Structural methods

setContent(html)
Parameters
  • html
To set the options via the HTML tag, the attribute data-monster-options must be used. The individual configuration values can be found in the table.
setDimension(dimension)
Parameters
  • dimension {string}: - The dimension to be set, can be in percentage or absolute value.
Returns
  • {object}: Returns the current object instance for chaining.
Check if the dimension is a percentage and within a valid range, then set the dimension option.

Static methods

[instanceSymbol]()
Returns
  • {symbol}
This method is called by the instanceof operator.
getCSSStyleSheet()
Returns
  • {CSSStyleSheet[]}
getTag()
Returns
  • {string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()
Returns
  • {Monster.Components.Host.Viewer}

Other methods

fullEndScreen()
To set the options via the HTML tag, the attribute data-monster-options must be used. The individual configuration values can be found in the table.
fullStartScreen()
To set the options via the HTML tag, the attribute data-monster-options must be used. The individual configuration values can be found in the table.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.