Разрешение экрана
Простой пример кнопки «переключатель/тумблер/toggle» на html и css
Просто появилась минутка свободного времени =)
Toggle button, переключатель, тумблер — как угодно, довольно популярный элемент. Иногда такой элемент интерфейса создают с помощью анимированной гифки. Где-то я такое видел. Это, как мне кажется не круто. Поэтому, захотелось написать этот «переключатель» на html и css. Тут использую input с типом checkbox и label. Довольно распространенное решение.
See the Pen toggle by Mike Cherniaev (@mikecherniaev) on CodePen.
Ну и да, со вкусом и чувством прекрасного у меня проблемы. Поэтому я и использую бутстрап =)
Как сделать переключатель в html
Для создания переключателя в HTML можно использовать тег с атрибутом type=»checkbox» . Например:
type="checkbox" /> Включить опцию
Также можно использовать тег с атрибутом type=»radio» , чтобы создать группу переключателей, из которых можно выбрать только один:
type="radio" name="option" value="option1" /> Опция 1 type="radio" name="option" value="option2" /> Опция 2
Для обработки изменений состояния переключателей можно использовать атрибут onChange и JavaScript-обработчик событий. Например:
type="checkbox" onChange="handleCheckboxChange(event)" /> Включить опцию function handleCheckboxChange(event) if (event.target.checked) console.log('Опция включена'); > else console.log('Опция выключена'); > >
Переключатели
Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.
Атрибуты переключателей перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. |
| disabled | Блокирует переключатель для выбора. |
| form | Идентификатор формы для связывания кнопки с элементом . |
| type | Для переключателя значение должно быть radio . |
| checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним. |
| value | Задаёт, какой текст будет отправлен на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем. |
| autofocus | Переключатель получает фокус после загрузки документа. |
| required | Выбор переключателя перед отправкой формы становится обязательным. |
Как обычно, переключатели нельзя вкладывать внутрь ссылок и кнопок.
Создание группы переключателей показано в примере 1.
Пример 1. Создание переключателей
В результате получим следующее (рис. 1).
Рис. 1. Вид переключателей в браузере
Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.
Как создать пользовательский переключатель с помощью CSS
В этой статье мы расскажем, как с помощью CSS создать пользовательский переключатель.
Недавно мы создали компонент Radio Switch. Чтобы обеспечить его доступность необходимо учитывать некоторые моменты.
Компонент, который мы создадим в этом руководстве, основан на платформе CodyHouse.
Давайте сделаем это!
Основная идея заключается в следующем : мы создаем список, состоящий из двух переключателей (два доступных варианта). Затем скрываем эти элементы ввода и применяем стиль к видимым label.
Вот структура HTML:
Мы применили класс sr-only к обоим элементам ввода, чтобы визуально скрыть их. Но они все еще доступны для программ чтения с экрана. Вы можете узнать больше об этом классе из документации к платформе.
Теперь добавим стили к label, чтобы они были выровнены и имели одинаковую ширину. А также к элементу .radio-switch:
:root < // стили --radio-switch-width: 186px; --radio-switch-height: 46px; --radio-switch-padding: 3px; --radio-switch-radius: 50em; // анимация --radio-switch-animation-duration: 0.3s; >.radio-switch < display: inline-flex; padding: var(--radio-switch-padding); border-radius: var(--radio-switch-radius); border: 1px solid var(--color-contrast-low); >.radio-switch__item < height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding)); width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding)); >.radio-switch__label
После этого создадим маркер, чтобы использовать его в качестве элемента фона, перемещающегося с одной стороны переключателя на другую. Можно добавить этот маркер во второй элемент списка:
Мы добавили aria-hidden true, чтобы скрыть элемент от программ чтения с экрана. Теперь стилизуем его:
.radio-switch__item < position: relative; >.radio-switch__marker < position: absolute; top: 0; left: -100%; height: 100%; width: 100%; background-color: var(--color-primary); border-radius: var(--radio-switch-radius); transition: transform var(--radio-switch-animation-duration); .radio-switch__input:checked ~ & < // перемещаем маркер с одной стороны на другую transform: translateX(100%); >>
Нужно, чтобы пользователи, перемещающиеся по странице с помощью клавиатуры, видели, что элемент переключателя находится в фокусе ввода. Для этого можно использовать псевдокласс :focus-within:
.radio-switch < // . &:focus-within < box-shadow: 0 0 0 3px var(--color-contrast-lower); >>
Когда переключатель выделен фокусом ввода (класс .radio-switch), к переключателю добавляется тень, которая сигнализирует о его выделении фокусом ввода.
Примечание: на момент написания данной статьи псевдокласс :focus-within поддерживается не во всех современных браузерах.
Чтобы исправить это, можно реализовать другой эффект а затем переписать его для браузеров, которые поддерживают :focus-within :
.radio-switch < // . &:focus-within < box-shadow: 0 0 0 3px var(--color-contrast-lower); >> .radio-switch__label < //.. .radio-switch__input:focus ~ & < // эффект выделения фокусом ввода в браузерах, не поддерживающих :focus-within background-color: lightness(var(--color-primary), 0.6); >:not(*):focus-within, // trick to detect :focus-within support -> https://css-tricks.com/using-feature-detection-conditionals-and-groups-with-selectors/ .radio-switch__input:focus ~ & < // переключение эффекта фокуса для браузеров, поддерживающих :focus-within background-color: transparent; >>
Пользовательский переключатель готов к использованию.