SideNavItems и SideNavLink

SideNavItems и SideNavLink являются ключевыми компонентами библиотеки Carbon Components Svelte для построения боковых навигационных панелей. Они обеспечивают иерархию навигации и гибкость управления ссылками, подменю и активными состояниями.

SideNavItems

SideNavItems служит контейнером для группирования элементов навигации. Он может содержать как отдельные ссылки, так и вложенные группы, создавая древовидную структуру.

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

  • title (string) — заголовок группы элементов навигации. Отображается, если используется вложенная структура.
  • isActive (boolean) — указывает, активна ли группа в данный момент. Используется для подсветки активной ветки навигации.
  • class (string) — возможность добавления пользовательских CSS-классов.
  • expanded (boolean) — определяет, раскрыта ли группа вложенных элементов по умолчанию.

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

<script>
  import { SideNavItems, SideNavLink } from 'carbon-components-svelte';
</script>

<SideNavItems title="Продукты" expanded={true}>
  <SideNavLink href="/analytics" isActive={true}>Аналитика</SideNavLink>
  <SideNavLink href="/reports">Отчёты</SideNavLink>
  <SideNavItems title="Дополнительно">
    <SideNavLink href="/settings">Настройки</SideNavLink>
  </SideNavItems>
</SideNavItems>

В этом примере показана вложенная структура: группа “Продукты” содержит как простые ссылки, так и подгруппу “Дополнительно”. Атрибут expanded раскрывает подгруппу по умолчанию, а isActive подсвечивает текущую активную ссылку.

SideNavLink представляет отдельную ссылку в боковой навигации. Она может быть как обычной ссылкой, так и кнопкой для маршрутизации в SPA (Single Page Application).

Ключевые свойства SideNavLink:

  • href (string) — URL или маршрут, на который ведёт ссылка.
  • isActive (boolean) — определяет активное состояние ссылки. Если true, ссылка подсвечивается.
  • icon (SvelteComponent) — позволяет добавить иконку перед текстом ссылки.
  • class (string) — добавление пользовательских стилей.
  • nested (boolean) — указывает, что ссылка является вложенной в другую группу.

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

<script>
  import { SideNavLink } from 'carbon-components-svelte';
  import { Dashboard16 } from '@carbon/icons-svelte';
</script>

<SideNavLink href="/dashboard" isActive={true} icon={Dashboard16}>
  Панель управления
</SideNavLink>
<SideNavLink href="/users">
  Пользователи
</SideNavLink>

Здесь компонент SideNavLink интегрирован с библиотекой иконок Carbon. Атрибут isActive подсвечивает текущую страницу, а icon визуально облегчает восприятие навигации.

Вложенные структуры и динамическая генерация

SideNavItems может содержать динамически создаваемые ссылки, что полезно для генерации навигации из JSON-данных или API.

Пример динамической генерации:

<script>
  import { SideNavItems, SideNavLink } from 'carbon-components-svelte';

  const menu = [
    { title: 'Аналитика', href: '/analytics', active: true },
    { title: 'Отчёты', href: '/reports' },
    { title: 'Настройки', href: '/settings', children: [
      { title: 'Пользователи', href: '/settings/users' },
      { title: 'Роли', href: '/settings/roles' }
    ]}
  ];
</script>

<SideNavItems title="Меню">
  {#each menu as item}
    {#if item.children}
      <SideNavItems title={item.title}>
        {#each item.children as child}
          <SideNavLink href={child.href}>{child.title}</SideNavLink>
        {/each}
      </SideNavItems>
    {:else}
      <SideNavLink href={item.href} isActive={item.active}>{item.title}</SideNavLink>
    {/if}
  {/each}
</SideNavItems>

Использование #each позволяет создавать сложные иерархии с любым уровнем вложенности, при этом полностью сохраняя свойства активной ссылки и возможности раскрытия подменю.

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

Оба компонента поддерживают добавление CSS-классов через атрибут class. Это позволяет интегрировать боковую навигацию в уникальный дизайн проекта. Также можно комбинировать стандартные Carbon-классы с собственными, чтобы изменить цвета, отступы или поведение при наведении.

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

<SideNavItems title="Документы" class="custom-sidenav-group">
  <SideNavLink href="/docs/tutorial" class="custom-link">Учебник</SideNavLink>
</SideNavItems>

<style>
  .custom-sidenav-group {
    background-color: #f4f4f4;
    padding: 10px;
  }
  .custom-link {
    color: #0f62fe;
    font-weight: 500;
  }
</style>

Итоговая структура и рекомендации

  • SideNavItems — контейнер для групп и подгрупп навигации, поддерживает вложенные элементы и раскрытие.
  • SideNavLink — элемент навигации с активным состоянием, опциональной иконкой и возможностью быть вложенным.
  • Динамическая генерация через циклы #each позволяет строить адаптивные и изменяемые меню.
  • Пользовательская стилизация через class сохраняет гибкость дизайна без изменения исходной логики Carbon Components.

Эти компоненты образуют основу боковой навигации в Svelte-проектах, позволяя строить иерархические, визуально структурированные и функциональные панели.

Оглавление