Pane Architecture

A concept that defines the structural, semantic composition, and behavior of panes within shell applications. It provides flexible yet standardized structural and layout options, a slot-based architecture, and supports various organizational forms — from simple content containers to complex split or tab layouts.

The concept serves as a flexible framework that can be extended and adapted to specific use cases.

---

Visual Examples

Possible combinations of pane configurations filled with subcomponents.

Anatomy

A pane generally consists of five main elements:

1. Pane Top Bar – Control bar for pane meta actions and pane toggles
2. Pane Header – Header area for titles and descriptions
3. Pane Main – Main content area
4. Pane Aside – Side area for additional or contextual information
5. Pane Footer – Footer area for actions

Slots

Pane Header Slot

Header area for titles, descriptions, and metadata.

Usage

Information

Displays pane titles, descriptions, and status information.

Context Actions

Hosts contextual actions or navigation elements relevant to the pane.

Configuration

Default Component

Pane Header

Alternative Components

Pane Header Variant, Document Preview Pane Header, Custom Header

Content

Flexible content including titles, descriptions, and metadata.

Layout

Fluid layout, positioned above Pane Main or Pane Aside.

Pane Main Slot

Main content area with flexible layout options.

Usage

Primary Content

Holds the main pane content, such as data views or forms.

Component Placement

Supports flexible component placement and custom layouts.

Scrollable Content

Allows scrollable areas for larger content structures.

Configuration

Default Component

Custom Main

Content

Flexible content and custom components.

Layout

Fluid layout; scrollable when needed.

Pane Aside Slot

Side area for supplementary or contextual information.

Usage

Context Information

Displays additional contextual information related to the main content.

Filters and Search

Provides space for filter, search, or refinement options.

Navigation

Can host secondary navigation or supporting menus.

Configuration

Default Component

Custom Aside

Content

Flexible content, metadata, or detailed views.

Layout

Fixed width (default: 350 px), alignment start or end.

Configuration

Option	Description	Values
isTabbed	Enables tab navigation on pane level.	true / false
isSplitted	Enables a two-column layout (Pane Main + Pane Aside).	true / false
Pane Alignment	Alignment of the entire pane within the viewport.	start / end
Pane Aside Alignment	Position of the Pane Aside within split layouts. Only applies when isSplitted: true.	start / end / none
showPaneHeaderAside	Defines the position of the Pane Header in split layouts: – false: Pane Header above Pane Main – true: Pane Header above Pane Aside	true / false

Note

Pane Aside Alignment and showPaneHeaderAside are only relevant when the pane is configured as a split layout. In simple or tab-only layouts, these settings are partly ignored.

---

Layout-Varianten

Simple Layout

• Structure:

  Pane
  ├─ Pane Top Bar
  ├─ Pane Header
  ├─ Pane Main
  └─ Pane Footer

• Characteristics: No split, no tabs

Tab-Layout

• Structure:

          Pane
          ├─ Pane Top Bar
          ├─ Pane Header
          ├─ Tabs
          │   └─ Tab Main
          └─ Pane Footer

• Characteristics: The Pane Header is displayed above the tab bar.

---

Split-Layout

• Structure:

    Pane
    ├─ Pane Top Bar
    ├─ Split Area
    │   └─ Pane Main
    │   └─ Pane Aside
    └─ Pane Footer

    Pane
    ├─ Pane Top Bar
    ├─ Split Area
    │  ├─ Main
    │  └─ Pane Wrapper
    │     ├─ Pane Header
    │     └─ Pane Aside
    └─ Pane Footer

• Characteristics:
  • The Pane Header can be positioned either above Pane Main or Pane Aside.
  • When showPaneHeaderAside: true, the header is positioned above the Pane Aside and remains permanently visible.
  • When showPaneHeaderAside: false, the header is positioned above the Pane Main.

---

Tab + Split Layout

• Structure:

      Pane
      ├─ Pane Top Bar
      ├─ Pane Header
      ├─ Split Area
      │  ├─ Tabs
      │  └─ Pane Aside
      └─ Pane Footer

      Pane
      ├─ Pane Top Bar
      ├─ Split Area
      │  ├─ Tabs
      │  └─ Pane Wrapper
      │     ├─ Pane Header
      │     └─ Pane Aside
      └─ Pane Footer

• Characteristics:

  • When showPaneHeaderAside: false, the Pane Header is positioned above the tab bar.
  • When showPaneHeaderAside: true, the Pane Header is positioned above the Pane Aside.

---

Pane Header Positions

Layout Type	Pane Header Position
Simple	Above Pane Main
Split (showPaneHeaderAside: false)	Above Pane Main
Split (showPaneHeaderAside: true)	Above Pane Aside
Tab	Above Tab Bar
Tab + Split (showPaneHeaderAside: false)	Above Tab Bar
Tab + Split (showPaneHeaderAside: true)	Above Pane Aside

---

Pane Toggle States

Collapsed State

• Pane is minimized to icon size
• Only the Pane Toggle remains visible
• Content is fully hidden

Expanded State

• Pane occupies full size
• All areas are visible