Компоненты

Адаптивный бегунок

При инициализации компонент создает в родительском контейнере структуру для нашего бегунка.


                      <div class="adaptive-runner" data-adaptive-runner="runner">
  <div class="adaptive-runner__inner"></div>
</div>

Этого должно быть достаточно для простой стилизации, если в вашем случае будет что-то сложнее, можете дополнить разметку в init-adaptive-runner.js у функции templateRunner.

Компонент состоит из следующих файлов: adaptive-runner.js, init-adaptive-runner.js все файлы обязательны к переносу в проект! Файл adaptive-runner.scss добавлен только для стилизации, в нём вы можете менять всё что угодно(так же ознакомьтесь с комментариями внутри файла, а после "сожгите")

Это решение адаптировано для наших табов, но вы можете использовать его и вне компонента табов, если это будет необходимо. Только этом случае вам нужно будет самолично написать дополнительный скрипт который будет добавлять состояние .is-active для выбранного элемента.

Обязательные data атрибуты

data-adaptive-runner="track"	Устанавливается на родителе контролов
data-adaptive-runner="checkpoint"	Устанавливается на контроле (кнопке, ссылке и тд)

Пример с использованием в табах

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis! Ab pariatur dolor alias debitis molestiae reprehenderit tempora ducimus, atque amet inventore illum ullam laboriosam totam vel error dicta et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis! Ab pariatur dolor alias debitis molestiae reprehenderit tempora ducimus, atque amet inventore illum ullam laboriosam totam vel error dicta et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis! Ab pariatur dolor alias debitis molestiae reprehenderit tempora ducimus, atque amet inventore illum ullam laboriosam totam vel error dicta et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis! Ab pariatur dolor alias debitis molestiae reprehenderit tempora ducimus, atque amet inventore illum ullam laboriosam totam vel error dicta et.Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis! Ab pariatur dolor alias debitis molestiae reprehenderit tempora ducimus, atque amet inventore illum ullam laboriosam totam vel error dicta et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis! Ab pariatur dolor alias debitis molestiae reprehenderit tempora ducimus, atque amet inventore illum ullam laboriosam totam vel error dicta et.