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 Unqork IDE. 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. |
Options include:
- 1 Column
- 2 Columns
- 3 Columns
- 4 Columns
- 2 Columns Narrow Left
- 2 Columns Narrow Right
- 3 Columns Wide Center
- 3 Columns Narrow Center
- Custom
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. |