HeaderGlobalBar

HeaderGlobalBar — это компонент библиотеки Carbon Components Svelte, предназначенный для создания глобальной панели навигации, обычно располагаемой в верхней части интерфейса. Он используется совместно с Header, обеспечивая единый доступ к важным функциям приложения, таким как уведомления, поиск, профиль пользователя и настройки.

Основные особенности

  • Гибкость и настраиваемость: позволяет добавлять несколько элементов глобальной панели, включая кнопки и выпадающие меню.
  • Интеграция с другими компонентами Carbon: легко комбинируется с HeaderGlobalAction, HeaderMenu, OverflowMenu.
  • Поддержка событий и реактивного состояния Svelte: компоненты реагируют на изменение состояния и пользовательские действия.

Структура компонента

Компонент HeaderGlobalBar обычно оборачивает один или несколько элементов HeaderGlobalAction. Структура типичного компонента выглядит так:

<script>
  import { HeaderGlobalBar, HeaderGlobalAction } from 'carbon-components-svelte';
  import { Notification20, User20, Settings20 } from 'carbon-icons-svelte';
</script>

<HeaderGlobalBar>
  <HeaderGlobalAction
    label="Уведомления"
    icon={Notification20}
    on:click={() => console.log('Уведомления')}
  />
  <HeaderGlobalAction
    label="Профиль"
    icon={User20}
    on:click={() => console.log('Профиль')}
  />
  <HeaderGlobalAction
    label="Настройки"
    icon={Settings20}
    on:click={() => console.log('Настройки')}
  />
</HeaderGlobalBar>

Свойства HeaderGlobalBar

HeaderGlobalBar сам по себе не требует обязательных свойств, однако поддерживает следующие параметры для настройки:

  • class — позволяет добавлять собственные CSS-классы.
  • use — поддержка Svelte actions для расширенной логики или интеграции с анимациями.
  • slot — позволяет вставлять кастомные элементы внутрь глобальной панели.

HeaderGlobalAction: ключевой элемент панели

Каждый элемент глобальной панели представлен компонентом HeaderGlobalAction и поддерживает:

  • label: текстовое описание кнопки (обязательное для доступности).
  • icon: иконка из библиотеки carbon-icons-svelte.
  • on:click: обработчик клика для выполнения действия.
  • disabled: делает кнопку неактивной, предотвращая пользовательские действия.

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

<HeaderGlobalAction
  label="Справка"
  icon={Question20}
  on:click={() => dispatch('helpClicked')}
/>

Интеграция с OverflowMenu

Для уменьшения загромождения интерфейса можно использовать OverflowMenu, помещая часть глобальных действий в выпадающий список:

<HeaderGlobalBar>
  <HeaderGlobalAction label="Поиск" icon={Search20} />
  <OverflowMenu>
    <HeaderGlobalAction label="Настройки" icon={Settings20} />
    <HeaderGlobalAction label="Справка" icon={Question20} />
  </OverflowMenu>
</HeaderGlobalBar>

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

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

HeaderGlobalBar автоматически наследует стили и адаптивное поведение из компонента Header. Для кастомизации внешнего вида можно использовать:

  • CSS-переменные Carbon: позволяют изменять цвета, размеры и отступы.
  • Svelte-классы: добавлять свои стили через class.

Пример переопределения цвета иконок:

<style>
  .custom-global-bar :global(svg) {
    fill: #ff6600;
  }
</style>

<HeaderGlobalBar class="custom-global-bar">
  <HeaderGlobalAction label="Профиль" icon={User20} />
</HeaderGlobalBar>

События и реактивность

HeaderGlobalBar как контейнер не генерирует события сам по себе, но каждый HeaderGlobalAction поддерживает стандартное событие click. Можно создавать реактивные привязки и связывать состояние кнопок с Svelte store:

<script>
  import { writable } from 'svelte/store';
  const notifications = writable(3);
</script>

<HeaderGlobalBar>
  <HeaderGlobalAction
    label="Уведомления"
    icon={Notification20}
    on:click={() => notifications.update(n => n + 1)}
  />
  {#if $notifications > 0}
    <span class="notification-count">{$notifications}</span>
  {/if}
</HeaderGlobalBar>

Лучшие практики использования

  • Группировать функционально связанные действия: основное действие слева, второстепенные — через OverflowMenu.
  • Поддерживать доступность: всегда указывать label для каждой кнопки.
  • Минимизировать количество элементов: перегруженная глобальная панель усложняет UX.
  • Использовать иконки Carbon: единый визуальный стиль интерфейса.

Совместимость с Svelte

Компонент полностью использует возможности реактивности Svelte, что позволяет:

  • Изменять видимость кнопок через привязку состояния.
  • Обновлять иконки динамически.
  • Создавать сложные анимации при открытии меню.

Пример динамического изменения иконки:

<script>
  import { HeaderGlobalAction } from 'carbon-components-svelte';
  import { User20, UserFavorite20 } from 'carbon-icons-svelte';
  let favorite = false;
</script>

<HeaderGlobalAction
  label="Профиль"
  icon={favorite ? UserFavorite20 : User20}
  on:click={() => favorite = !favorite}
/>

Этот подход позволяет создавать глобальные панели, которые остаются компактными, интерактивными и полностью интегрированными с архитектурой Svelte, сохраняя стилистику Carbon Design System.

Оглавление