Layout

The Layout contains objects for configuring layouts of the user interface.
Tags:

Overview

The Layout section contains objects used for defining a layout in a user interface.

Layouts are used for configuring layouts in Frame, ControlPanel, and NavPanel objects. In all cases, layouts are configured in the same way. Three types of layouts can be defined:

  • A ColumnLayout object is used for configuring a set of columns of variable widths.
  • A RowLayout object is used for configuring a set of rows of variable heights.
  • A GridLayout object is used for configuring a grid defined by both columns and rows, with variable widths and heights.

For more information about layouts, see the “Fundamentals” section of the Workbench documentation.

Example

Below is an example configuration.

kind: Solution
version: v0
router:
  kind: Router
  routes:
    - frame: home-frame
frames:
  home-frame:
    kind: Frame
    layout:
      kind: ColumnLayout
      widths: [1fr, 1fr]
      areas: [my-control-panel1, my-control-panel2]
    contents:
      my-control-panel1:
        kind: ControlPanel
        card: true
        layout:
          kind: GridLayout
          widths: [1fr, 1fr]
          widthGap: 12px
          heights: [auto, auto]
          heightGap: 12px
          areas:
            - [my-button1, my-button1]
            - [my-button2, my-button3]
        controls:
          my-button1:
            kind: Button
            text: Top
          my-button2:
            kind: Button
            text: Left
          my-button3:
            kind: Button
            text: Right
      my-control-panel2:
        kind: ControlPanel
        card: true
        layout:
          kind: RowLayout
          heights: [500px, auto, auto]
          heightGap: 12px
          areas: [my-text, my-button1, my-button2]
        controls:
          my-text:
            kind: Text
            text: Hello World
          my-button1:
            kind: Button
            text: Bottom1
          my-button2:
            kind: Button
            text: Bottom2

LayoutConfig

Define a layout

ColumnLayout

Name Type Required Description
kind "ColumnLayout" Yes Place content areas in a horizontal array
widths List<string> Yes The width sizes of the columns
widthGap string No
areas List<string> Yes The content names to place in the columns of the layout

RowLayout

Name Type Required Description
kind "RowLayout" Yes Place content areas in a vertical array
heights List<string> Yes The heights of the rows
heightGap string No
areas List<string> Yes The content names to place in the rows of the layout

GridLayout

Name Type Required Description
kind "GridLayout" Yes Place content areas in a grid consisting of rows and columns
heights List<string> Yes The heights of the rows in the grid
areas List<List<string» Yes The contents placed in a 2d grid, each array represents a row
widths List<string> Yes The widths of the columns in the grid
widthGap string No
heightGap string No
overlayAreas List<List<string» No The contents placed in a overlaying 2d grid. The areas and overlay areas need to have the same structure of columns and rows