Как сделать табы и вкладки в Zero Block на Тильде? ​

1. В отдельном Зеро-блоке добавляешь кнопки, которые будут табами/вкладками и привязываешь к ним класс, который в последствии нужно будет указать в поле генератора ниже «Класс кнопки». Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе.

2. Добавляешь на страницу блоки, которые необходимо скрыть/показывать при клике на кнопки;

3. Далее в генераторе заполняешь следующие поля:

• «пролистывать экран при переключении табов» — при клике на таб страница будет скроллиться в начало блока;
• «включить ссылки для табов» — включи эту настройку для того чтобы можно было перейтис другой страницы сайта к выбранному табу. Опубликуй страницу и скопируй из адресной строки ссылку вида #nlm383322331-myButton113
• «включить скролл до табов» — включи чтобы при открытии новой страницы была автоматическая прокрутка к выбранному табу (пример ссылки /link#nlm383322331-myButton113);
• «высота отступа сверху при скролле до табов (px)» — этот параметр определяет, на сколько пикселей от верхней части страницы будет отображаться выбранный таб при прокрутке;
• «стили активной кнопки» — в данном разделе можно настроить вид активного таба (Цвет фона, Цвет текста, Цвет бордюра, Ширина бордюра).

Имей ввиду: настройки стилей работают только для кнопок (элемент button), а не текст+шейп.

Настройки иконок:

• «Расположение иконки» — при нажатии на данную настройку можешь выбрать расположение иконки в кнопке. Доступно 2 варианта размещения иконки, слева или справа от названия кнопки;
• «Прижать иконку к краю кнопки» — при нажатии на данную настройку можешь изменить положение иконки внутри кнопки, приближая её к краю. Можешь указать отступ в пикселях от края кнопки чтобы контролировать расстояние между иконкой и краем кнопки.
• «Расположить контент внутри кнопки по центру» — включи чекбокс, если нужно разместить иконку и текст по центру кнопки;
• «Отступ от края/Отступ от текста» — в этом поле можешь указать отступ от края кнопки/отступ между иконкой и названием кнопки;
• «Ширина иконки (px)» и «Высота иконки (px)» — в этих полях указывается размер иконки в px. Отдельно можно настроить размер для экранов до 640рх;
• «Регулировка позиции иконки по высоте (px)» — иконки бывают разных размеров и форм, поэтому с помощью данной настройки можешь отрегулировать позицию иконки по высоте внутри кнопки для экранов от и до 640рх;

Добавить кнопки:

• «класс кнопки» — в данном поле необходимо указать класс привязанный к кнопке. Для каждой кнопки, должен быть отдельный класс;
• «id блоков для показа» — id блока, который будет отображаться/скрываться при клике на указанную кнопку;
• «ссылка — иконка в кнопке» — ссылку нужной иконки ты можешь копировать из галереи GL12;
• «ссылка — иконка в активной кнопке» — ссылку нужной иконки ты можешь копировать из галереи GL12;
• «добавить кнопки» — данная кнопка открывает поля для добавления следующей кнопки;

Если в мобильной версии хочешь сделать выпадающий список (вместо кнопок):

• Включи в генераторе опцию «Использую выпадающий список в мобильной версии»;
• Заполни «Имя поля для выпадающего списка»;
• В зероблоке создай форму с выпадающим списком и скрой для нее кнопку. Для этого в настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
• В панели редактирования формы настрой внешний вид формы;
• Варианты ответов в выпадающем списке должны совпадать с названиями кнопок;
• У поля с выпадающим списком заполни переменную (variable name), то же значение, что и в генераторе;
• В десктоп версии форму можно скрыть. В настройках элемента или через контекстное меню (например, правый клик) выбери опцию "Visibility" или "Видимость". Там можно указать на каких брейкпоинтах элемент будет видим ("Show"), а на каких - скрыт ("Hide"). Таким же способом скрой кнопки в мобильной версии.

Важно:

• В мобильной версии выпадающий список работает только если в десктопной версии табы сделаны с помощью элемента button (кнопка), а не текст+шейп.
• Выпадающий список работает на экранах до 768px.

4. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код.

Имей в виду:

• Табы должны находиться в отдельном Зеро-блоке, если настроить табы и контент для показа в одном блоке — модификация не будет работать корректно.
• Если при переключении табов сайт «прыгает» вверх, включи настройку «Включите эту галочку, если при переключении табов скрытые блоки не отображаются или страница прыгает вверх».
• У каждой кнопки с заданным классом обязательно должно быть заполнено её поле «id блоков для показа». Если хотя бы у одной кнопки это поле пустое — модификация не будет работать.
• Блоки, привязанные к табам должны быть расставлены в таком же порядке, как в табах.
• Ссылки на табы работают только при переходе с других страниц сайта. Они не работают внутри той же страницы, где находится модификация и блок с табами.
• Если в зеро-блоках с контентом элементы сгруппированы, и для них настроена анимация, тогда анимацию необходимо настраивать отдельно для каждого элемента группы, а не для всей группы в целом. Проверь это, если элементы не отображаются при переключении табов.
• Высота зероблоков с контентом должна быть фиксированной: Grid Container Height → Fixed. Проверьте это, если при переключении табов появляются дополнительные отступы.
• Если используешь модификацию в связке с модификацией NLM151, для каждого таба нужно указать по два ID блока для показа: зероблок с макетом карточки товара и блок ST305N.

• Если хочешь, чтобы табы выглядели как часть одного блока с контентом:

- Сделай у блока с табами высоту 0px;
- Установи overflow: visible у этого блока;
- Тогда блок с табами наложится поверх контентного блока и будет выглядеть как единый блок;
- Дополнительно проверь z-index, чтобы табы показывались сверху. Чем больше цифра, тем выше будет находиться слой.