Кнопка
Кнопка генерации
Одна кнопка на весь цикл ИИ-генерации: в покое запускает, во время работы показывает бегущую полосу и останавливает.
Что можно поменять
- подписи покоя и работы — пропы label и runningLabel
- строку под кнопкой — проп hint: модель, лимит, что именно генерируется
- начальное состояние — проп defaultRunning, витрине нужна работающая кнопка
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/button-062?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-button-062-*. Клиентский: держит состояние running и переключает его по клику, вызывая onGenerate или onStop. Полоса генерации — псевдоэлемент с бесконечной анимацией translate внутри кнопки с overflow:hidden; при prefers-reduced-motion она растягивается на всю ширину и перестаёт бежать. Ширина подписи резервируется по самому длинному варианту через скрытую копию текста и minWidth, поэтому смена состояния не двигает соседей. В работе кнопка становится контурной, звезда прячется, вместо неё появляется квадрат остановки.
Теги
- button
- ai
- generate
- streaming
- stop
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…