Function splitView

Creates a split view component that divides the UI into two sections: main content and sidebar. The split view is centered on the page and provides a clean layout for organizing UI elements.

Param: optionsOrMainContent

Either the main content to display or the options object. When an object, it can have the following properties:

Param: options

Configuration object

Param: options.title

Title of the split view

Param: options.description

Description of the split view

Param: mainContent

The main content to display that uses other component blocks

Param: sidebarContent

Optional sidebar content that uses other component blocks

Returns

A JSX element representing the split view component

Remarks

  • The split view is designed to create 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 that is created with other component blocks
  • The component can be used with or without options

Example

Basic usage with main content and sidebar

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

Example

Usage with options, main content, and sidebar

splitView(
  { title: 'Split View Title' },
  group([
    text({ text: 'Main content' }),
    inputField({ name: 'mainInput', label: 'Main Input' })
  ]),
  group([
    text({ text: 'Sidebar content' }),
    inputField({ name: 'sidebarInput', label: 'Sidebar Input' })
  ])
);
  • splitView(mainContent, sidebarContent?): Element

  • Parameters

    • mainContent: ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]
    • OptionalsidebarContent: ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]

    Returns Element

  • splitView(options, mainContent, sidebarContent?): Element

  • Parameters

    • options: SplitViewOptions
    • mainContent: ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]
    • OptionalsidebarContent: ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]

    Returns Element

Settings