TreeView для иерархических данных

TreeView в Carbon Components Svelte представляет собой компонент для отображения и управления иерархическими данными в виде древовидной структуры. Он позволяет пользователю разворачивать и сворачивать узлы, выбирать элементы и взаимодействовать с большим объемом связанных данных. Компонент строится на основе стандартных принципов Svelte, обеспечивая высокую производительность и гибкость в настройке.

Структура данных

Для корректного отображения TreeView требуется дерево объектов, где каждый узел может содержать дочерние элементы. Структура обычно выглядит следующим образом:

const treeData = [
  {
    id: 'root1',
    label: 'Корневой элемент 1',
    children: [
      { id: 'child1', label: 'Дочерний элемент 1' },
      {
        id: 'child2',
        label: 'Дочерний элемент 2',
        children: [
          { id: 'grandchild1', label: 'Внук 1' },
        ]
      }
    ]
  },
  {
    id: 'root2',
    label: 'Корневой элемент 2',
  }
];

Ключевые моменты структуры:

  • id — уникальный идентификатор узла, используется для отслеживания состояния выбора и раскрытия.
  • label — текст, отображаемый пользователю.
  • children — массив дочерних узлов; если отсутствует, узел считается листовым.

Использование компонента TreeView

В Carbon Components Svelte для создания дерева используется компонент вместе с . Пример базовой реализации:




  {#each treeData as node}
    
  {/each}

Особенности:

  • автоматически проверяет наличие дочерних элементов и отображает стрелку для раскрытия, если children существует.
  • Использование {#each} позволяет динамически рендерить дерево на основе данных.

Управление состоянием узлов

TreeView поддерживает два основных состояния узлов:

  1. Раскрыт/Свернут (expanded)
  2. Выбран/Не выбран (selected)

Пример управления состоянием:


  {#each treeData as node (node.id)}
     node.expanded = e.detail.expanded}
      on:select={(e) => node.selected = e.detail.selected}
    />
  {/each}

Пояснения:

  • expanded и selected синхронизируют визуальное состояние с данными.
  • События toggle и select позволяют реагировать на пользовательские действия и обновлять модель данных.

Кастомизация узлов

Каждый можно расширять дополнительными элементами интерфейса:


  

    {node.label}
    {#if node.badge}
      {node.badge}
    {/if}
  • Использование слота label позволяет добавить иконки, счетчики или индикаторы статуса.
  • Это особенно полезно для приложений с большим количеством метаданных на каждом узле.

Асинхронная загрузка данных

TreeView может работать с динамическими данными. Для этого дочерние элементы подгружаются по событию раскрытия:

 {
  if (e.detail.expanded && !node.children) {
    node.children = await fetchChildren(node.id);
  }
}} />
  • Дочерние элементы загружаются только при необходимости, что повышает производительность при больших иерархиях.
  • Функция fetchChildren возвращает массив объектов, соответствующих структуре дерева.

Стилизация

Carbon Components Svelte наследует стили Carbon Design System. Для TreeView доступны стандартные классы:

  • .bx--tree-view — контейнер дерева
  • .bx--tree-node — отдельный узел
  • .bx--tree-node__label — текст узла
  • .bx--tree-node__toggle — стрелка для раскрытия

С помощью CSS можно добавлять кастомные стили для узлов:

.bx--tree-node__label {
  font-weight: 600;
}

.bx--tree-node__label .badge {
  background-color: #0f62fe;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

Поддержка клавиатурной навигации

TreeView интегрирует базовую навигацию с клавиатуры:

  • Arrow Up/Down — перемещение по узлам
  • Arrow Right — раскрыть узел
  • Arrow Left — свернуть узел
  • Enter/Space — выбрать узел

Это делает компонент доступным для пользователей с ограниченными возможностями.

Рекомендации по производительности

  • Использовать #each с ключами (key={node.id}) для минимизации перерисовки.
  • При больших деревьях применить асинхронную загрузку дочерних узлов.
  • Хранить состояние expanded и selected вне компонентов, чтобы избежать лишнего рендеринга.
Оглавление