Плашка
Плашка-ссылка
Плашка-ссылка: внешний адрес компонент распознаёт сам, ставит target и rel и дописывает в доступное имя, что откроется новая вкладка.
Что можно поменять
- адрес через href
- подпись про новую вкладку через hint
- текст ссылки через children
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/badge-016?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-016-*. Серверный: хуков нет. Корень — настоящий тег a, поэтому нажатие средней кнопкой, «открыть в новой вкладке» и предпросмотр адреса в строке состояния работают сами. Внешняя ссылка определяется по схеме http(s) в href: у неё меняется знак (стрелка наружу вместо стрелки вправо), добавляются target=_blank и rel=noreferrer noopener, а в доступное имя уходит скрытая подпись hint — иконку скринридер не читает. Стрелка сдвигается при наведении на один пиксель: движение отключено правилом prefers-reduced-motion.
Теги
- badge
- link
- external
- a11y
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…