Внести вклад
Подробные руководства
Angular Aria

Tree

Обзор

Tree отображает иерархические данные, где элементы могут раскрываться, показывая потомков, или сворачиваться, скрывая их. Пользователи перемещаются стрелками, раскрывают и сворачивают узлы и опционально выбирают элементы для навигации или выбора данных.

Использование

Trees хорошо подходят для отображения иерархических данных, где пользователям нужно перемещаться по вложенным структурам.

Используйте trees, когда:

  • Строите навигацию по файловой системе
  • Показываете иерархии папок и документов
  • Создаёте вложенные структуры меню
  • Отображаете организационные диаграммы
  • Просматриваете иерархические данные
  • Реализуете навигацию сайта со вложенными секциями

Избегайте trees, когда:

  • Показываете плоские списки (вместо этого используйте Listbox)
  • Показываете таблицы данных (вместо этого используйте Grid)
  • Создаёте простые dropdown (вместо этого используйте Select)
  • Строите breadcrumb-навигацию (используйте паттерны breadcrumb)

Возможности

  • Иерархическая навигация — вложенная структура tree с раскрытием и сворачиванием
  • Режимы выбора — одиночный или множественный выбор с поведением explicit или follow-focus
  • Selection follows focus — опциональный автоматический выбор при смене фокуса
  • Клавиатурная навигация — стрелки, Home, End и type-ahead поиск
  • Раскрытие/сворачивание — стрелки вправо/влево или Enter для переключения родительских узлов
  • Отключённые элементы — отключение конкретных узлов с управлением фокусом
  • Режимы фокуса — стратегии roving tabindex или activedescendant
  • Поддержка RTL — навигация для языков справа налево

Примеры

Используйте tree для навигации, где клик по элементам запускает действия, а не выбирает их.

Задайте [nav]="true", чтобы включить режим навигации. Он использует aria-current для указания текущей страницы вместо выбора.

Одиночный выбор

Включите одиночный выбор для сценариев, где пользователи выбирают один элемент из tree.

Оставьте [multi]="false" (значение по умолчанию) для одиночного выбора. Пользователи нажимают Space, чтобы выбрать элемент в фокусе.

Множественный выбор

Позвольте пользователям выбирать несколько элементов из tree.

Задайте [multi]="true" на tree. Пользователи выбирают элементы по одному Space или диапазоны через Shift+стрелки.

Selection follows focus

Когда selection follows focus, элемент в фокусе выбирается автоматически. Это упрощает взаимодействие для сценариев навигации.

Задайте [selectionMode]="'follow'" на tree. Выбор автоматически обновляется, когда пользователи перемещаются стрелками.

Отключённые элементы tree

Отключайте конкретные узлы tree, чтобы предотвратить взаимодействие. Контролируйте, могут ли disabled-элементы получать фокус.

Когда [softDisabled]="true" на tree, disabled-элементы могут получать фокус, но не могут быть активированы или выбраны. Когда [softDisabled]="false", disabled-элементы пропускаются при клавиатурной навигации.

Тестирование

Angular Aria предоставляет component harnesses для тестирования компонентов tree. Пример использования harnesses в тесте компонента:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {TreeHarness} from '@angular/aria/tree/testing';
import {MyTreeComponent} from './my-tree'; // Your component

describe('MyTreeComponent', () => {
  let fixture: ComponentFixture<MyTreeComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MyTreeComponent],
    });

    fixture = TestBed.createComponent(MyTreeComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should navigate and expand tree items', async () => {
    const tree = await loader.getHarness(TreeHarness);

    // Get top-level structure representation
    expect(await tree.getTreeStructure()).toEqual({
      children: [{text: 'public'}, {text: 'src'}, {text: 'package.json'}],
    });

    // Get all items (currently visible)
    const items = await tree.getItems();
    expect(items.length).toBe(3);

    // Expand the first item ('public')
    expect(await items[0].isExpanded()).toBe(false);
    await items[0].click();
    expect(await items[0].isExpanded()).toBe(true);

    // Verifying tree structure updates after expansion
    expect(await tree.getTreeStructure()).toEqual({
      children: [
        {
          text: 'public',
          children: [{text: 'index.html'}, {text: 'styles.css'}],
        },
        {text: 'src'},
        {text: 'package.json'},
      ],
    });
  });
});

API reference

Подробную API-документацию смотрите в следующих API reference: