Компоненты

Табы

В данной реализации используется делегирование, но это не решает вопрос с открытием активного таба так как высота у него устанавливается в JS, этот вопрос решается методом класса. Добавлен ResizeObserver, что помогает менять высоту блока при изменении размеров его содержимого без вызова дополнительных методов или функций (например если в табе будет кнопка показать ещё которая будет разворачивать дополнительный текст)

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

В файле init-tabs.js создаётся экземпляр класса Tabs который записывается в переменную tabs, им вы можете пользоваться по проекту при необходимости, так же он записывается в window.tabs.

Если табы находятся на первом экране, во избежание дёрганья во время расчёты высоты элемента, активному элементу data-tabs="element" нужно добавить класс .for-load, после инициализации табов он снимется.

Используйте в разработке экспортируемую переменную tabs, window сделан для бэкэнда

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

data-tabs="parent"	Устанавливается на родителе
data-tabs="controls"	Устанавливается на родителе контролов (кнопок)
data-tabs="control"	Устанавливается на контроле (кнопке)
data-tabs="content"	Устанавливается на родителе показываемых элементов
data-tabs="element"	Устанавливается на показываемом элементе

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

data-delay="время в милисекундах"	Устанавливается на родителе отвечает за задержку при смене табов, а именно задержку между убиранием активного класса у активного элемента и установкой активного класса на выбранном элементе
data-height="max"	Устанавливается на родителе, если он установлен, то высота блока будет равна максимальной высоте элементов таба.
data-height="unset"	Устанавливается на родителе, если он установлен, то высота блока не будет рассчитываться из js, а будет зависеть от стилей. Полезно для кейсов когда у контента фиксированная высота и в табе нужна прокрутка. Пример модалка на весь экран с табами

Методы экземпляра класса tabs

tabs.openTab(control)	принимает контрол (кнопку) в виде дом элемента отвечающую за открытие таба
tabs.reInit()	Вызывается при динамическом добавлении новых табов, никак не влияет на те табы что уже есть на странице

Инициализация

По умолчанию открыт первый элемент таба, все классы расставляются автоматом. Если нужно, что бы был открыт не первый элемент таба, то нужно установить класс is-active на нужный вам контрол (кнопку). Если вы установите этот класс на всех контролах (кнопках), то он снимется со всех контролов (кнопок) кроме первого по порядку в HTML относящихся к своему родителю (data-tabs="parent"), во вложенных родителях (data-tabs="parent") произойдёт тоже самое но относительно своего родителя.

Пример без data-height="max"

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.

Пример с data-height="max"

Пример с data-height="unset"

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.

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. 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.

Пример без data-delay

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci beatae blanditiis consectetur dolores doloribus earum error et excepturi fugiat, illo magnam maxime molestiae, natus nemo non nostrum porro provident quae quibusdam quisquam quos sed soluta velit veritatis vitae, voluptatem voluptatibus! Ab accusamus amet atque earum incidunt numquam officia optio perferendis. Ad alias doloremque ea eaque eos fugiat impedit itaque maxime nostrum omnis, perferendis placeat provident reprehenderit saepe temporibus? Aliquid fugit inventore laudantium neque repellat! Accusamus adipisci aspernatur atque dolor dolore dolorum earum est et explicabo id impedit inventore magnam maxime nihil, nobis numquam odit quis, quo repudiandae tempora? Aliquam consectetur unde voluptates. A accusamus aspernatur aut beatae corporis, eum incidunt minus necessitatibus repellendus totam ut voluptas! Ab architecto consequuntur dicta dignissimos enim eveniet inventore nulla quibusdam ratione sed. Assumenda cupiditate distinctio dolores, eaque esse facere obcaecati omnis quia repellendus? A adipisci assumenda beatae consequatur cupiditate dolorem dolores eligendi esse ex, fugiat fugit hic illo iure nemo non, nulla possimus praesentium quas quo tempora, temporibus veniam vero? Adipisci aperiam architecto assumenda at autem beatae dicta dolorum esse est et exercitationem expedita in laudantium molestiae nemo nisi nostrum perspiciatis possimus quis rem sapiente soluta tenetur velit voluptas, voluptates! Distinctio, id, quis.