Выпадающее меню
Меню сессии
Меню профиля, в котором строка с почтой копирует адрес по клику и объявляет об этом вслух: не нужно открывать настройки ради одного адреса.
Что можно поменять
- имя, почту и должность через name, email и role
- хеш имени, который красит инициалы аватара, — код не трогать, только имя
- цвет фокуса и подложки аватара через accent
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/dropdown-013?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра в переменных --vibeui-dropdown-013-*. Клиентский: состояние открытия меню и подтверждение копирования держит useState. Открытие, верхний слой, Escape и клик мимо — HTML popover, положение — anchor-name и position-area под @supports, для браузеров без якорей есть запасное правило position:absolute с position:relative на корне. Клик по строке почты вызывает navigator.clipboard.writeText и на 1.6 секунды меняет подпись на «Скопировано» с aria-live="polite", чтобы это услышал и тот, кто не видит экран. Выход отделён чертой и покрашен только текстом. После выбора любого пункта фокус явно возвращается на кнопку-триггер.
Теги
- menu
- dropdown
- profile
- clipboard
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…