Component Palette Icon:

On this page ...


The Column Container is a 12 column grid layout, where components can be organized into columns which alter their layout depending on screen viewport size.  The container features three different breakpoints that it can switch between as the viewport changes. Each component inside the container stores positioning and sizing values per breakpoint, allowing you to determine the location and size of each component for each breakpoint. 

A column container provides a way to create a single set of components that can be arranged up to three ways depending on the width of the container. Components are able change how many columns they span when switching between breakpoints, as well as change row and column index altogether. In the GIF below, the components are resizing and repositioning as the viewport on the container changes. 


User Interface

While deep selected, the Perspective Property Editor will show a Column Breakpoints interface. Clicking on Small, Medium, or Large will change the container workspace, showing you the current configurations for all child components in the container. When a container workspace is selected, you can freely move and resize components for the selected breakpoint, allowing you to determine their placement when the selected breakpoint is active in a session. 

Note that switching between breakpoints in the designer does not resize the container. The pixel dimensions represent a minimum width for the viewport, meaning that the container will switch to the breakpoint when the minimum width is satisfied during runtime. For example, if Medium is set to 280px and Large is 500px, then the container will show the medium breakpoint when the viewport is between 280 and 499 pixels in width. 


Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name

Description

Property Type
breakpoints

Width breakpoint declarations for child layouts. When the container is sized below minWidth, child position rules will fall back to the next set breakpoint rules.

NameDescriptionProperty Type
nameName of the breakpoint.value: string
minWidthMinimum width for this breakpoint.value: numeric
array
gutters

Settings for the gutters, which are the amount of space, in pixels, to place between child components.

NameDescriptionProperty Type
verticalVertical gutter setting between child components.value: numeric
horizontalHorizontal gutter setting between child components.value: numeric

object


styleSets a style for this component. The Style menu contains all the tools for modifying text, background, margins, and borders. You can also specify a style class.object

Child Component Position Properties

When a component is placed inside of a column container, it will inherit the position properties listed below. 

PropertyDescriptionData Type
heightSpecifies the horizontal positioning of the component in pixels.value: numeric
breakpoints

An array of objects, where each object represents a different breakpoint. In the image below, a component in a column container is selected. Each element under breakpoints contains positioning information that will be used when the container switches to the named breakpoint. 


Each object has the following values:

PropertyDescriptionData Type
nameName of a breakpoint defined in container. If this matches the currently applied breakpoint, these rules determine child layout. Options are sm (small), md (medium), or lg (large).value: string
spanNumber of columns the child's width will span.value: numeric
rowIndexRow index (starting from 0) in which to place child. Children may wrap lines within a row. Children in separate rows don't affect each other's layout.value: numeric
colIndexColumn number upon which the child's span should begin unless forced to wrap.value: numeric
orderWhere component is places among its siblings within its row. Ordering is independent per row.value: numeric
array


Component Functions

  • Description

Returns an ArrayList, which contains references to all components inside of the container.

  • Parameters

none

  • Return

Array List - An ArrayList of components in the container. The resulting ArrayList can be iterated over via a for-loop.


  • No labels