Горизонтальный скроллинг группы в Bubble.io без CSS за 30 секунд!

---------------------------------------

В последнее время в проектах, где много таблиц, часто возникает необходимость их адаптации.

На этапе подготовки таких экранов к другим размерам дисплеев приходиться решать какие столбцы скрыть, а какие показать.

Я решил, что выбирать незачем, если можно уместить вообще всё!

Данный кейс имеет множество применений, не только в отношении таблиц.

---------------------------------------

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

Для этого необходимо:

1. Фиксируем ширину группы, которой добавляем скролл

2. Копируем значение максимальной ширины этой группы

3. Оборачиваем ее Repeating Group с параметрами:
- 1 строка
- 1 столбец
- Мин. ширина 0
- Макс. ширина = макс. ширине вложенной группы (просто вставляем, что скопировали в шаге 2)

4. Задаём Data source и Type of content для Repeating Group

---------------------------------------

В источник Repeating Group можно поместить что угодно. Например, выбрать тип данных "User", а в Data source поместить выражение Current User :converted to list. Это самый простой пример, чтобы не грузить приложение лишними запросами к БД, то есть берем пользователя и представляем его в виде списка оператором :converted to list.

P.S. Даже когда пользователь не залогинен у него есть свой текущий временный User в БД, если, насколько я знаю, на устройстве не запрещены Cookies.

Необязательно брать User за основу, это могут быть любые типы данных, например, "фиктивный" тип сущностей, который вы создадите специально для данного кейса (так будет даже лучше).

---------------------------------------

Постараюсь писать посты и уроки чаще начиная со следующей недели ✌🏻
Материал есть, осталось оформить 😅

---------------------------------------
#некодер #bubble #ui #rg #советы