Компонент Dropdown Menu

Компонент Dropdown Menu предназначен для создания интерактивных выпадающих списков с набором опций. В SvelteKit UI его реализация строится на принципах реактивности Svelte и модульности компонентов. Основные элементы Dropdown Menu включают:

  • Trigger – элемент, который открывает или закрывает меню (обычно кнопка или иконка).
  • Menu – контейнер со списком элементов.
  • Item – отдельный пункт меню.
  • Group / Label / Separator – дополнительные элементы для организации структуры меню.
<script>
  import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownLabel, DropdownSeparator } from 'sveltekit-ui';
</script>

<Dropdown>
  <DropdownTrigger>
    Открыть меню
  </DropdownTrigger>
  <DropdownMenu>
    <DropdownLabel>Основные действия</DropdownLabel>
    <DropdownItem>Создать</DropdownItem>
    <DropdownItem>Редактировать</DropdownItem>
    <DropdownSeparator />
    <DropdownItem>Удалить</DropdownItem>
  </DropdownMenu>
</Dropdown>

Структура и иерархия

Внутренняя структура компонента основана на вложенности:

  1. Dropdown – родительский компонент, управляет состоянием открыто/закрыто.
  2. DropdownTrigger – отвечает за событие открытия меню. Может быть любым интерактивным элементом.
  3. DropdownMenu – содержит список пунктов и группировку.
  4. DropdownItem – пункт меню, который может содержать текст, иконку или дополнительные элементы.
  5. DropdownLabel – текстовая метка для логической группировки элементов.
  6. DropdownSeparator – визуальный разделитель между группами элементов.

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

Компонент поддерживает два режима управления состоянием:

  • Автоматический – открытие и закрытие происходит при клике на триггер.
  • Контролируемый – состояние управляется через проп open и событие on:change.
<script>
  let isOpen = false;

  function toggleMenu() {
    isOpen = !isOpen;
  }
</script>

<Dropdown {isOpen} on:change={(e) => isOpen = e.detail}>
  <DropdownTrigger on:click={toggleMenu}>Меню</DropdownTrigger>
  <DropdownMenu>
    <DropdownItem>Пункт 1</DropdownItem>
    <DropdownItem>Пункт 2</DropdownItem>
  </DropdownMenu>
</Dropdown>

Работа с событиями

Dropdown Menu генерирует события, которые позволяют интегрировать его с логикой приложения:

  • on:select – вызывается при выборе элемента. Передаёт выбранное значение.
  • on:open / on:close – события открытия и закрытия меню.
  • on:change – обновление состояния открытости.
<Dropdown on:select={(e) => console.log('Выбран:', e.detail)}>
  <DropdownTrigger>Меню</DropdownTrigger>
  <DropdownMenu>
    <DropdownItem value="create">Создать</DropdownItem>
    <DropdownItem value="edit">Редактировать</DropdownItem>
  </DropdownMenu>
</Dropdown>

Стилизация и кастомизация

SvelteKit UI предоставляет гибкую систему кастомизации через пропсы и слоты:

  • size – размер компонента (small, medium, large).
  • placement – позиция меню относительно триггера (bottom-start, bottom-end, top-start, top-end).
  • class / style – возможность добавления собственных CSS классов.
<Dropdown placement="bottom-end" class="custom-dropdown">
  <DropdownTrigger>Меню</DropdownTrigger>
  <DropdownMenu class="menu-style">
    <DropdownItem>Опция 1</DropdownItem>
    <DropdownItem>Опция 2</DropdownItem>
  </DropdownMenu>
</Dropdown>

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

Компонент полностью поддерживает клавиатурные события для доступности:

  • ArrowUp / ArrowDown – перемещение по элементам.
  • Enter / Space – выбор элемента.
  • Escape – закрытие меню.

Эта функциональность реализована по умолчанию, что делает Dropdown Menu доступным без дополнительных библиотек.

Асинхронная загрузка элементов

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

<script>
  import { onMount } from 'svelte';
  let items = [];

  onMount(async () => {
    const response = await fetch('/api/options');
    items = await response.json();
  });
</script>

<Dropdown>
  <DropdownTrigger>Меню</DropdownTrigger>
  <DropdownMenu>
    {#each items as item}
      <DropdownItem value={item.id}>{item.name}</DropdownItem>
    {/each}
  </DropdownMenu>
</Dropdown>

Интеграция с формами и состоянием приложения

Dropdown Menu легко интегрируется с состоянием SvelteKit и формами. Например, с использованием реактивной переменной:

<script>
  let selected = '';
</script>

<Dropdown on:select={(e) => selected = e.detail}>
  <DropdownTrigger>{selected || 'Выберите опцию'}</DropdownTrigger>
  <DropdownMenu>
    <DropdownItem value="option1">Опция 1</DropdownItem>
    <DropdownItem value="option2">Опция 2</DropdownItem>
  </DropdownMenu>
</Dropdown>

<p>Выбрано: {selected}</p>

Эта интеграция позволяет использовать Dropdown Menu как часть сложных интерфейсов с фильтрацией, сортировкой или управлением состоянием.

Расширенные возможности

  • Nested Dropdowns – вложенные меню для многоуровневой навигации.
  • Icons and Badges – добавление иконок и индикаторов состояния к элементам.
  • Disabled Items – возможность блокировки отдельных пунктов меню.
<Dropdown>
  <DropdownTrigger>Меню</DropdownTrigger>
  <DropdownMenu>
    <DropdownItem value="open">Открыть</DropdownItem>
    <DropdownItem value="save" disabled>Сохранить</DropdownItem>
    <DropdownItem value="delete">Удалить</DropdownItem>
  </DropdownMenu>
</Dropdown>

Использование этих возможностей делает Dropdown Menu в SvelteKit UI мощным инструментом для построения интерактивных и адаптивных пользовательских интерфейсов.

Оглавление