Время настройки: 2 минуты

Вкладки из Zero-блоков

Позволяет создавать кастомные табы из Zero-блоков — с активными вкладками, управлением кнопками и настраиваемой анимацией

Табы с вкладками и управлением стрелками

Переключатель Zero-блоков по кнопкам

Дополнение

Переключатель контента в Zero-блоке

Дополнение

Табы со вкладками и стрелками

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Создайте Zero-блок со вкладками и присвойте ему класс .uc-tabs-header

Если вы планируете использовать несколько табов на странице, задайте им разные названия классов, оканчивающиеся на -header, например, .uc-tabs1-header, uc-tabs2-header и т. д.
Создайте блоки, которые будут отображаться при нажатии на вкладки и присвойте им класс .uc-tabs

Если вы планируете использовать несколько табов на странице, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т. д.
Задайте каждой вкладке (элементу/группе с типом Object) ссылку #tab

Расположите вкладки в слоях в порядке возрастания. Первой (нижней) вкладке будет соответствовать первый Zero-блок. См. пример

Если у вкладок есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .tab-elem. Они будут исчезать для неактивных вкладок и появляться, когда вкладка станет активной.
Если вы хотите переключать вкладки по кнопкам, добавьте их в любой блок и присвойте ему класс .uc-tabs-footer. Для кнопки «вперёд» задайте ссылку #next, для кнопки «назад» — #prev

Если вы планируете использовать используете несколько табов на странице, задайте им разные названия классов, оканчивающиеся на -footer, например, .uc-tabs1-footer, .uc-tabs2-footer и т. д.
Задайте в настройках модификации поведение вкладок и их анимацию
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>tabs.init(".uc-tabs", { transition: 200, style: { active: { backgroundColor: "#FFFFFF" }, elems: { opacity: 0.4 } } })</script>

Открыть пример

Пример с автолэйаутом

+

Настройки модификации

Скорость и тип переходов:

Класс блоков со вкладками:

Переключать по ховеру:

+ Настройки стилей

Стрелки

Цвет фона активной стрелки

Бордер активной стрелки

Бордер активной вкладки

Цвет фона активной вкладки

Цвет текста активной вкладки

Вкладки

Иконка активной стрелки

Непрозрачность неактивных вкладок

Вы можете задать свой стиль для активного состояния стрелок. Они будут указывать на то, что вкладки можно переключить.

Задайте значение, чтобы скрыть неактивные вкладки или сделать их полупрозрачными.

+ Настройки автопереключения

Скорость переключения

Автопереключение вкладок

<!--tabs.js Вкладки в Zero-блоке. https://postnikovmd.com/mods/tabs-->
<script>tabs.init(".uc-tabs")</script>

Скопировать код

Особенности

Поддерживает анимации

Базовые и SBS-анимации запускаются при взаимодействии с блоком
Поддерживает автолэйауты

Вкладки будут работать, даже если блок собран полностью в Auto Layout
Комбинируется со слайдером

Позволяет сделать свой слайдер с переключением вкладок. Подробнее

Документация

Элементы

Параметры

Стили

Если вкладка открыта, ей присваивается класс .selected. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
Эти классы можно использовать для кастомизации стилей через CSS.