# Trees Pages under pages, a menu's items, folders: a list whose items open their own lists, each a link or a name, and moved by a handle. ## Examples `tree` on the list, `tree-item` on each item, its `tree-row` holding a `tree-toggle` - a `--toggle` button naming the item's `tree-group` in `aria-controls`, as on [collapse](collapse.md) - and the item's link. The groups close as `hidden="until-found"`, so the browser's find in page still opens them. A button with `command="--expand-all"` or `"--collapse-all"` for the tree opens or closes every group that holds items. ```html
``` ### Children from the server A group with `data-lazy` and no items fires `redz:expand` on it when it first opens. A page that loads the items cancels it and answers with a promise: the toggle is busy until it settles, and a refusal closes the group again for another try. The Archive above answers after 400 ms. ```js document.addEventListener('redz:expand', (event) => { event.preventDefault(); event.detail.respondWith(fetch('/pages?parent=' + event.target.dataset.parent) .then((answer) => answer.text()) .then((items) => event.target.insertAdjacentHTML('beforeend', items))); }); ``` ### Moved by a handle A tree with `data-reorder` moves its items as a list does - see [reordering](list-group.md#list-group-reorder) - and its menu of moves adds `data-move="in"`, to the end of the group of the item above, and `"out"`, after its parent; an item can go in where the item above has a `tree-group`, empty or not. `data-parent` names the hidden field of each item's parent, its value the item's key. ```html ``` ### The current page, actions and checks A row whose link has `aria-current` - the page open now - is tinted and its link bold. `tree-actions` at the end of a row holds its buttons: quiet until the row is hovered, holds the focus or has a menu open on a pointer screen, always shown on a touch screen. A `check` in a row posts by its own name, for a batch over the chosen pages. A search with [`data-filter`](list-group.md#list-group-filter) keeps the parents of a match. ```html ``` ## Keyboard and accessibility - The tree is a list of lists with buttons and links - the disclosure pattern: Tab goes from one control to the next, `Enter` or `Space` opens or closes a group, and the toggle says it in `aria-expanded`. It is not the ARIA tree widget, which the APG itself keeps for choosing, not for links. - A toggle is named after its item; its chevron points along the line of reading, mirrored right to left. - The moves are a menu on the handle, so a keyboard, a screen reader and a single tap move an item as a drag does; after a move the focus stays on the moved item's handle and its new place is said politely. ## Tokens From [`css/components/tree.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/tree.css), which declares no custom property of its own. It reads the theme's `--redz-space-12`, `--redz-space-8`, `--redz-border`, `--redz-space-4`, `--redz-control-height`, `--redz-control-height-sm`, `--redz-radius-6`, `--redz-primary-subtle`, `--redz-text`, `--redz-motion`, `--redz-ease`.