Кнопка-переключатель
Отключение звука
Кнопка отключения звука с двумя значками состояния: оба лежат в разметке, показывается тот, что совпал с aria-pressed.
Что можно поменять
- имя кнопки через label
- уровень громкости через volume
- начальное состояние через defaultPressed
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/toggle-005?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра --vibeui-toggle-005-*. Клиентский: useState. Приём: два <svg> всегда в разметке, а видимость выбирается селекторами button[aria-pressed="false"] [data-part="sound"] и button[aria-pressed="true"] [data-part="silent"] — значок не может разойтись с состоянием, потому что источник у них один атрибут. Имя кнопки остаётся постоянным, состояние проговаривает строка role="status". Полоса громкости гаснет через data-muted на корне: состояние обязано читаться не только по значку. Это toggle: звук выключается сразу, а не после подтверждения.
Теги
- toggle
- mute
- icon-state
- audio
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…