Адаптивность
В зависимости от ширины и высоты экрана и наличия точного указателя (мышь, стилус) компоненты VKUI автоматически адаптируют внешний вид одним из двух способов:
- Меняют размеры на компактные или базовые (далее —
compactиregular). - Изменяют вёрстку и поведение.
В этой документации вы узнаете:
- какие бывают параметры адаптивности;
- как переопределить адаптивность глобально и локально;
- как создавать собственные адаптивные интерфейсы.
Параметры адаптивности
Библиотека использует несколько подходов.
| Подход | Реализация в коде |
|---|---|
| ↓ Изменение размеров интерфейса | density |
| ↓ Изменение вёрстки | viewWidth и viewHeight |
| ↓ Изменение поведения | hasPointer |
Размеры элементов интерфейса
Чтобы интерфейс был удобен и на десктопе, и на мобильных, у большинства компонентов два режима размера: compact и regular.
compact— включается при большом экране и точном указателе (например, мышь). Используются меньшие размеры, чтобы на экране помещалось больше элементов — их не нужно прятать за меню.regular— включается при ограниченной области экрана и отсутствии точного указателя (сенсорный экран). Элементы крупнее, чтобы по ним удобно было попадать пальцем.
За это отвечает свойство density, которое принимает compact или regular.
Если значение не задано, оно зависит от @media ↗ в CSS и matchMedia() ↗ в JS — от ширины, высоты экрана и наличия точного указателя.
| Значение | Условие |
|---|---|
compact | высота < 415px,или мышь / стилус и ширина >= 768px |
regular | высота >= 415px и сенсорный экран,или высота >= 415px и нет указателя,или высота >= 415px и ширина < 768px |
Размеры экрана
От размера экрана может полностью меняться вёрстка компонента, чтобы сохранить привычный пользователю интерфейс. Например, ModalPage на мобильном — выезжающая снизу панель, а на десктопе — диалоговое окно по центру.
Размер экрана описывают два свойства с брейкпоинтами: viewWidth и viewHeight. В CSS они реализованы через @media ↗, в JS — через matchMedia() ↗.
viewWidth
| Брейкпоинт | Условие |
|---|---|
| DESKTOP | ширина >= 1280px |
| TABLET | ширина >= 1024px |
| SMALL_TABLET | ширина >= 768px |
| MOBILE | ширина >= 320px |
| SMALL_MOBILE | ширина < 320px |
viewHeight
| Брейкпоинт | Условие |
|---|---|
| MEDIUM | высота >= 720px |
| SMALL | высота >= 415px |
| EXTRA_SMALL | высота < 415px |
Наличие точного указателя
Помимо вёрстки по размеру экрана, важно сохранить привычное взаимодействие с интерфейсом.
Возьмём элемент, который появляется при наведении. С мышью или стилусом это оправданно, на сенсорном экране — антипаттерн. Поэтому Avatar.Overlay при точном указателе показывается по наведению, без него — всегда.
Наличие точного указателя определяет свойство hasPointer.
hasPointer
В CSS — через @media (pointer: fine) ↗, в JS — через hasMouse из @vkontakte/vkjs ↗.
Переопределение адаптивности
Если нужно зафиксировать конкретные размеры, вёрстку или поведение, используйте провайдер AdaptivityProvider.
- см. AdaptivityProvider | Глобальное переопределение
- см. AdaptivityProvider | Локальное переопределение
Утилиты для создания адаптивных интерфейсов
Утилиты в порядке приоритета использования:
- Хук
useAdaptivityConditionalRender— показать или скрыть элемент по брейкпоинту. - Компонент
AdaptiveIconRenderer— заменить иконку на другой размер по условиюcompactилиregular. - Хук
useAdaptivityWithJSMediaQueries— показать или скрыть элемент во всплывающих окнах (см. Серверный рендер | Примечание к адаптивности).
Подробнее — в отдельных документациях по каждой утилите.