Кнопка-переключатель
Переключатель с подсказкой
Toggle с подсказкой о текущем состоянии: она привязана через aria-describedby и всплывает и по наведению, и по фокусу, а подпись кнопки не меняется.
Что можно поменять
- подпись кнопки через label
- текст подсказки в нажатом состоянии через onHint
- текст подсказки в отжатом состоянии через offHint
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/toggle-008?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра --vibeui-toggle-008-*. Клиентский: useState и useId для связи aria-describedby. Подсказка — обычный элемент разметки с role="tooltip", спрятанный видимостью и прозрачностью; показывается правилами button:hover + [data-part="tip"] и button:focus-visible + [data-part="tip"], поэтому доступна и мыши, и клавиатуре. Атрибут title тут не подошёл бы: браузер не показывает его по фокусу. Подпись кнопки постоянна, состояние несут aria-pressed и текст подсказки; сверху у панели есть запас на всплывающий слой.
Теги
- toggle
- tooltip
- aria-describedby
- hint
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…