Top App Bar

Top App Bar — это ключевой компонент интерфейса, обеспечивающий навигацию, идентификацию приложения и быстрый доступ к основным действиям. В SvelteKit UI этот компонент реализован гибко, с возможностью интеграции с другими UI-элементами и управлением состоянием через Svelte stores.

Структура Top App Bar

Top App Bar состоит из нескольких обязательных и опциональных частей:

  1. Container (контейнер) Корневой элемент, определяющий размеры и позиционирование панели. Обычно используется с фиксированной высотой и возможностью «прилипания» к верхней части экрана.

    <TopAppBar fixed>
    <!-- содержимое -->
</TopAppBar>

    Атрибуты:

    • fixed — закрепляет панель сверху.
    • prominent — увеличивает высоту панели для визуального акцента.
    • dense — уменьшает высоту панели, экономя пространство на экране.

  2. Navigation Icon (иконка навигации) Используется для открытия бокового меню или возвращения на предыдущий экран. Обычно это кнопка с иконкой «гамбургер» или стрелка назад.

    <TopAppBarNavigationIcon on:click={toggleSidebar}>
    <Icon name="menu"/>
</TopAppBarNavigationIcon>

  3. Title (заголовок) Основной текст, отображающий название приложения или текущего раздела. Может быть статичным или динамически изменяться через реактивные переменные Svelte.

    <TopAppBarTitle>
    Мое приложение
</TopAppBarTitle>

  4. Action Items (элементы действий) Кнопки и иконки для быстрого доступа к функциям приложения: поиск, уведомления, профиль. Размещаются справа от заголовка.

    <TopAppBarActionItem on:click={openSearch}>
    <Icon name="search"/>
</TopAppBarActionItem>
<TopAppBarActionItem on:click={openNotifications}>
    <Icon name="notifications"/>
</TopAppBarActionItem>

  5. Optional Extensions (дополнительные элементы) Некоторые реализации позволяют добавлять вкладки, строки поиска или прогресс-бары прямо в Top App Bar, используя слот extension.

Свойства и стилизация

Top App Bar предоставляет гибкие свойства для кастомизации:

  • color — задаёт основной цвет панели. Поддерживаются темы: primary, secondary, surface.

  • elevation — контролирует глубину тени, создавая эффект «поднятой» панели.

  • scrollBehavior — управление поведением панели при скролле:

    • none — панель всегда фиксирована.
    • hide — панель скрывается при прокрутке вниз.
    • collapse — панель уменьшается в высоте при скролле.

Стилизация через CSS-переменные позволяет тонко настраивать шрифты, отступы и цвета:

:root {
    --top-app-bar-height: 64px;
    --top-app-bar-background: var(--color-primary);
    --top-app-bar-color: white;
}

Интеграция с Svelte stores

Top App Bar часто требует взаимодействия с глобальным состоянием приложения. В Svelte это удобно через writable и derived stores.

<script>
    import { writable } from 'svelte/store';
    import { TopAppBar, TopAppBarTitle, TopAppBarActionItem } from 'sveltekit-ui';

    export const pageTitle = writable("Главная");

    function updateTitle(newTitle) {
        pageTitle.set(newTitle);
    }
</script>

<TopAppBar>
    <TopAppBarTitle>{$pageTitle}</TopAppBarTitle>
    <TopAppBarActionItem on:click={() => updateTitle("Настройки")}>
        <Icon name="settings"/>
    </TopAppBarActionItem>
</TopAppBar>

Такой подход позволяет динамически менять заголовок и состояние панели в зависимости от маршрута или действий пользователя.

Рекомендации по использованию

  • Для приложений с большим количеством контента предпочтительно использовать fixed Top App Bar с эффектом скрытия при скролле (scrollBehavior="hide"), чтобы не занимать лишнее место на экране.
  • Action Items должны быть интуитивно понятными: иконки должны иметь очевидное значение или подпись.
  • При использовании дополнительных слотов для вкладок или поиска важно учитывать адаптивность, чтобы панель корректно отображалась на мобильных и десктопных устройствах.

Примеры продвинутого использования

Top App Bar с поисковой строкой и вкладками:

<TopAppBar prominent>
    <TopAppBarNavigationIcon on:click={toggleSidebar}>
        <Icon name="menu"/>
    </TopAppBarNavigationIcon>
    <TopAppBarTitle>Магазин</TopAppBarTitle>
    <TopAppBarActionItem on:click={openSearch}>
        <Icon name="search"/>
    </TopAppBarActionItem>

    <div slot="extension">
        <Tabs>
            <Tab>Все товары</Tab>
            <Tab>Популярные</Tab>
            <Tab>Новинки</Tab>
        </Tabs>
    </div>
</TopAppBar>

С помощью такой конфигурации Top App Bar превращается в мощный инструмент навигации и управления интерфейсом, сохраняя чистую и понятную структуру кода.

Top App Bar в SvelteKit UI — это высоко кастомизируемый компонент, сочетающий гибкость Svelte с продуманной архитектурой Material Design, обеспечивая единый визуальный стиль и удобство взаимодействия.

Оглавление