Tildify Elements
Аккордеон для Zero Block
Универсальный аккордеон для Tilda ZeroBlock.
Режим одной открытой карточки и нескольких. Возможность свернуть все. Настройка анимации. Гибкая настройка активной вкладки. Поддержка вложенных аккордеонов и слайдеров. Горизонтальный аккордеон.
Поддержка импорта и автогенерации аккордеона из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Режим одной открытой карточки и нескольких. Возможность свернуть все. Настройка анимации. Гибкая настройка активной вкладки. Поддержка вложенных аккордеонов и слайдеров. Горизонтальный аккордеон.
Поддержка импорта и автогенерации аккордеона из вашего дизайна в Figma при использовании плагина Tildify Validator
Встроенный умный дебагер для быстрого поиска ошибок при использовании. Свой UI для настройки параметров.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп
Автовысота ZeroBlock
Одна открытая карточка
Настройка цвета фона активной секции
Гибкая настройка контролов
ZeroBlock id:
9c6xrohd5rij8jmjce0l
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Новые возможности
Откройте для себя простой и удобный способ решать повседневные задачи
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
Аккордион на базе обычных групп
Автовысота ZeroBlock
Несколько открытых карточек
Настройка цвета фона активной секции
Компоновка за счет визуальной позици
ZeroBlock id:
i9whiw8vhdr2st1mmfen
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп с настраиваемыми заголовками
Автовысота ZeroBlock
Настройка цвета разделителя
Гибкая настройка контролов
Гибкая настройка состояния заголовка
ZeroBlock id:
oi805mmvu6r6v86bentl
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Аккордион на базе flex-групп с вложенными элементами
Автовысота ZeroBlock
Одна открытая карточка
Настройка цвета фона активной секции
Вложенные элементы
ZeroBlock id:
hxx4z1chkajg8bco5l40gp
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Заголовок
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Заголовок
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества.
Скрипт слайдера
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id:
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Горизонтальный аккордеон
Одна открытая карточка
Вложенные элементы
В мобайле вертикальный
ZeroBlock id:
nypvbp2fwd0o2ph2pbfmee
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
В своём стремлении улучшить пользовательский опыт мы упускаем, что непосредственные участники технического прогресса лишь добавляют фракционных разногласий и в равной степени предоставлены сами себе! С другой стороны, современная методология разработки не даёт нам иного выбора, кроме определения поэтапного и последовательного развития общества. Прежде всего, современная методология разработки позволяет выполнить важные задания по разработке экспериментов, поражающих по своей масштабности и грандиозности.
Tildify Elements
Все примеры собраны на основе одного движка Tildify Elements без использования дополнительных скриптов.
Присоединяйтесь!
Присоединяйтесь!
Инструкция для Аккордеона
- Создайте секции аккордеона: для каждой секции объедините заголовок и контент в отдельные группы типа Object.
- Заголовку секции задайте класс tf_accordion-header.
- Контенту секции задайте класс tf_accordion-content.
- При желании можно дополнительно объединить заголовок и контент одной секции в общую группу и задать ей класс tf_accordion-item. Это не обязательно, но делает структуру более явной и стабильной.
- Объедините все секции в одну общую группу типа Object, задайте ей свойство Autolayout (не обязательно )и присвойте класс tf_accordion.
- Настроив направление Autolayout, можно сделать вертикальный или горизонтальный аккордеон.
- Внутри заголовка можно размещать любые элементы: текст, иконки, кнопки, номера, декоративные элементы. Кнопки будут менять свой стиль на Hover при открытой вкладке.
- Если хотите явно задать кнопку или иконку раскрытия, можно использовать классы tf_accordion-button и tf_accordion-icon. Если не задавать их явно, аккордеон постарается определить нужные элементы автоматически.
- Внутри tf_accordion-content можно размещать любой контент: текст, карточки, кнопки, вложенные группы, а также вложенные слайдеры и вложенные аккордеоны.
- Если в одном ZeroBlock больше чем один аккордеон, последующим аккордеонам задавайте имя: tf_accordion-1. Для второго/третьего аккордеона: tf_accordion-2, tf_accordion-3 и т.д.
- Разместите конфиг аккордеона, добавив его из меню элементов ZeroBlock выбрав пункт TIldify Elements (должно быть установлено расширение для браузера Tildify).
- Настройте параметры аккордеона в HTML-блоке, или выделите HTML-блок и нажмите кнопку настроек аккордеона в боковом меню Tildify Elements, чтобы редактировать параметры через интерфейс настроек.