Мы разделяем все устройства на 6 групп:
| Категория | Мин.размер экрана (px) |
|---|---|
| MOBILE_SMALL | 0 |
| MOBILE_LARGE | 360 |
| TABLET_SMALL | 480 |
| TABLET_LARGE | 768 |
| DESKTOP_SMALL | 992 |
| DESKTOP_LARGE | 1200 |
Получить данные значения для динамической обработки можно следующим образом:
typescriptimport { BREAKPOINTS } from '@open-condo/ui/hooks' console.log(BREAKPOINTS.TABLET_LARGE) // 768
Однако в большинстве случаев обрабатывать значения вручную вам не придется, потому что
для создания адаптивных страниц и компонентов Condo UI предоставляет разработчикам 2 React-хука:
useContainerSize и useBreakpoints.useContainerSize
Данный хук наблюдает за вашим контейнером с помощью
React-ref и возвращает размеры этого контейнера,
позволяя вам адаптировать его содержимое в зависимости от этих размеров:typescriptimport React from 'react' import { useContainerSize } from '@open-condo/ui/hooks' const MIN_COL_WIDTH = 250 const CardGrid: React.FC = () => { const [{ width, height }, setRef] = useContainerSize() const cardsPerRow = Math.max(1, Math.floor(width / MIN_COL_WIDTH)) return ( <div className='my-container' ref={setRef}> {/* ... */} </div> ) }
Основное применение данного хука - динамическое определение колонок в сетке, а также определение наполнения
и позиционирование дочерних суб-компонентов внутри родительского контейнера, однако он может быть использован
для произвольных целей, в том числе и в комбинации со значениями представленными выше.
useBreakpoints
Хук
useBreakpoints возвращает объект со всеми активными брейкпоинтами. Так например выглядит данные при ширине окна в 900px:typescriptimport { useBreakpoints } from '@open-condo/ui/hooks' const breakpoints = useBreakpoints() console.log(breakpoints.MOBILE_SMALL) // true, 900px >= 0px console.log(breakpoints.TABLET_LARGE) // true, 900px >= 768px console.log(breakpoints.DESKTOP_SMALL) // false, 900px < 992px
Таким образом, чтобы поменять расположение на всех планшетах, нужно сделать следующее условие:
typescriptimport { useBreakpoints } from '@open-condo/ui/hooks' const breakpoints = useBreakpoints() if (breakpoints.TABLET_SMALL && !breakpoints.DESKTOP_SMALL) { // at least small tablet, but not small desktop yet }
Обратите внимание, что для мини-приложений шириной окна является не размер вкладки браузера, а размер IFrame-окна, в котором открыли данное приложение.