Skip to main content

Wrappers

The following wrapper components are available to build layouts:

info

Layouts are automatically wrapped inside fluid Bootstrap containers for responsiveness, so you usually don't need to use the container component directly.

Row & Column​

col and row make use of Boostrap's grid system to allow elements to be positioned into rows and columns.

Example 1: one row, two columns​

children:
  - type: row
    children:
      - type: col
        children: ...
      - type: col
        children: ...

Example 2: two rows, multiple columns​

children:
  - type: row
    children:
      - type: col
        children: ...
      - type: col
        children: ...

  - type: row
    children:
      - type: col
        children: ...
      - type: col
        children: ...
      - type: col
        children: ...

results in:

Panel​

Panels can be used to encase components.

info

Many components will render panels automatically unless they are nested.

children:
  - type: panel
    title: Title # optional
    children: ...

Panel children can be centered with:

children:
  - type: panel
    ...
    centerContent: true

Tabs​

Tabs can be used to nest components:

children:
  - type: tabs
    title: Tabs title # optional
    children:
      - type: panel
        title: One
        children: ...
      - type: panel
        title: Two
        children: ...

Form​

form is a wrapper component that lays out widgets and their titles onto two columns. The title of each widget is displayed in the left column and the widget itself in the right column.

To add sub-headings between groups of widgets, declare an item with a unique header property.

children:
  - type: form
    title: Form Title # optional
    children:
      - type: formheader
        title: 1st header
      - type: label
        label: A widget
        title: My widget
      - type: label
        label: Another widget
        title: My widget2
      - type: formheader
        title: 2nd header
      - type: label
        label: An ultimate widget
        title: My widget3

Grid​

grid provides a compact way to lay out components into a grid.

The sub-components are dispatched into cells from left to right, then top to bottom.

children:
  - type: grid
    title: Grid title # optional
    rows: max-content max-content # 2 rows
    columns: max-content auto max-content # 3 columns; middle one expands to fill available space
    children:
      - type: label
        label: Top-left cell
      - type: label
        label: Top-center cell
      - type: label
        label: Top-left cell
      - type: label
        label: Bottom-left cell
      - type: label
        label: Bottom-center cell
      - type: label
        label: Bottom-right cell

Grid with span​

children:
  - type: grid
    title: Grid title # optional
    rows: max-content auto max-content
    columns: max-content auto max-content
    children:
      - type: label
        label: Header
        columnSpan: 3
        style:
          backgroundColor: '#ffb2d2'
      - type: label
        label: Left
        rowSpan: 2
        style:
          backgroundColor: '#b2f8ff'
      - type: label
        label: Middle
        rowSpan: 1
        style:
          backgroundColor: '#f9ffb2'
      - type: label
        label: Right
        rowSpan: 2
        style:
          backgroundColor: '#ffb7b2'
      - type: label
        label: Bottom
        rowSpan: 1
        style:
          backgroundColor: '#b8b2ff'