Topbar — Обзор

Topbar — это панель инструментов, которая всегда остается видимой на странице и обеспечивает быстрый доступ к навигации и управлению.

Dashboards

Показать код

В зависимости от требований интерфейса, она может включать логотип, заголовок, хлебные крошки, кнопки действий и другие элементы.

Заголовок страницы

Данный вариант наполнения подходит для начальных экранов, когда отсутствует необходимость в отображении навигационного пути.

Dashboards

Показать код

Если необходимо вывести количество объектов на текущей странице, то это можно сделать с помощью отображения рядом с заголовком страницы специального счетчика:

Dashboards13,294

Показать код

Хлебные крошки

Для внутренних страниц отдельного модуля отлично подойдет вариант с хлебными крошками. Это поможет пользователю легче ориентироваться в приложении.

Показать код

Кнопки действий

В правой части панели инструментов располагается область для размещения любых действий, которые необходимо отобразить на текущей странице.

Мы рекомендуем использовать следующий набор действий (слева направо):

Индикаторы (например, индикатор обновления данных)
Группа кнопок-иконок (фильтры)
Частые действия в виде кнопок (например, «Добавить…», «Поделиться»)
Дополнительные действия в виде дропдаун меню, куда можно отнести все второстепенные действия относящиеся к текущей странице.

Actions

Показать код

Адаптивный режим

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

Допустимое минимальное расстояние между левой частью и правой частью с действиями составляет 80px и задается через CSS-переменную --kbq-top-bar-spacer-min-width.

Вариант с хлебными крошками

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

The automatic breadcrumb shortening is used as the basis, where middle items are hidden when there is not enough free space.

If the space becomes even narrower, the leftmost breadcrumb level is also hidden, leaving only the rightmost level visible.

The minimum width of the left side depends on the title of the current item, which can be truncated to 3 characters with an ellipsis (…).

After reaching the minimum width on the left side, the compression of the right side with actions can begin.

Показать код

Вариант с заголовком страницы

Вариант с использованием только заголовка будет перестраиваться следующим образом:

When there is free space, the title and actions are fully displayed.

Page Header10

The minimum width of the left side depends on the page title, which can be truncated to 3 characters with the addition of three dots (…).

Page Header10

After reaching the minimum width of the left side, you can start compressing the right side with the actions.

Page Header10

Показать код

Более подробно сжатие хлебных крошек разобрано на странице хлебных крошек.

Поведение при прокрутке

Панель может фиксироваться при прокрутке страницы.

Page13,294

Description

NASA describes a case where a person accidentally ended up in an area close to a vacuum (pressure below 1 Pa) due to an air leak from a spacesuit.

Status

Badge

Additional Information

Space is an endless expanse full of mysteries and wonders. It begins beyond our atmosphere and stretches to the farthest corners of the Universe. In space, there are billions of stars, planets, and galaxies, each with its own unique story and characteristics. Exploring space helps us better understand not only the Universe itself but also our place within it.

One of the most fascinating aspects of space is its infinity. Scientists still cannot determine exactly where the Universe ends. There are theories that it may be infinite or have certain boundaries. This opens up many questions about what lies beyond the visible universe and what forms of life might exist on other planets. Space research also plays a crucial role in the development of technologies on Earth. Many inventions we use in everyday life were developed thanks to space programs. For example, satellite navigation, communication systems, and even some medical technologies have their roots in space exploration. This shows how studying space can benefit humanity as a whole. Finally, space inspires creativity and dreams. Since childhood, we have looked at the stars and wondered what might exist beyond our planet. Movies, books, and art often draw inspiration from space, creating images that capture the imagination. This drive for exploration and discovery makes space not only a scientific but also a cultural part of our lives.

Показать код

В примере выше панель вынесена за пределы прокручиваемой области — для этого ничего настраивать не нужно. Чтобы зафиксировать саму панель, поместите ее внутрь прокручиваемого элемента и задайте на ней --kbq-top-bar-inset-block-start: 0: --kbq-top-bar-position уже равен sticky, но липкий блок смещается только при заданном отступе, поэтому со значением auto панель ведет себя точно так же, как при position: relative.

Панели, открытые из содержимого страницы, рисуются поверх панели инструментов. Чтобы они уходили под нее, см. Панели под липкой шапкой.

CSS-переменные

Инпуты отвечают за тень и доступное имя, все остальное настраивается через CSS-переменные, заданные на самом kbq-top-bar. Значения по умолчанию объявлены на самом элементе, поэтому значение, заданное на родителе, до него не доходит.

Переменная	Значение по умолчанию	Описание
`--kbq-top-bar-z-index`	`990`	Слой панели: над содержимым страницы и слоем `kbqOverlayLayer` (`980`), под контейнером CDK-оверлеев (`1000`).
`--kbq-top-bar-position`	`sticky`	`position` хоста. Сам по себе ничего не меняет — см. `--kbq-top-bar-inset-block-start`.
`--kbq-top-bar-inset-block-start`	`auto`	Отступ, на котором липкая панель останавливается от верха прокручиваемого родителя. `auto` не задает ограничения, поэтому панель не фиксируется.
`--kbq-top-bar-padding-vertical`	`var(--kbq-size-m)`	Вертикальные отступы панели.
`--kbq-top-bar-padding-horizontal`	`var(--kbq-size-xxl)`	Горизонтальные отступы панели.
`--kbq-top-bar-border-radius`	`0`	Радиус скругления панели.
`--kbq-top-bar-spacer-min-width`	`80px`	Ширина `[kbqTopBarSpacer]` — гарантированное расстояние между левой и правой частью.
`--kbq-top-bar-container-start-min-width`	`0`	Ширина, ниже которой левый контейнер не сжимается. Задавайте ее, если содержимое слева должно оставаться читаемым в узкой панели.
`--kbq-top-bar-container-start-gap`	`0`	Расстояние между элементами левого контейнера.
`--kbq-top-bar-container-end-gap`	`var(--kbq-size-s)`	Расстояние между элементами правого контейнера и между кнопками действий, которые сворачиваются в меню.
`--kbq-top-bar-background`	`var(--kbq-background-bg)`	Фон панели.
`--kbq-top-bar-shadow-bottom`	`var(--kbq-shadow-overflow-normal-bottom)`	Тень, которая рисуется при заданном `withShadow`.
`--kbq-top-bar-shadow-transition`	`ease-out 300ms`	Анимация этой тени.

Доступность

kbq-top-bar намеренно не задает ориентир (landmark): одна и та же панель в одном месте является шапкой страницы, а в другом — заголовком панели, и banner на странице может быть только один. Выбирайте семантику в месте использования.

Если панель является шапкой страницы, назначьте ей ориентир banner — обернуть ее в <header>, не вложенный в <main>, <article> или <section>, тоже допустимо:

<kbq-top-bar role="banner">…</kbq-top-bar>

Если на странице несколько панелей, задайте каждой имя, чтобы вспомогательные технологии могли их различать:

<kbq-top-bar role="banner" aria-label="Панель мониторинга">…</kbq-top-bar>

role="toolbar" используйте только в том случае, если сами реализуете перемещение фокуса стрелками: панель инструментов должна быть единой точкой табуляции. В противном случае оставьте кнопки обычными точками табуляции. Кнопкам-иконкам, которые обычно располагаются на панели (включая кнопку скрытых действий), нужен собственный aria-label — панель не может его подставить.

Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.