Switcher
Last updated
Was this helpful?
Last updated
Was this helpful?
Switcher (select button) — это компонент для выбора функционала без перезагрузки страницы с помощью элементов ghost button. Может являться заменой группе радиокнопок.
Если переключатель используется для настройки параметров и показывает текущее состояние системы, один из пунктов переключателя должен быть выбран по умолчанию. При желании пользователь сможет вернуть настройку в исходное состояние. Выбранный по умолчанию пункт ставьте первым в списке.
Если переключатель нужен для сообщения каких-то сведений, то по умолчанию может быть не выбран ни один из вариантов.
Одновременно может быть выбран только один пункт. Когда пользователь выбирает новый элемент, предыдущий выбор автоматически отменяется.
Старайтесь не использовать переключатель из двух значений — пользователи не понимают, какой из пунктов выбран.
Переключатель используют, когда вариантов выбора немного: от трех до пяти
Не используйте переключатель в качестве навигации, для этого лучше подходят табы
Название переключателя пишут с заглавной буквы и формулируют так, чтобы:
Было понятно, что можно выбрать только 1 вариант
Название каждого пункта не содержало повторяющуюся часть
Избегайте названий пунктов из 3 и более слов. Если сократить названия не получается, используйте группу радиокнопок.
Так же название пеключателя может содержать текст с иконкой:
В случае когда мало места, можно использовать иконки вместо текста:
Высота переключателя зависит от выбора размера элемента button (inner - 44px, 36px; outer - 40px, 32px, 24px). Ширина переключателя зависит от контента кнопок-переключателей. Минимальная ширина одной кнопки переключателя 120 px.
Вертикальные паддинги:
Горизонтальные паддинги:
Существует 3 основных состояния кнопок-переключателей:
Default — по умолчанию (состояние покоя)
Hover — при наведении курсора
Pressed — выбранное состояние
Так же существует состояние Focus. Он появляется в момент выбора кнопки-переключателя с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Default, Hover и Pressed.
Рамка фокуса появляется при переходе к переключателю клавишей Tab. С помощью клавиш ← и → переключается фокус между пунктами. Нажатие на Enter, выбирает пункт переключателя, на котором сейчас фокус.
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
