LinkedIn
Behance
Максим Постников
© 2025 Максим Постников. Все права защищены.
Ru
En

Вкладки из 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.
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
 
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис
Максим Постников | Дизайн...
Отключение автоскейла для для отдельных браузеров/устройств
27
20 фев в 12:00
120