Группа кнопок
Кнопка сохранения с меню
Split-кнопка: частое действие нажимается сразу, редкие живут в меню на нативном popover — верхний слой, Esc и клик мимо достаются от браузера.
Что можно поменять
- подпись основного действия через action
- содержимое меню через options
- имя стрелки для скринридера через menuLabel и идентификатор меню через menuId
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/buttongroup-003?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-003-*. Серверный: состояние меню держит браузер через popover и popovertarget, клиентского JS нет. Позиционирование берётся из CSS anchor positioning внутри @supports (anchor-name), с position-try-fallbacks:flip-block; где anchor-positioning не поддержан, popover остаётся карточкой по центру экрана — это рабочий вид, а не поломка. Граница между двумя заливками одного цвета нарисована inset box-shadow, потому что рамка на стыке дала бы тёмную линию. Правило [data-part="menu"]:not(:popover-open){display:none} прячет меню до открытия.
Теги
- buttongroup
- split
- popover
- menu
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…