Компоненты навигации

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

Навигационные бары (Navbar)

Navbar — горизонтальная панель, обычно располагающаяся в верхней части страницы. В SvelteKit UI библиотеках она реализуется как компонент с набором стандартных пропсов:

  • items — массив объектов, описывающих пункты меню: { label: string, href: string, icon?: Component }.
  • active — идентификатор текущего активного пункта.
  • orientation — может принимать значения "horizontal" или "vertical".
  • theme — настройки внешнего вида, например "light" или "dark".

Пример использования:

<script>
  import { Navbar, NavItem } from 'sveltekit-ui';
  const menu = [
    { label: 'Главная', href: '/' },
    { label: 'Блог', href: '/blog' },
    { label: 'Контакты', href: '/contact' }
  ];
</script>

<Navbar {menu} active="/blog" theme="light" />

Особенности реализации:

  • Реактивность активного пункта через привязку к маршруту SvelteKit ($page.url.pathname).
  • Поддержка вложенных меню (Dropdown) через NavItem.children.
  • Возможность кастомизации через слоты (<slot name="item">) для добавления иконок или дополнительных элементов.

Боковые панели (Sidebar)

Боковые панели используются для вертикальной навигации и часто применяются в административных интерфейсах и дашбордах.

Основные пропсы компонентов Sidebar:

  • collapsed — логическое значение, указывающее свернута ли панель.
  • items — структура меню с поддержкой вложенных пунктов.
  • position — "left" или "right", определяет расположение панели.
  • width — настраиваемая ширина панели в пикселях или процентах.

Пример:

<script>
  import { Sidebar, SidebarItem } from 'sveltekit-ui';

  const sidebarItems = [
    { label: 'Панель управления', href: '/dashboard' },
    { label: 'Отчёты', href: '/reports', children: [
      { label: 'Ежедневные', href: '/reports/daily' },
      { label: 'Месячные', href: '/reports/monthly' }
    ]}
  ];
</script>

<Sidebar items={sidebarItems} collapsed={false} position="left" />

Ключевые моменты:

  • Поддержка анимации разворачивания/сворачивания через CSS transition или встроенные функции Svelte.
  • Слот для кастомных иконок и индикаторов активности.
  • Динамическая подгрузка элементов меню через реактивные данные.

Хлебные крошки (Breadcrumbs)

Breadcrumbs отображают путь пользователя в приложении и помогают быстро перемещаться между уровнями структуры.

Основные свойства:

  • items — массив объектов { label, href }.
  • separator — строка или компонент, используемый между элементами ('/', '>', или иконка).

Пример:

<script>
  import { Breadcrumbs, BreadcrumbItem } from 'sveltekit-ui';

  const crumbs = [
    { label: 'Главная', href: '/' },
    { label: 'Каталог', href: '/catalog' },
    { label: 'Электроника', href: '/catalog/electronics' }
  ];
</script>

<Breadcrumbs items={crumbs} separator=">" />

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

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

Панели вкладок (Tabs)

Tabs позволяют организовать контент в несколько разделов с переключением без перезагрузки страницы.

Пропсы:

  • tabs — массив объектов { label, component }.
  • active — индекс или идентификатор активной вкладки.
  • lazy — загрузка контента вкладки только при активации.

Пример:

<script>
  import { Tabs, Tab } from 'sveltekit-ui';
  import HomeContent from './HomeContent.svelte';
  import ProfileContent from './ProfileContent.svelte';

  const tabList = [
    { label: 'Главная', component: HomeContent },
    { label: 'Профиль', component: ProfileContent }
  ];
</script>

<Tabs {tabList} active={0} lazy={true} />

Особенности реализации:

  • Использование реактивных переменных для управления активной вкладкой.
  • Поддержка кастомной анимации переключения.
  • Возможность асинхронной подгрузки содержимого каждой вкладки.

Меню и Dropdown

Компоненты Dropdown облегчают создание контекстных меню и вложенных навигационных элементов.

Основные параметры:

  • items — массив объектов меню, поддерживающий вложенность.
  • trigger — элемент или событие, которое открывает меню.
  • placement — позиция меню относительно триггера ("bottom-start", "top-end" и др.).

Пример:

<script>
  import { Dropdown, DropdownItem } from 'sveltekit-ui';

  const dropdownItems = [
    { label: 'Редактировать', action: () => console.log('Edit') },
    { label: 'Удалить', action: () => console.log('Delete') }
  ];
</script>

<Dropdown items={dropdownItems}>
  <button>Действия</button>
</Dropdown>

Важные моменты:

  • Меню поддерживает keyboard navigation (стрелки, Enter, Escape).
  • Возможность использовать кастомные компоненты для каждого пункта.
  • Управление открытием/закрытием через bindable open свойство.

Адаптивность и интеграция с SvelteKit

Все навигационные компоненты в SvelteKit UI библиотеке спроектированы с учётом:

  • Реактивного маршрута: $page.url позволяет автоматически подсвечивать активные элементы.
  • SSR и CSR: компоненты корректно рендерятся как на сервере, так и на клиенте.
  • Мобильной адаптивности: поддержка скрытия элементов, гамбургер-меню и свайп-навигации.

Комбинация этих возможностей позволяет строить интерфейсы с богатой навигацией, минимизируя необходимость ручного управления состояниями и стилями.

Оглавление