Поле с подсказками
Варианты с миниатюрами
Выбор варианта с превью: у каждой строки картинка, а если ссылки нет — свой градиент с инициалами, оттенок которого детерминированно считается из названия.
Что можно поменять
- label — подпись поля
- placeholder — текст-подсказка в поле поиска
- options — варианты: имя, подпись и необязательная ссылка на картинку
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/combobox-014?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, собственная палитра в локальных переменных --vibeui-combobox-014-*. Клиентский: запрос и выбранное значение живут в useState. Строка списка — grid 2.4rem + 1fr: слева превью, справа название и подпись, обе строки текста обрезаются многоточием, поэтому длинное имя не ломает раскладку. Если у варианта есть src, рисуется обычный <img> с object-fit: cover и пустым alt (картинка декоративна, имя рядом текстом); если ссылки нет, показывается градиент, чей оттенок считает hueOf — детерминированный FNV-хэш по названию, поэтому вариант всегда одного цвета. Оттенок передаётся единственной инлайновой переменной --vibeui-combobox-014-hue: это динамическое значение, которое нельзя выразить статическим классом.
Теги
- combobox
- thumbnail
- templates
- visual
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…