Группа кнопок
Плотность таблицы
Плотность таблицы с живым образцом: выбранный radio меняет переменную высоты строки на корне, и три строки под группой перестраиваются без JS.
Что можно поменять
- подписи вариантов через compactLabel, regularLabel и roomyLabel
- исходную плотность через defaultValue
- доступное имя группы через label
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/buttongroup-027?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-027-*. Серверный: выбор держат radio внутри fieldset. Приём — переменная --vibeui-buttongroup-027-row объявлена в :where() с нулевой специфичностью, а правила вида [data-vibeui-block]:has([data-part="segment"]:nth-of-type(2) input:checked) переопределяют её на корне; образец строк читает переменную и перестраивается сам. Значок сегмента — те же три полосы с тем же просветом, что и в образце: подпись, значок и результат говорят об одном. Образец помечен aria-hidden, потому что для скринридера он ничего не добавляет к названию плотности.
Теги
- buttongroup
- density
- table
- css-only
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…