C&C Docs
Log in

cnc-layout

An IDE-style workspace: tab groups in split panes, with tabs draggable between groups and gutters the user can resize. The whole arrangement is one config object, and the widget reports every change back through events.

Quick start

Bind a config with two keys: layout, a tree of split nodes and tab groups, and panels, a map from a tab's type to the HTML that fills it. Give it a name and the current config is also written to a hidden input, so a workspace can be submitted with a form. 

<cnc-layout
  name="workspace"
  @change="save($event.detail.layout)"
  $config='{
    "layout": {
      "type": "cols", "id": "root", "sizes": [50, 50],
      "children": [
        { "type": "tabs", "id": "left", "activeChildId": "t1", "children": [
          { "id": "t1", "label": "Overview", "type": "default", "closable": true }
        ]}
      ]
    },
    "panels": { "default": "<div>Panel content</div>" }
  }'
></cnc-layout>

Layout node keys

Each node in config.layout takes these. A tab's type is looked up in config.panels to find its content.

Key Purpose
type cols or rows for a split node, tabs for a group of tabs.
id The node's identity, used throughout the config and carried in the events.
sizes For a split node: the percentage each child takes, which is what the resize gutters rewrite.
children Child nodes for a split, or the tabs for a group.
activeChildId For a tabs node: which tab is showing.
tabPlacement For a tabs node: where the tab strip sits.
label / closable On a tab: its caption and whether it offers a close control.

Usage guidance

Persist from change. The widget rewrites config.layout as the user drags and resizes, so a workspace that should survive a reload needs that handler — and cnc-layout-saver is the widget that does it for you, with named layouts in local storage.

An all-closed workspace is a real state, not a bug. Closing the last tab sets layout to null deliberately, so fill the empty-state slot with a way back — a button that opens a default tab — or the user is stuck looking at "No tabs open".

Panels are HTML STRINGS in config.panels, keyed by a tab's type. That means panel content is not reactive markup and is inserted as it stands, so anything user-supplied that reaches it wants escaping first.

This is a heavyweight widget for genuine workspaces — editors, consoles, dashboards the user arranges. For fixed sections use cnc-tabs, and for a page-level frame use app-layout.

← Back to Widgets