Function: splitView()

Call Signature

function splitView(mainContent: SplitViewContent, sidebarContent?: SplitViewContent): ContainerElement;

Defined in: src/UI/blocks/splitView.tsx:60

Split view component dividing UI into main content and sidebar sections. Centered layout for organizing UI elements.

Parameters

Parameter	Type	Description
mainContent	SplitViewContent	Main content to display (used when first parameter is options)
sidebarContent?	SplitViewContent	Optional sidebar content that uses other component blocks

Returns

ContainerElement

Examples

With options object using overlay

splitView(
  { overlay: true },
  group([
    headerBar({title: 'Main Content'}),
    inputField({ name: 'mainInput', label: 'Main Input' })
  ]),
  group([
    headerBar({title: 'Sidebar'}),
    inputField({ name: 'sidebarInput', label: 'Sidebar Input' })
  ])
);

Basic usage with main content and sidebar

splitView(
  group([
    headerBar({title: 'Main Content'}),
    inputField({ name: 'mainInput', label: 'Main Input' })
  ]),
  group([
    headerBar({title: 'Sidebar'}),
    inputField({ name: 'sidebarInput', label: 'Sidebar Input' })
  ])
);

Remarks

The split view creates a two-column layout with main content and an optional sidebar. The view is automatically centered on the page. Both main content and sidebar can contain any valid React elements created with other component blocks.

Call Signature

function splitView(
   options: SplitViewOptions, 
   mainContent: SplitViewContent, 
   sidebarContent?: SplitViewContent): ContainerElement;

Defined in: src/UI/blocks/splitView.tsx:64

Split view component dividing UI into main content and sidebar sections. Centered layout for organizing UI elements.

Parameters

Parameter	Type	Description
options	SplitViewOptions	-
mainContent	SplitViewContent	Main content to display (used when first parameter is options)
sidebarContent?	SplitViewContent	Optional sidebar content that uses other component blocks

Returns

ContainerElement

Examples

With options object using overlay

splitView(
  { overlay: true },
  group([
    headerBar({title: 'Main Content'}),
    inputField({ name: 'mainInput', label: 'Main Input' })
  ]),
  group([
    headerBar({title: 'Sidebar'}),
    inputField({ name: 'sidebarInput', label: 'Sidebar Input' })
  ])
);

Basic usage with main content and sidebar

splitView(
  group([
    headerBar({title: 'Main Content'}),
    inputField({ name: 'mainInput', label: 'Main Input' })
  ]),
  group([
    headerBar({title: 'Sidebar'}),
    inputField({ name: 'sidebarInput', label: 'Sidebar Input' })
  ])
);

Remarks

The split view creates a two-column layout with main content and an optional sidebar. The view is automatically centered on the page. Both main content and sidebar can contain any valid React elements created with other component blocks.