Сегментированный переключатель состояний!

Во многих интерфейсах нужен простой способ переключать состояние: табы, фильтры, режимы. В этом приёме переключатель собирается на html/css, где radio-кнопки становятся источником состояния.

Как работает:

• группа radio гарантирует, что активен всегда только один сегмент;

• индикатор - отдельный слой, который перемещается через transform, не влияя на layout;

• grid задаёт геометрию элементов;

• один и тот же state управляет и положением индикатора, и цветом текста.

Такой прием легко масштабируется и отлично ложится в продакшн-код.

Code Ready | #фишка