Как верстать Dashboard
Три компонента, которые позволят сверстать дэшборд так, чтобы он красиво отображался при любом размере экрана, в том числе, на Galaxy Fold
Верстка расположения карточек c поддержкой мобильных устройств, при наплыве правок от бизнеса, становится не простой задачей
От сложных систем с множеством полей к одностраничной аналитике с кнопками действий
Если в эпоху Desktop были востребованы CRM и ERM системы с множеством полей, то эпоха Mobile требует интерфейсов, построенных на кнопках и отображении информации в готовом к использованию формате. Например, приложение Hamster Combat — кнопка для заработка денег и счетчик, показывающий сколько денег заработано. Такой интерфейс также выгоден с точки зрения бизнеса: дорогой backend не будет обесценен неудачей frontend-проекта, так как он код фронта stateless.
Три компонента, которые облегчат жизнь разработчику дашбордов
За время работы я разработал различные Dashboard’ы для CRM и ERP систем. Это сетки карточек, которые ведут себя как fluid до достижения определенной ширины, после чего становятся адаптивными. Ниже я представлю три базовых компонента, которые радикально упростили мне жизнь, и думаю, они будут полезны и вам.
ScaleView
Количество текста на виджете не вмещается в карточку на мобильных устройствах с маленьким размером экрана. Макет не допускает адаптивного дизайна. Этот компонент позволяет вместить виджет в меньший размер карточки, автоматически применяя центрирование и масштабирование.
Автоматическое сжатие карточки пропорционально размеру
import { ScaleView } from 'react-declarative'
...
FadeView
Иногда нужно добавить размытие к уже написанному виджету, чтобы показать пользователям macOS и мобильных устройств наличие прокрутки. Проблема в том, что для проджект-менеджера эта задача кажется незначительной по времени, но требует обширной работы с версткой. Также, с этим компонентом, будет хорошей практикой скрыть скроллбар на Windows: серые широкие полосы прокрутки выглядят непривлекательно с любым современным макетом из Figma.
import { FadeView } from 'react-declarative'
...
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s.
AutoSizer
Если вы хотите сделать квадрат на CSS, привязанный к размеру родителя, придется использовать хак padding-bottom: 100%. Это может привести к проблемам как с пониманием верстки, так и с дерганьем интерфейса при ререндере контента. Кроме того, можно сделать canvas или iframe, который растягивается в соответствии с размером родителя или строго заданной математической формулой. Этот компонент решает обе вышеупомянутые задачи.
import { AutoSizer } from 'react-declarative'
...
{({ height, width }) => {
const size = Math.min(height, width);
return (
)
})
Спасибо за внимание!
Надеюсь, представленные выше примеры помогут вам в будущем расширить библиотеку компонентов вашего приложения собственной реализацией :-)
