SplitPanel

Split Panel Simple

import "@schukai/monster/source/components/layout/panel.mjs";
import "@schukai/monster/source/components/layout/split-panel.mjs";

const splitPanel = document.getElementById("split-simple-demo");
const log = document.getElementById("split-simple-log");

document
	.getElementById("split-simple-focus-start")
	?.addEventListener("click", () => {
		splitPanel?.fullStartScreen();
	});

document
	.getElementById("split-simple-reset")
	?.addEventListener("click", () => {
		splitPanel?.resetScreen();
	});

document
	.getElementById("split-simple-focus-end")
	?.addEventListener("click", () => {
		splitPanel?.fullEndScreen();
	});

splitPanel?.addEventListener("monster-dimension-changed", (event) => {
	log.textContent = `Dimension: ${event.detail.dimension}`;
});
import "@schukai/monster/source/components/layout/popper.mjs";

<section style="display:grid;gap:var(--monster-space-4);container-type:inline-size;">
  <div
    style="display:flex;gap:var(--monster-space-3);flex-wrap:wrap;align-items:center;padding:var(--monster-space-4);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);border:1px solid var(--monster-color-border-primary-2);"
  >
    <button id="split-simple-focus-start" type="button">Focus navigation</button>
    <button id="split-simple-reset" type="button">Reset</button>
    <button id="split-simple-focus-end" type="button">Focus content</button>
    <span id="split-simple-log">Dimension: 38%</span>
  </div>
  <div style="block-size:24rem;min-block-size:24rem;border:1px solid var(--monster-color-border-secondary-2);">
    <monster-split-panel
      id="split-simple-demo"
      data-monster-option-dimension-initial="38%"
      data-monster-option-dimension-min="22%"
      data-monster-option-dimension-max="72%"
    >
      <monster-panel slot="start">
        <div style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);background:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2);min-block-size:100%;">
          <strong>Navigation</strong>
          <button type="button">Inbox</button>
          <button type="button">Orders</button>
          <button type="button">Inventory</button>
          <button type="button">Exports</button>
        </div>
      </monster-panel>
      <monster-panel slot="end">
        <div style="display:grid;gap:var(--monster-space-4);padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);min-block-size:100%;">
          <strong>Workspace</strong>
          <p style="margin:0;">
            The main pane can grow while the navigation pane stays quickly
            accessible through reset and focus presets.
          </p>
          <p style="margin:0;">Double click the dragger to cycle through min, initial, and max dimensions.</p>
        </div>
      </monster-panel>
    </monster-split-panel>
  </div>
</section>

/** no additional stylesheet is defined **/

Split Panel Presets

import "@schukai/monster/source/components/layout/panel.mjs";
import "@schukai/monster/source/components/layout/split-panel.mjs";

<div style="block-size:24rem;min-block-size:24rem;border:1px solid var(--monster-color-border-primary-2);">
  <monster-split-panel
    data-monster-option-splitType="horizontal"
    data-monster-option-dimension-initial="58%"
    data-monster-option-dimension-min="35%"
    data-monster-option-dimension-max="78%"
  >
    <monster-panel slot="start">
      <div style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);min-block-size:100%;">
        <strong>Editor</strong>
        <p style="margin:0;">Keep the form fields above and the live preview below.</p>
      </div>
    </monster-panel>
    <monster-panel slot="end">
      <div style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);background:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2);min-block-size:100%;">
        <strong>Preview</strong>
        <p style="margin:0;">Horizontal mode is useful when the page is wider than it is tall.</p>
      </div>
    </monster-panel>
  </monster-split-panel>
</div>

/** 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.