ColumnLayout

A ColumnLayout object for configuring a layout consisting of a set of vertical columns of varying widths.

Overview

If you have content that needs to be organised into vertical columns, then you can use a ColumnLayout. You can configure the number of columns and the width of each column. You can then configure what contents get inserted into each column.

For more information, see Frame layouts and contents.

Example

The example below shows a frame with a column layout with two columns. The widths property sets the first column to 300px wide and the second column to “auto” width (which means the width is automatically set based on the content).

The areas property then places content blocks into the columns. A control panel is placed in the first column and a viewer in the second column. (The control panel and viewer blocks in contents are not defined yet.)

kind: Frame
layout:
  kind: ColumnLayout
  widths: [300px, auto]
  areas: [my-control-panel, my-viewer]
contents:
  my-control-panel:
    # define the control panel
  my-viewer:
    # define the viewer

Object table

Name Type Required
kind Constant: ColumnLayout yes
widths Array yes
areas Array yes

Object properties

  • Object with the following properties:
    • kind (required): Constant ColumnLayout
    • widths (required): The width sizes of the columns
      • List of string
    • areas (required): The content names to place in the columns of the layout
      • List of string