Группа кнопок
Переключатель единиц
Переключатель единиц, показывающий пересчитанное значение рядом: оба числа лежат в разметке, а нужное выбирает CSS по отмеченному radio.
Что можно поменять
- подписи единиц через metricLabel и imperialLabel
- показываемые числа через metricValue и imperialValue
- пояснение под значением через caption
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/buttongroup-045?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-045-*. Серверный: пересчёт делается на стороне, отдающей страницу, а не в браузере — поэтому округления и локали не расходятся. Оба значения лежат в разметке, и правило [data-vibeui-block]:has([data-unit="metric"] input:checked) [data-value="metric"]{display:inline} показывает нужное. Значение набрано табличными цифрами и имеет min-width:4.25rem, поэтому «18 °C» и «64 °F» занимают одно место. Сцепка компактная и стоит рядом со значением, а не отдельным блоком: единица без числа бессмысленна.
Теги
- buttongroup
- units
- readout
- css-only
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…