Изменение стилей в айтеме влияет на все: как поменять стиль одного айтема

Иногда пользователи задают вопрос: почему при изменении стиля в одном айтеме виджета — всё меняется и во всех остальных айтемах. Как это обойти? Давайте разбираться.

Смотрите видео:

https://vk.com/video-219751701_456239238

VK Видео | YouTube | Rutube

Почему изменения применяются ко всем айтемам сразу?

Если создать блок-лист и изменить стили или классы у одного айтема, то они поменяются сразу у всех айтемов.


Добавляем класс для заголовка одного айтема, он появляется и у других, и стили всех заголовков меняются

Это сделано для удобства пользователей, чтобы все изменения применялись одновременно ко всем айтемам виджета — блок-листа, аккордеона, табов и других.

Например, при работе с аккордеоном удобно, когда изменения стилей применяются ко всем вкладкам сразу.

Как сделать разные айтемы?

По умолчанию при создании виджетов с айтемами используется зависимая структура — у виджетов один набор элементов внутри и одинаковые стили.

Например, если добавить в один из айтемов блок-листа картинку, то она автоматически появится и в остальных.

Добавляем картинку в один айтем — она добавляется во все

Если вы хотите, чтобы в одном айтеме была картинка, а в другом нет, или чтобы элементы в разных айтемах имели разные стили, нужно применить независимую структуру.

  1. Выберите виджет с айтемами (например, блок-лист).
  2. Перейдите в Настройки и нажмите кнопку Применить независимую структуру.

Нажимаем кнопку Применить независимую структуру

Важно: После применения независимой структуры вернуть зависимую структуру будет невозможно. Чтобы избежать проблем, предварительно рекомендуется сделать копию блока.

  1. Подтвердите применение независимой структуры в попапе.

Нажимаем кнопку Подтвердить

Готово! Теперь у блок-листа применена независимая структура, и вы можете удалить картинку в одном из айтемов, а в остальных они останутся.

В независимой структуре вы также можете использовать разные стили и классы для объектов в айтеме. Например, можно поменять стили одного из заголовков.

В одном из айтемов удалили картинку и изменили размер заголовка

Что дает независимая структура?

После применения независимой структуры вы сможете:

  • Скрывать или удалять элементы в отдельных айтемах.
  • Применять разные классы к объектам в каждом айтеме индивидуально.
  • Создавать уникальный дизайн для каждого айтема.

Резюме

Два типа структуры айтемов в виджетах:

  • Зависимая структура (по умолчанию) — изменения в одном айтеме применяются ко всем айтемам.
  • Независимая структура — позволяет настраивать каждый айтем индивидуально.

Важно: Применение независимой структуры — необратимое действие. Рекомендуется создать копию блока перед этим шагом.