Toolbar

Toolbar — это компонент интерфейса, предназначенный для размещения элементов управления, кнопок, фильтров и навигационных элементов в горизонтальной или вертикальной ориентации. В экосистеме SvelteKit он часто используется вместе с библиотеками UI, такими как Svelte Material UI, Skeleton UI или Flowbite Svelte, предоставляя готовые стилизованные элементы, которые можно интегрировать с реактивными данными.

Создание Toolbar

В SvelteKit Toolbar реализуется через компонент-контейнер, который может принимать различные пропсы для конфигурации. Например, для горизонтального тулбара:




   handleClick('home')} active={activeButton === 'home'}>
    Home
  
   handleClick('search')} active={activeButton === 'search'}>
    Search
  
   handleClick('settings')} active={activeButton === 'settings'}>
    Settings

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

  • active — проп, который позволяет визуально выделять текущую выбранную кнопку.
  • on:click — стандартный синтаксис Svelte для подписки на события.
  • Toolbar действует как контейнер, автоматически выравнивая дочерние элементы и поддерживая адаптивность.

Горизонтальный и вертикальный режимы

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


  Dashboard
  Reports
  Users

orientation принимает значения:

  • "horizontal" — по умолчанию, кнопки располагаются слева направо.
  • "vertical" — кнопки располагаются сверху вниз, удобно для боковых панелей.

Разделители и группы кнопок

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


  New
  Open
  
  Save
  Export
  • ToolbarDivider добавляет горизонтальную или вертикальную линию, отделяя группы кнопок.
  • Можно использовать вложенные
    или
    с классами для создания кастомных разделов.

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

Toolbar часто взаимодействует с состоянием приложения. Например, динамическая генерация кнопок:




  {#each tools as tool}
     selectTool(tool)} active={activeTool === tool.name}>
      {tool.icon} {tool.name}
    
  {/each}

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

  • #each позволяет создавать динамический набор кнопок.
  • Проп active может быть связан с реактивной переменной для визуального выделения.

Адаптивность и стилизация

Toolbar автоматически адаптируется под размеры контейнера, но для расширенной стилизации можно использовать CSS-переменные или Tailwind-классы:


  Home
  Settings
  • Классы Tailwind позволяют быстро управлять цветами, отступами и эффектами наведения.
  • Комбинация кастомных классов и пропсов orientation позволяет строить сложные интерфейсы с минимальным количеством кода.

Поддержка иконок и кастомного контента

ToolbarButton может содержать не только текст, но и иконки или любой Svelte-компонент:


  
    
    Profile
  
  
    ?
    Notifications
  • Это позволяет создавать интерфейсы, соответствующие современным стандартам UX/UI.
  • Смешение текста и SVG-иконок повышает наглядность элементов управления.

Использование Toolbar в Layout

Toolbar удобно интегрировать в верхние или боковые панели приложения:


  

    
      Home
      About
      Contact
  • Комбинируется с flex и grid для создания адаптивных макетов.
  • Может быть закреплён сверху (sticky) или слева (fixed) для постоянного доступа к элементам управления.
Оглавление