Lists

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

Основные концепции списков

Список — это компонент, отображающий коллекцию элементов, которая может быть статической или динамической. Ключевые аспекты:

  • Динамическое обновление: элементы списка могут добавляться, удаляться или изменяться без перезагрузки страницы.
  • Реактивность: привязка данных к компоненту позволяет автоматически обновлять DOM при изменении состояния.
  • Оптимизация рендеринга: использование ключей (key) для каждого элемента списка предотвращает полное перерисовывание, обновляя только изменившиеся элементы.

Пример базового списка с реактивными данными:

<script>
  let items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
</script>

<ul>
  {#each items as item (item)}
    <li>{item}</li>
  {/each}
</ul>

Здесь ключ (item) используется для оптимизации перерисовки элементов при изменении массива.

Сложные списки и виртуализация

Для больших массивов данных стандартная генерация элементов через {#each} может быть неэффективной. Современные UI-библиотеки предоставляют виртуализированные списки, где в DOM отображается только часть элементов, видимая пользователю. Это значительно снижает нагрузку на рендеринг.

Пример использования виртуализации с SvelteKit UI lib:

<script>
  import { VirtualList } from 'sveltekit-ui';
  let items = Array.from({ length: 10000 }, (_, i) => `Элемент ${i + 1}`);
</script>

<VirtualList items={items} itemHeight={40}>
  {#each items as item}
    <div class="list-item">{item}</div>
  {/each}
</VirtualList>

Преимущества виртуализации:

  • Экономия ресурсов при отображении тысяч элементов.
  • Поддержка плавной прокрутки без задержек.
  • Возможность динамического изменения размеров элементов через itemHeight или функции измерения.

Интерактивные списки

Современные списки часто требуют интерактивности: выбор элементов, drag-and-drop, контекстные действия.

  1. Выбор элементов:
<script>
  let selected = new Set();
  let items = ['Элемент A', 'Элемент B', 'Элемент C'];

  function toggle(item) {
    selected.has(item) ? selected.delete(item) : selected.add(item);
  }
</script>

<ul>
  {#each items as item (item)}
    <li class:selected={selected.has(item)} on:click={() => toggle(item)}>
      {item}
    </li>
  {/each}
</ul>

<style>
  .selected {
    background-color: #cce5ff;
  }
</style>
  1. Drag-and-drop:

SvelteKit UI библиотеки предоставляют встроенные методы для drag-and-drop. Компоненты часто используют события on:dragstart, on:dragend и связывают позиции с состоянием массива.

<script>
  import { sortable } from 'sveltekit-ui/actions';
  let items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
</script>

<ul use:sortable={{ items }}>
  {#each items as item (item)}
    <li>{item}</li>
  {/each}
</ul>

Преимущества: автоматическая перестановка элементов и обновление состояния массива без ручного манипулирования DOM.

Комбинация списков с другими UI-компонентами

Списки часто интегрируются с поиском, пагинацией и фильтрацией:

<script>
  let items = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape'];
  let query = '';
  $: filtered = items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
</script>

<input type="text" bind:value={query} placeholder="Поиск..." />

<ul>
  {#each filtered as item (item)}
    <li>{item}</li>
  {/each}
</ul>

Пояснения:

  • Реактивная переменная filtered автоматически пересчитывается при изменении query.
  • Такой подход обеспечивает мгновенный поиск без повторного запроса к серверу.
  • В больших приложениях можно комбинировать виртуализацию с фильтрацией для высокой производительности.

Стиль и темизация списков

SvelteKit UI libs поддерживают CSS-классы и темизацию, что позволяет:

  • Легко менять визуальные состояния (hover, active, selected).
  • Поддерживать адаптивность и темный/светлый режим.
  • Использовать встроенные темы и кастомизировать их через переменные CSS.
<ul class="list primary">
  {#each items as item (item)}
    <li class="list-item">{item}</li>
  {/each}
</ul>

<style>
  .list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .list-item {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
  }

  .list-item:hover {
    background-color: #f0f0f0;
  }

  .primary .list-item.selected {
    background-color: #007bff;
    color: #fff;
  }
</style>

Итоговые возможности

Списки в SvelteKit UI libs — это мощный инструмент для создания динамичных, отзывчивых и интерактивных интерфейсов. Ключевые возможности:

  • Реактивное обновление данных с автоматическим рендерингом.
  • Виртуализация для больших массивов.
  • Интерактивность: выбор, drag-and-drop, контекстные действия.
  • Фильтрация, поиск и пагинация.
  • Гибкая стилизация и интеграция с темами.

Эффективное использование этих компонентов позволяет создавать производительные и удобные интерфейсы, минимизируя ручное управление DOM и повышая масштабируемость приложений.

Оглавление