Плашка
Плашка с обрезкой
Плашка для текста непредсказуемой длины: обрезка с конца отдана CSS, обрезка по середине — коду, а полный текст остаётся доступен.
Что можно поменять
- ширину в знаках через width
- режим обрезки через truncate
- текст через children
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/badge-023?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-023-*. Серверный: хуков нет. Ширина задаётся в ch и кладётся в --vibeui-badge-023-width инлайновым стилем. Режим end работает штатным text-overflow:ellipsis, причём многоточие живёт на внутреннем узле: у flex-контейнера text-overflow не срабатывает и строка просто отрезалась бы без знака. Режим middle CSS не умеет вовсе, поэтому строку режет функция shorten — голова и хвост считаются от лимита, между ними многоточие; у имени ветки и у пути к файлу значимы оба края. Полный текст уходит в title и в скрытую подпись, а обрезанный вариант помечается aria-hidden.
Теги
- badge
- truncate
- overflow
- monospace
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…