Columns Component

Prev Next

The Columns component divides the canvas into a configurable number of horizontal columns for side-by-side layout. Components placed inside a Columns component are arranged across the defined columns.

How to read settings tables

The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting

Field

Type

Default

Description

Property ID

key

Text input

col

The unique identifier for this component instance.

Display Settings

Default State Options

Setting

Field

Type

Default

Description

Disable All Nested Fields

disabled

Toggle

OFF

Prevents end-users from interacting with any components inside the columns.

Hide All Nested Fields

hidden

Toggle

OFF

Hides all components inside the columns from end-users.

Formatting

Setting

Field

Type

Default

Description

Column Layout

selectedColumnLayout

Choice chip

2 Columns

Sets the number and relative widths of the columns. Options are displayed as visual layout tiles.

Column options include:

Advanced Settings

Additional Styling

Setting

Field

Type

Default

Description

Custom CSS Class

customClass

Text input

A CSS class applied to the Columns component for custom styling.

Accessibility Settings

For details on each setting, its options, and when to use it, see Accessibility Settings Reference.

Setting

Field

Type

Default

Description

ARIA Label

ariaLabelOption

Drop-down

None

Sets how to label this element for screen readers. Options include: None, Custom Label, or Reference Label(s).

ARIA Description

ariaDescriptionOption

Drop-down

None

Sets how to provide additional context for screen readers. Options include: None, Custom Description, or Reference Description(s).

ARIA Role

ariaRole

Drop-down

Defines the semantic role of the element for assistive technologies. See Accessibility Settings Reference for the full list of available roles.

Announce Live Changes

ariaLive

Drop-down

OFF

Controls how screen readers announce dynamic content updates. Options include: Off, Polite, or Assertive.

Hide From Screen Readers

ariaHidden

Toggle

OFF

Hides the element from assistive technologies without removing it from the DOM.

Custom ARIA Attributes

Adds additional custom ARIA attributes to the element as key-value pairs.

Column

Field

Description

Attribute

key

The ARIA attribute name (for example, aria-label, aria-describedby, and so on).

Value

value

The value for the attribute.

Operations Builder

This component supports the Operations Builder in Vega modules. When the module or panel runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.


Changelog

Date

Change

Initial publication.