Toggle
Общая информация
Тогл (от англ. toggle) — переключатель. Тогл даёт пользователю возможность быстрого переключения между двумя возможными состояниями. Например, включает или отключает уведомления в настройках.
Описание работы
Для повышения доступности клика в качестве интерактивной задается область тогла (включающая Toggle + Label).
Чтобы переключить тогл нужно кликнуть на сам переключатель или его Label. При переключении тогла эффект наступает сразу, поэтому он не нуждается в кнопке «Сохранить».
Когда использовать
Переключатель используется для быстрого переключения между двумя возможными состояниями. Для усиления контекста тоггла используйте Label и/или иконку. Функционально тогл — аналог чекбокса, но контекст их использования может отличаться. Тогл заимствован из мобильных операционных систем, где он используется для включения и выключения настроек. Тогл нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем. Тогл больше и заметнее чекбокса. Хорошо, когда на странице 1 тогл, максимум 2–3.
Способы использования
В основном тогл не используется сам по себе, поэтому к нему добавляется Label.
Оформление
Контент (Label)
Label тогла пишется с заглавной буквы.
Тогл рекомендуется располагать слева от Label, в исключительных случаях можно расположить и справа. Если тоглов несколько, лучше их ставить слева от Label.
Иконки
В случае когда Label недстаточно и требуется дополнительная маркировка, например при использовании нескольких тоглов, можно добавить иконку.
Размеры
Внешние размеры
Существует 2 размера тогла — L — 4020px и S — 3216px.
| Элемент | Значение L | Значение S |
|---|---|---|
Иконка | 12px * 12px | 9,6px * 9,6px |
Тогл | W * H: 40px * 20px Switch: 16px * 16px Border: 1px (solid) (hover; off) Border-radius: 100px (hover; off) Focus border: 2px Focus border-radius: 100px | W * H: 32px * 16px Switch: 12px * 12px Border: 1px (solid) (hover; off) Border-radius: 100px (hover; off) Focus border: 2px Focus border-radius: 100px |
Типографика L-Toogle
| Элемент | Название стиля | Гарнитура | Кегль | Начертание |
|---|---|---|---|---|
Label | Main/Body-text 14 | Inter | 14px | Regular |
Типографика S-Toogle
| Элемент | Название стиля | Гарнитура | Кегль | Начертание |
|---|---|---|---|---|
Label | Main/Body-text 12 | Inter | 12px | Regular |
Внутренние размеры
Отступы между Label и тоглом 8px независимо от размера самого тогла:
Отступ между группами тоглов зависит от выбранного размера самого тогла и их расположения:
Расположение
Если есть исключетельные случаи, когда нужна группа тоглов, элементы можно расположить вертикально или горизонтально в зависимости от варианта использования и структуры пользовательского интерфейса. Рекомендуется располагать группы тоглов вертикально для облегчения чтения. В списке тоглов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.
Использование с инпутами
Если Toggle используются вместе с инпутами, они имеют размерное соответсвие. Для полей ввода размерности L и М (Inner или Outer) соответствует размер — L, для размерности S (Outer) соответствует — S.
Правила использования размеров
L -- используется в контентной области виджета и панелях
S -- в таблицах
Значения (Value) и состояния (State)
Значения (Value)
Существует только 2 Value (значения) тогла:
Off. Выключено
On. Включено
Состояния (State)
Существует 3 основных состояния тогла:
Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с тоглом
Hover — при наведении курсора
Disable — неактивное (недоступное для взаимодействия)
Фокус (Focus)
Так же существует состояние Focus. Он появляется в момент выбора тогла с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Default и Hover. Невозможен в состоянии Disabled.
Взаимодействие с клавиатуры
Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом. Если тоглы располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →. Нажатие клавиши Enter, включает или выключает тогл, на котором находится фокус.
Взаимодействие мышью
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
Цвета
| Default | Hover | Disabled | |
|---|---|---|---|
Off | Контент: #20222B — G12 Тело: #BFC6D7 — G4 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20 | Контент: #20222B — G12 Тело: #BFC6D7 — G4 Обводка: #337EFF — B1 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20 | Контент: #20222B — G12 Тело: #D6DBE7 — G3 Переключатель: #FFFFFF — G1 |
On | Контент: #20222B — G12 Тело: #337EFF — В1 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20 | Контент: #20222B — G12 Тело: #0F62FE — В2 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20 | Контент: #20222B — G12 Тело: #99BFFF — L Переключатель: #FFFFFF — G1 |
Last updated
