Группа кнопок
Слитые действия
Группа связанных действий как одна деталь: рамка ровно одна — на контейнере, а разделители внутри рисуются левой границей соседей.
Что можно поменять
- набор подписей через actions
- доступное имя группы через label
- высоту кнопок через size
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/buttongroup-002?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-002-*. Серверный: хуков нет. Приём — единственная рамка на контейнере role="group" и разделители через button + button {border-inline-start}: два соседних border дали бы линию в два пикселя. Скругления детей считаются как calc(radius - 1px), чтобы внутренний угол совпал с внешним. Кнопка с фокусом поднимается z-index:1, обводка ставится внутрь через outline-offset:-2px, иначе рамка контейнера её обрезает. Высота вынесена в --vibeui-buttongroup-002-height и переключается атрибутом data-size.
Теги
- buttongroup
- toolbar
- actions
- attached
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…