tgoop.com/code_breakers/643
Last Update:
🖥 Фича Bubble, о которой вы наверняка не знали
Вы наверняка не знаете об этой классной функции в Bubble: возможности воспроизводить изображения в формате Masonry Grid — сетки, в которой изображения выстраиваются в неровном шахматном порядке. Формат такой сетки встречается в Pinterest. Рассказываем, как сделать такую самому!
Как сделать Masonry Grid: начало настройки
1️⃣ Заранее подготовьте изображения и убедитесь в их качестве: некоторые будут вытягиваться вертикально, так что и разрешение, и сама картинка должны быть к этому готовы.
2️⃣ Получить Masonry Grid можно только внутри элемента Repeating Group, в которой потоком воспроизводятся изображения из базы данных. Так что создайте Repeating Group и задайте источником данных для неё изображения.
3️⃣ Перейдите в настройки Repeating Group через редактор свойств — серое окошко с настройками элемента. Там надо найти чек-бокс Set fixed number of rows и снять галочку.
4️⃣ После этого появится чек-бокс Stretch rows to fill vertical space — растянуть строки и заполнить вертикальное пространство. Эту галочку тоже надо снять.
✅ После двух этих манипуляций появится новая настройка, которая раньше не была видна — Display items as masonry grid.
Как сделать Masonry Grid: работа с изображениями
Сетка-масонри включена. Теперь можно настроить отображение изображений, чтобы всё смотрелось красиво и аккуратно.
1️⃣ Здесь же, во вкладке Appearance, в настройке Repeating Group можно задать расстояние между изображениями, чтобы они не прилипали друг к другу.
2️⃣ Теперь надо кликнуть на сам элемент изображения в ячейке Repeating Group. Найдите настройку Run-mode rendering. Поменяйте настройку с Zoom на настройку Rescale и тогда изображение отобразится согласно своим истинным пропорциям.
3️⃣ Идём во вкладку Layout. Там надо найти настройку Make this element fixed-height. Снимите галочку. Теперь изображения будут отображаться так, как положено в Masonry Grid.
✅ Masonry Grid готова!
Ещё пара лайфхаков:
➕ Можно настроить отображение Masonry Grid по колонкам, задав внутри Repeating Group фиксированное количество колонок, например, 3 штуки. Тогда изображения будут выстраиваться сверху вниз в три колонки.
➕ Если снять настройку на фиксированное количество колонок, станет доступна настройка ширины каждой колонки, и тогда изображение будет занимать эту ширину.
➖➖➖➖➖➖➖➖➖➖➖➖
В классическом программировании для создания Masonry Grid используется HTML, CSS и, чтобы всё заработало, — JavaScript. Довольно трудоёмкая задачка сделать всё это рабочим — и результат, к слову, может сказаться на производительности.
А в Bubble такая крутая фича реализуется в несколько кликов и за пару минут работы!
Хотите знать все доступные фишки лучших No-code инструментов и научиться создавать топовые IT-продукты на Bubble? Тогда ждём на курсе «Веб-разработчик без кода», стартуем 25 октября!
🖥 Хочу освоить Bubble: codebreakers.tech/bubble
BY Code Breakers | No-code solutions
Share with your friend now:
tgoop.com/code_breakers/643