2022-10-27 19:50:05
Горизонтальный скроллинг группы в 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 #советы
185 views16:50