Tildify Elements
Табы
Универсальные табы для Tilda ZeroBlock.
Настройка анимации. Гибкая настройка активной вкладки. Поддержка вложенных аккордеонов и слайдеров.
Поддержка импорта и автогенерации табов из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Настройка анимации. Гибкая настройка активной вкладки. Поддержка вложенных аккордеонов и слайдеров.
Поддержка импорта и автогенерации табов из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
1
/
1
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Табы на базе обычных групп
Автовысота ZeroBlock
Гибкая настройка кнопок табов
Разные виды анимации
ZeroBlock id:
k13kfvkfnal6teulihblwk
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Табы на базе flex-групп
Автопереключение
Переключение при наведении
Гибкая настройка кнопок табов
Разные виды анимации
Настройка позиции и анимации линии кнопок
ZeroBlock id:
k13kfvkfnal6teulihblwk
1
/
1
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Табы на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Гибкая настройка кнопок табов
Разные виды анимации
Вложенные слайдеры и аккордеоны
ZeroBlock id:
k13kfvkfnal6teulihblwk
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
1
/
1
Новые возможности
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Всё под рукой
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Лёгкий старт
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
/
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Скрипт табов
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки табов перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент табов, кнопка настроек появится на панели инструментов справа.
Табы на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Гибкая настройка кнопок табов
Разные виды анимации
Вложенные слайдеры и аккордеоны
ZeroBlock id:
k13kfvkfnal6teulihblwk
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
1
/
1
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
Подробнее
Всё под рукой
Все необходимые функции в одном месте — быстро и без лишних действий
Подробнее
Лёгкий старт
Начните использовать сервис за пару минут без сложных настроек
Подробнее
Удобный интерфейс
Продуманный дизайн помогает сосредоточиться на главном
Подробнее
Быстро и эффективно
Экономьте время с помощью оптимизированных процессов
Подробнее
/
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе!
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Табов
- Создайте кнопки табов: для каждой вкладки объедините содержимое кнопки в отдельную группу типа Object.
- Кнопке таба задайте класс tf_tab-button.
- Панели табов создайте отдельно: для каждой вкладки объедините контент панели в отдельную группу типа Object и задайте ей класс tf_tab-panel.
- Объедините кнопки и панели в одну общую группу типа Object, и присвойте класс tf_tabs.
- Внутри tf_tab-button можно размещать любые элементы: текст, иконки, номера, кнопки, декоративные элементы. Если внутри кнопки используется Tilda Button, активная вкладка может применять стиль Hover как активное состояние.
- Внутри tf_tab-panel можно размещать любой контент: текст, карточки, кнопки, вложенные группы, изображения, а также вложенные слайдеры, аккордеоны.
- Если нужны кнопки переключения между вкладками, можно добавить элементы с классами tf_tabs-prev и tf_tabs-next.
- Если нужны счётчики текущей и общей вкладки, можно добавить текстовые элементы с классами tf_tabs-current и tf_tabs-total.
- Если в одном ZeroBlock больше чем один tabs-элемент, последующим табам задавайте уникальное имя: tf_tabs-1 для первого набора, tf_tabs-2, tf_tabs-3 и так далее для следующих.
- Связанные элементы внутри конкретного набора табов должны использовать тот же идентификатор: tf_tab-button-2, tf_tab-panel-2, tf_tabs-prev-2, tf_tabs-next-2, tf_tabs-current-2, tf_tabs-total-2.
- Разместите конфиг табов, добавив его из меню элементов ZeroBlock выбрав пункт TIldify Elements (должно быть установлено расширение для браузера Tildify).
- Настройте параметры табов в HTML-блоке, или выделите HTML-блок и нажмите кнопку настроек tabs в боковом меню Tildify Elements, чтобы редактировать параметры через интерфейс настроек.