Tildify Elements
Модуль сравнения Было/Стало для Zero Block
Универсальный модуль сравнения для Tilda ZeroBlock.
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
- Подходит для сценариев «Было / Стало», сравнений дизайна, интерфейсов и любых двух состояний в одном Zero Block.
- Работает при перетаскивании ручки и при наведении, поддерживает горизонтальное и вертикальное сравнение.
- Поддерживает несколько независимых модулей сравнения в одном Zero Block с отдельными идентификаторами.
- Для flex-групп можно включить принудительное наложение слоев.
Встроенный умный дебагер для быстрого поиска ошибок при использовании.
Свой UI для настройки параметров встроенный прямо в редактор ZeroBlock.
Встроенная в редактор ZeroBlock панель управления элементами
Для использования элементов в Tilda ZeroBlock необходимо установить расширение для Google Chrome Tildify, если нужен импорт из Figma также потребуется плагин для Figma Tildify Validator
Для работы библиотеки необходима платная подписка Tilda, так как в бесплатной недоступно использование скриптов
Ниже приведены примеры использования модуля сравнения. Вы можете использовать ZeroBlock id для импорта в ваш проект примера модуля, чтобы посмотреть «как всё устроено». Для этого скопируйте id блока и используйте в расширении Tildify как id импорта.
Скрипт сравнения
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки модкля перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент модуля сравнения, кнопка настроек появится на панели инструментов справа.
Сравнение изображений и шейпов
Горизонтальное сравнение
Своя «ручка» для перемещения
Управление драгом
ZeroBlock id:
sno0umdvnrbe4l2s7738au
Скрипт сравнения
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки модкля перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент модуля сравнения, кнопка настроек появится на панели инструментов справа.
Сравнение изображений и шейпов
Вертикальное сравнение
Управление ховером
ZeroBlock id:
cw4ft9iz185lm781q80od
ДО
ПОСЛЕ
Сравнение групп
Горизонтальное сравнение
Управление ховером
Гибкая настройка контролов
ZeroBlock id:
y8zibvl0abo9dksmwxyx
Скрипт сравнения
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки модкля перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент модуля сравнения, кнопка настроек появится на панели инструментов справа.
Поддержка автоскейла блока
Горизонтальное сравнение
Автоскейл блока
Управление ховером
ZeroBlock id:
wsxkceujijh0zyohfz30h3
ДО
ПОСЛЕ
Скрипт слайдера
id: 1
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Поддержка window-привязки для группы
Горизонтальное сравнение
Управление ховером
Fill по window-контейнеру
ZeroBlock id:
wkynkhuhpszoohh5grev
Скрипт слайдера
id: 1
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
ДО
ПОСЛЕ
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Модуля сравнения
Сборка своего модуля в Тильде
- Нижнему слою, (это может быть картинка, шейп или группа), который будет являться элементом «ДО» задай класс tf_compare-before, верхнему слою, который будет являться «ПОСЛЕ» задай класс tf_compare-after. Ручка с классом tf_compare-handle опциональна и нужна только если хочешь показывать видимый перетаскиваемый элемент.
- Если в одном Zero Block несколько сравнений, используй одинаковое окончание у всех связанных классов: tf_compare-before-sale, tf_compare-after-sale, tf_compare-handle-sale.
- Добавь настройки модуля через меню Tildify Elements. Если модулей несколько, укажи в ID экземпляра тот же идентификатор, что и в классах.
- Проверь, что слой «ПОСЛЕ» расположен поверх слоя «ДО», иначе Модуль сравнения визуально не заработает.
- Если использует свойство Автолэйаута у артборда, то порядок элементов в слоях должен быть обратным («ПОСЛЕ» расположен ниже слоя «ДО»)
- Добавь в Zero Block элемент Модуль сравнения из Tildify Elements или вставь готовый пример с демо-страницы через импорт блока (должно быть установлено расширение для браузера Tildify).
Меню Tildify Elements в меню элементов ZeroBlock
Панель настроек Tildify Elements