Баннер
Стопка баннеров
Несколько полос сразу: видна самая срочная, остальные свёрнуты в счётчик. Порядок задаёт срочность, а не очередь появления.
Что можно поменять
- массив entries: сообщение, срочность tone и действие
- сколько полос показывать сразу через visible
- формулировку счётчика moreTemplate и подпись collapseLabel
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/banner-011?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-banner-011-*. Список сортируется по срочности: critical, warning, info — «нет сети» обязана стоять выше «вышла новая версия», даже если пришла позже. Свёрнутые строки остаются в разметке под атрибутом hidden: счётчик «ещё 2» не рассказывает, что именно скрыто, а разбор страницы должен получить весь список. Срочность показана полоской слева, а не заливкой строки: четыре цветных прямоугольника подряд перестают читаться как разные сообщения. Счётчик — кнопка на всю ширину с aria-expanded, поэтому он продолжает стопку, а не висит сбоку отдельным элементом управления. Тема берётся из color-scheme через light-dark(), классовую тёмную тему компонент включает себе сам.
Теги
- banner
- stack
- priority
- system
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…