Шапка сайта
Контекстная шапка статьи
Шапка чтения и обучения: возврат в раздел, сокращённое название материала, содержание раскрытием, действие «следующий урок» и полоса прогресса со свечением. Прогресс приходит от проекта либо считается блоком.
Что можно поменять
- title и backLabel — материал и раздел возврата; chapters — содержание
- progress — значение 0–100 от вашего scrollspy; null убирает полосу
- autoProgress — блок меряет прокрутку документа сам, когда считать некому
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/navbar-018?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, клиентский компонент. Полоса прогресса по умолчанию — представление значения, переданного владельцем прокрутки: одна страница не должна мерить прокрутку дважды. Если считать некому, autoProgress включает собственный замер документа через passive-слушатель scroll. Содержание закрывается по Escape и по нажатию снаружи, его ссылки вне раскрытия получают tabindex=-1, активная глава помечена вертикальной линией акцента. Панель ниже одной строки не растёт и не съедает высоту чтения; в узкой колонке действие скрывается, потому что возврат и содержание важнее. Палитра --vibeui-navbar-018-*.
Теги
- navbar
- header
- article
- reading
- lesson
- progress
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…