Сегмент. переключатель


Группа кнопок для переключения вида (например, выдача товаров списком или карточками). Работает по принципу радио-кнопок или вкладок.

Не используется для выбора значений в формах — слишком тяжеловесно выглядит.

Текстовый переключатель

Спецификации
Состояние Параметр Значение
normal
height: $sizeControlHeight;
padding: 0 $paddingControlButton;
background-color: $colorBgSecondary;
border-radius: $sizeBorderRadius;
border: $sizeBorderWidth solid $colorBorder;
box-shadow: $depth-inset;
color: $colorText;
font-size: $fontBody;
line-height: $fontBodyLine;
32px
0 16px
#f0f0f0
2px
1px solid rgba(0,0,0,.12)
0 2px 0 0 rgba(0,0,0,.04)
#333333
15px
20px
hover @include standardHover ($colorBgSecondary);
active @include standardActive ($colorBgSecondary);
disabled opacity: .48;

Переключатель с иконками

Спецификации
Состояние Параметр Значение
normal
/* Основные свойства наследуются от стандартного сегментированного переключателя и кнопки-иконки */
padding: 0 $VAR; /* Есть конфликт — обычная кнопка-иконка квадратная, а здесь у неё отступы (выходит шире) */
 
 
hover @include standardHover ($colorBgSecondary);
active
/* Основные свойства наследуются от стандартной кнопки */
@include standardActive ($colorBgSecondary);
box-shadow: $depthInset;
 
 
inset 0 2px 0 0 rgba(0,0,0,0.04)
disabled opacity: .48;