Дашборд, который красиво выглядит на мониторе, но «разваливается» на планшете или телефоне – частая проблема BI-отчетности. Пользователи открывают аналитику с разных устройств, и если верстка не адаптируется под экран, часть данных становится нечитаемой или вовсе теряется.
В AW BI эта задача решается с помощью адаптивной верстки – дашборды автоматически подстраиваются под размер экрана, будь то компьютер, планшет или смартфон. Это особенно важно для отчетов с большим количеством виджетов, где нужно сохранить удобство просмотра на любом устройстве.
Ключевой инструмент адаптивной верстки: контейнеры. В статье разберем, что это такое и как их использовать для группировки виджетов, гибкой компоновки и корректного отображения дашбордов на разных устройствах.
В AW BI эта задача решается с помощью адаптивной верстки – дашборды автоматически подстраиваются под размер экрана, будь то компьютер, планшет или смартфон. Это особенно важно для отчетов с большим количеством виджетов, где нужно сохранить удобство просмотра на любом устройстве.
Ключевой инструмент адаптивной верстки: контейнеры. В статье разберем, что это такое и как их использовать для группировки виджетов, гибкой компоновки и корректного отображения дашбордов на разных устройствах.
Что такое контейнеры в AW BI
Контейнеры – это системные виджеты, которые позволяют:
Важно: само пространство дашборда уже является контейнером. Его настройки расположения элементов находятся во вкладке «Вид».
- визуально группировать элементы дашборда;
- управлять их расположением: вертикально, горизонтально или вручную;
- настраивать отступы и расстояния между виджетами;
- создавать сложные компоновки, например фиксированные панели с прокручиваемым содержимым.
Важно: само пространство дашборда уже является контейнером. Его настройки расположения элементов находятся во вкладке «Вид».
Группировка элементов
Контейнеры помогают визуально объединять виджеты в логические блоки.
Порядок действий такой:
Пример. Создаем контейнер, добавляем в него три виджета, задаем горизонтальное расположение и отступы 20 px по горизонтали и вертикали. Для наглядности при разработке фон контейнера можно закрасить.
Порядок действий такой:
- Создайте контейнер и добавьте в него нужные элементы.
- Настройте фон, отступы и расстояние между виджетами.
- Выберите тип расположения: вертикальное, горизонтальное или абсолютное позиционирование.
Пример. Создаем контейнер, добавляем в него три виджета, задаем горизонтальное расположение и отступы 20 px по горизонтали и вертикали. Для наглядности при разработке фон контейнера можно закрасить.
Вложенные контейнеры для сложной структуры
Если структура дашборда сложнее, чем один уровень группировки, используйте вложенные контейнеры: основной контейнер содержит подгруппы виджетов, а внутри него размещаются дополнительные контейнеры с собственными настройками.
Пример. Основной контейнер: горизонтальный. Внутри: вложенный контейнер 1 с виджетами 1 и 2, и вложенный контейнер 2 с виджетами 3 и 4. Между вложенными контейнерами задан увеличенный отступ для визуального разделения блоков.
Пример. Основной контейнер: горизонтальный. Внутри: вложенный контейнер 1 с виджетами 1 и 2, и вложенный контейнер 2 с виджетами 3 и 4. Между вложенными контейнерами задан увеличенный отступ для визуального разделения блоков.
Фиксация размеров виджетов
По умолчанию виджеты растягиваются при изменении размера контейнера. Чтобы зафиксировать ширину или высоту конкретного элемента, выберите виджет, откройте «Поведение в контейнере» и установите значение «Фиксированный» вместо «Растянуть».
Пример. В горизонтальном контейнере три виджета. Первый зафиксирован по ширине, а именно 500 px, остальные два подстраиваются автоматически при изменении размера контейнера.
Пример. В горизонтальном контейнере три виджета. Первый зафиксирован по ширине, а именно 500 px, остальные два подстраиваются автоматически при изменении размера контейнера.
Прокрутка внутри контейнера
Часто нужно, чтобы верхняя панель дашборда: фильтры и ключевые тренды оставалась на месте, а основной контент прокручивался отдельно.
Как это сделать:
Как это сделать:
- Для контейнера, где нужна прокрутка, выберите «Абсолютное позиционирование».
- Для всех внутренних виджетов настройте поведение: по вертикали – «Фиксированный», по горизонтали – «Растянуть».
- Задайте высоту контейнера больше высоты экрана, тогда появится прокрутка. Такой же эффект даст виджет внутри контейнера, высота которого больше самого контейнера.
Создание сложных виджетов из нескольких элементов
Контейнеры позволяют объединять разные элементы в единый визуальный блок, например, тренд и диаграмму в одной карточке. Виджеты внутри контейнера можно заблокировать, чтобы компоновка не «разваливалась» при перемещении.
Пример. Создаем контейнер с фоном, размещаем внутри тренд и мини-график, на вкладке «Вид» убираем тени и выравниваем элементы между собой.
Пример. Создаем контейнер с фоном, размещаем внутри тренд и мини-график, на вкладке «Вид» убираем тени и выравниваем элементы между собой.
Адаптация дашборда под мобильные устройства
Для корректного отображения на разных устройствах контейнеры позволяют:
Пример. На компьютере дашборд показывает три тренда в горизонтальном контейнере. А на смартфоне два тренда и другой тип диаграммы, более компактный для маленького экрана.
- менять расположение виджетов, например, на мобильном делать его вертикальным;
- скрывать или заменять отдельные виджеты через функцию «Скрыть» на вкладке «Структура»;
- настраивать разные версии одного виджета под конкретное устройство, например уменьшать размер шрифта для мобильных экранов.
Пример. На компьютере дашборд показывает три тренда в горизонтальном контейнере. А на смартфоне два тренда и другой тип диаграммы, более компактный для маленького экрана.
Полезные советы по работе с контейнерами
- Закрашивайте фон контейнеров на этапе разработки, так проще контролировать границы и вложенность блоков.
- Используйте вкладку «Структура» для управления вложенными элементами: скрытием виджетов, их блокировкой на итоговой панели.
- Экспериментируйте с типами расположения, чтобы найти оптимальную компоновку под конкретный отчет.
Контейнеры — базовый инструмент адаптивной верстки в AW BI. С их помощью можно группировать виджеты, выстраивать вложенные структуры, фиксировать размеры элементов, настраивать прокрутку и адаптировать дашборд под мобильные устройства без потери данных и удобства просмотра.
Хотите больше практических примеров?
Посмотрите мастер-класс по адаптивной верстке в AW BI по >>ссылке.
А если у вас остались вопросы, то задавайте их в сообществе AW BI.
Посмотрите мастер-класс по адаптивной верстке в AW BI по >>ссылке.
А если у вас остались вопросы, то задавайте их в сообществе AW BI.