cnc-tree-directory
The file-explorer twin of cnc-tree: the same tree with connector lines drawn down
and across to each row, so nesting reads at a glance in a deep hierarchy.
Quick start
Identical to cnc-tree — a root tree and a bound
$selected. Only the drawing differs.
selected: header
<cnc-tree-directory
$selected="picked"
@nodeclick="picked = $event.detail.nodeId"
$root='{ "children": [ { "id": "app", "label": "app", "children": [ … ] } ] }'
></cnc-tree-directory>Node fields
No icon field here, unlike cnc-tree: the connector lines carry the
structure, so rows are text only.
| Field | Purpose |
|---|---|
| id |
The node's identity, matched by selected and carried in the event.
|
| label | The row's text. |
| children | An array of the same shape. A node with children is a folder and draws a toggle. |
| highlighted |
Marks the row as highlighted — a search hit, a modified file. Suppressed wholesale
by highlighted="false" on the element.
|
| style | An inline style string applied to the row. |
Usage guidance
Choose between this and cnc-tree by DEPTH. Connector lines earn their ink at three
levels and beyond, where indentation alone stops being readable; on a shallow tree they are
noise, and cnc-tree also gives you icons, condensed spacing and a
right-hand toggle.
Rows are text only. Where a file type needs an icon, that is cnc-tree; where rows
need columns — size, modified date — that is cnc-treetable2.
Bind expanded for any explorer the user keeps open beside their work, or every
re-render folds it back to its initial shape.