Плашка
Составной счётчик
Счётчик из двух половин: слева новые с порогом «9+», справа общее число — пара отвечает на вопрос «двенадцать из скольких».
Что можно поменять
- число новых через unread
- общее число через total
- порог через max
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/badge-022?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-022-*. Серверный: хуков нет. Пилюля разделена на две зоны с общим overflow:hidden, граница между ними — левая рамка правой половины, поэтому разделитель не требует отдельного узла. Обе половины набраны табличными цифрами и имеют одинаковый минимум ширины: при пересчёте плашка не меняет габарит и не дёргает соседей. Порог применяется только к левому числу — «9+ из 48» осмысленно, а «9+ из 9+» нет. Когда новых ноль, левая половина гаснет, но остаётся: исчезающая зона меняла бы ширину. Числа помечены aria-hidden, вся плашка объявляется одной фразой из шаблона labelText через aria-label.
Теги
- badge
- counter
- unread
- threshold
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…