Раскрытие и сворачивание узлов

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

Компонент TreeView

TreeView представляет собой контейнер для узлов дерева (TreeNode). Каждый узел может содержать вложенные узлы, формируя иерархическую структуру. Основные свойства компонента:

label — текст, отображаемый в узле.
expanded — булево значение, указывающее, раскрыт ли узел.
children — массив дочерних узлов (TreeNode), если есть.
on:toggle — событие, срабатывающее при изменении состояния раскрытия узла.

Пример структуры узла:

<script>
  import { TreeView, TreeNode } from 'carbon-components-svelte';

  let treeData = [
    {
      label: 'Документы',
      expanded: true,
      children: [
        { label: 'Отчёты.pdf' },
        { label: 'Бюджет.xlsx' },
      ]
    },
    {
      label: 'Изображения',
      expanded: false,
      children: [
        { label: 'Фото1.jpg' },
        { label: 'Фото2.png' },
      ]
    }
  ];
</script>

<TreeView>
  {#each treeData as node}
    <TreeNode {node.label} {node.expanded}>
      {#if node.children}
        {#each node.children as child}
          <TreeNode label={child.label} />
        {/each}
      {/if}
    </TreeNode>
  {/each}
</TreeView>

В данном примере узлы Документы и Изображения могут быть раскрыты или свернуты. Свойство expanded позволяет задать начальное состояние.

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

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

Программное управление осуществляется через привязку свойства expanded к переменной:

<script>
  let isExpanded = false;
</script>

<TreeNode label="Проекты" bind:expanded={isExpanded}>
  <TreeNode label="Проект A" />
  <TreeNode label="Проект B" />
</TreeNode>

<button on:click={() => isExpanded = !isExpanded}>
  {isExpanded ? 'Свернуть' : 'Раскрыть'}
</button>

Привязка bind:expanded обеспечивает двустороннее обновление состояния: изменения через кнопку или кликом на узел будут синхронизированы.

Отслеживание событий toggle

Событие toggle позволяет реагировать на действия пользователя:

<TreeNode label="Файлы" on:toggle={(e) => console.log('Узел изменён', e.detail.expanded)}>
  <TreeNode label="Документ.txt" />
</TreeNode>

Свойство e.detail.expanded возвращает текущее состояние раскрытия узла после клика. Это особенно полезно для динамической загрузки данных при раскрытии узла.

Динамическая подгрузка дочерних узлов

Для больших иерархий нецелесообразно сразу загружать все узлы. Carbon Components Svelte позволяет подгружать узлы динамически при раскрытии:

<script>
  let childrenLoaded = false;
  let childNodes = [];

  function loadChildren() {
    if (!childrenLoaded) {
      childNodes = [
        { label: 'Новый файл 1' },
        { label: 'Новый файл 2' }
      ];
      childrenLoaded = true;
    }
  }
</script>

<TreeNode label="Загрузить файлы" on:toggle={(e) => { if (e.detail.expanded) loadChildren(); }}>
  {#each childNodes as child}
    <TreeNode label={child.label} />
  {/each}
</TreeNode>

Такой подход уменьшает нагрузку на DOM и повышает производительность при больших структурах данных.

Стиль и визуальная индикация

Carbon Components Svelte предоставляет визуальные индикаторы для раскрытых и свернутых узлов. Узлы с дочерними элементами автоматически отображают стрелку, указывающую состояние раскрытия. Свойство disabled позволяет сделать узел неактивным, не влияя на его дочерние элементы:

<TreeNode label="Архив" disabled>
  <TreeNode label="Старые отчёты.pdf" />
</TreeNode>