Tree
A tree of labeled nodes with optional glyphs, which the person browses with the arrow keys and typing, and which can let them reorder its nodes. Clicking a node, or pressing Enter or Space on it, activates it, and a branch also opens or closes. When movable, dragging a node or pressing Alt with an arrow key proposes a move, which assistive technology hears; the owner applies it to its nodes, and the rows then glide to their new places, unless reduced motion is preferred, with the moved node keeping focus. A move replaces the announcement of an earlier move in the same tree that assistive technology has not yet spoken, so a held key is heard as its last move.
Examples
Loading…
States
Loading…
API
Selector nol-tree
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
nodes | readonly TreeNode[] | Required | The top-level nodes, each with its children. A branch that starts open opens the first time it appears. |
label | string | Required | The tree's accessible name. |
current | string | null | The id of the current node, which is highlighted, selected for assistive technology and the tree's tab stop, or null for none; null when not bound. |
movable | boolean | false | Whether the person can move nodes, by dragging or with Alt and the arrow keys; false when not bound. |
Outputs
| Name | Type | Description |
|---|---|---|
activated | TreeNode | Emits the node the person activated; the owner usually makes it |
moved | TreeMove | Emits a move the person made in a movable tree. The tree does not change its nodes; the owner applies the move, usually with |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus into the tree, its one Tab stop: to the row focused last, or the current row, or the first. |
| Arrow Down | Moves to the next row. |
| Arrow Up | Moves to the previous row. |
| Arrow Right | Opens a closed branch, or moves into an open one. |
| Arrow Left | Closes an open branch, or moves to the row's parent. |
| Home | Moves to the first row. |
| End | Moves to the last row. |
| A letter | Moves to a row whose label starts with what is typed. |
| Enter | Chooses the row, and opens or closes a branch. |
| Space | Chooses the row, and opens or closes a branch. |
| Alt+Arrow Up | In a movable tree, moves the focused row before its previous sibling. |
| Alt+Arrow Down | In a movable tree, moves the focused row after its next sibling. |
| Alt+Arrow Right | In a movable tree, moves the focused row into the branch before it, as its last child, opening that branch; Left in a right-to-left layout. |
| Alt+Arrow Left | In a movable tree, moves the focused row out to just after its parent; Right in a right-to-left layout. |
It is a tree named by its label; each row is a tree item at its level, marked expanded or collapsed when it is a branch, and the current row is marked selected.
A row is named by its label, which wraps when it is long; its twistie and its icon are hidden from assistive technology.
A movable tree's rows name the Alt and arrow keys that move them as their keyboard shortcuts; its owner applies each move the tree reports, the focus stays on the moved row, and the move is announced politely, such as Moved Notes to position 2 of 3.
Specification
Loading…