Header для шапки приложения

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

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

Header состоит из нескольких ключевых частей:

  1. Header Container (Header) Основной контейнер, который задаёт фоновый цвет, размеры и базовую структуру шапки. Он принимает следующие свойства:

    • aria-label — строка для доступности, описывающая назначение шапки.
    • fixed — логическое значение, фиксирует шапку в верхней части экрана при прокрутке.
    • expanded — управляет состоянием раскрытия навигационного меню на мобильных устройствах.

  2. Branding Section (HeaderName) Используется для отображения названия компании или приложения. Содержит:

    • prefix — дополнительный текст перед названием (например, «IBM»).
    • href — ссылка на главную страницу.
    • Поддержка иконок и логотипов через встроенные слоты.

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

    <Header>
  <HeaderName prefix="IBM" href="/">Carbon App</HeaderName>
</Header>

  3. Navigation (HeaderNavigation) Основной блок навигации, содержащий ссылки на разделы приложения.

    • HeaderMenuItem — элемент меню, может быть вложенным.
    • Поддержка событий click для обработки переходов.

    Пример:

    <HeaderNavigation aria-label="Main Navigation">
  <HeaderMenuItem href="/dashboard">Dashboard</HeaderMenuItem>
  <HeaderMenuItem href="/reports">Reports</HeaderMenuItem>
</HeaderNavigation>

  4. Global Actions (HeaderGlobalBar) Панель с элементами управления, такими как иконки уведомлений, пользовательский профиль и поиск.

    • HeaderGlobalAction — отдельная кнопка, поддерживает событие click и отображение иконки. Пример добавления иконки поиска:
    <HeaderGlobalBar>
  <HeaderGlobalAction aria-label="Search" on:click={handleSearch}>
    <Search32 />
  </HeaderGlobalAction>
</HeaderGlobalBar>

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

Header автоматически поддерживает мобильные устройства:

  • Mobile Nav Toggle (HeaderMenuButton) Отвечает за открытие и закрытие бокового меню на маленьких экранах.

    • aria-label — обязательно для доступности.
    • События click управляют состоянием expanded в Header.

Пример:

<HeaderMenuButton aria-label="Open menu" on:click={() => expanded = !expanded} />

Темизация и стили

Carbon Components Svelte использует CSS-переменные для настройки внешнего вида:

  • Основные цвета фона и текста задаются через --cds-ui-01 и --cds-text-01.
  • Состояния элементов (hover, active) можно кастомизировать через соответствующие классы, например .bx--header__menu-item--active.

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

Header и его дочерние компоненты поддерживают стандартные события DOM и собственные:

  • HeaderMenuButton — событие клика для открытия меню.
  • HeaderNavigation — навигационные клики можно отслеживать через on:click на HeaderMenuItem.

Реактивное состояние expanded позволяет управлять отображением мобильной навигации:

<script>
  let expanded = false;
</script>

<Header {expanded}>
  <HeaderMenuButton aria-label="Toggle menu" on:click={() => expanded = !expanded} />
  <HeaderNavigation>
    <HeaderMenuItem href="/">Home</HeaderMenuItem>
  </HeaderNavigation>
</Header>

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

Carbon Components Svelte предоставляет готовые иконки в виде компонентов, которые удобно вставлять в HeaderGlobalAction или рядом с названием:

<HeaderGlobalAction aria-label="Notifications">
  <Notification20 />
</HeaderGlobalAction>

Практические рекомендации

  • Всегда указывать aria-label для элементов навигации и глобальных действий для улучшения доступности.
  • Использовать HeaderMenuButton только на мобильных версиях для корректного отображения меню.
  • Для сложной навигации применять вложенные HeaderMenu и HeaderMenuItem с поддержкой подменю.
  • Для кастомного брендинга можно использовать слот внутри HeaderName для добавления логотипа или иконки.

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

Оглавление