AdaptivityProvider

Переопределяет базовую адаптивность компонента – глобально или локально. Принимает все доступные параметры адаптивности.

Когда использовать?

Если вам нужно зафиксировать размер компонента на compact или regular (см. Адаптивность | Размеры элементов интерфейса).
Если вам нужно зафиксировать конкретный брейкпоинт на мобильный, планшетный, настольный и т.п. (см. Адаптивность | Размеры экрана).
Если вам нужно зафиксировать поведение компонента (см. Адаптивность | Наличие точного указателя).

Логика работы

AdaptivityProvider всегда перебивает свой вышестоящий экземпляр – это значит, что свойства не наследуются из контекста.

Говоря о свойствах, по умолчанию они определяются как undefined. Автоматически определение есть только у свойств sizeX и sizeY при следующих условиях:

если sizeX не задан, но задан viewWidth;
если sizeY не задан, но заданы viewWidth и viewHeight или viewWidth и hasPointer или только viewHeight.

Глобальное переопределение

Оборачиваем в AdaptivityProvider всё приложение.

index.js

import { ConfigProvider, AdaptivityProvider, AppRoot, ViewWidth } from '@vkontakte/vkui';
 
/**
 * Зашили верстку и поведение под настольные экраны.
 */
export function AlwaysDesktopWithMouse() {
  return (
    <ConfigProvider>
      <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
        <AppRoot>{/* приложение */}</AppRoot>
      </AdaptivityProvider>
    </ConfigProvider>
  );
}

Локальное переопределение

В необходимом месте отдельно оборачиваем компонент или ряд компонентов в AdaptivityProvider.

import { AdaptivityProvider, Button } from '@vkontakte/vkui';
 
/**
 * Зашили высоту кнопки в "regular" размере.
 */
export function ReallyBigButton() {
  return (
    <AdaptivityProvider sizeY="regular">
      <Button size="l">Я действительно большая кнопка</Button>
    </AdaptivityProvider>
  );
}

Хук useAdaptivity

Хук возвращает из контекста свойства, переданные в AdaptivityProvider.

example.jsx

import { AdaptivityProvider, useAdaptivity } from '@vkontakte/vkui';
 
function AdaptivityPropsByContext() {
  const {
    sizeX = 'undefined',
    sizeY = 'undefined',
    viewWidth = 'undefined',
    viewHeight = 'undefined',
    hasPointer = 'undefined',
  } = useAdaptivity();
 
  return (
    <pre>
      sizeX: {sizeX}, sizeY: {sizeY}, viewWidth: {viewWidth}, viewHeight: {viewHeight}, hasPointer:{' '}
      {hasPointer}
    </pre>
  );
}
 
// На странице увидим такой вывод
//
// sizeX: compact, sizeY: undefined, viewWidth: undefined, viewHeight: undefined, hasPointer: undefined
export function App() {
  return (
    <AdaptivityProvider sizeX="compact">
      <AdaptivityPropsByContext />
    </AdaptivityProvider>
  );
}

Свойства и методы

Свойство	Описание
`hasHover`	`boolean` Deprecated: Since 7.3.0. Свойство нигде не используется и будет удалено в `v8`. По умолчанию: `-`
`hasPointer`	`boolean` Флаг наличия указателя (например, мыши) на устройстве. По умолчанию: `-`
`sizeX`	`SizeTypeValues` Тип размера экрана по горизонтали. По умолчанию: `-`
`sizeY`	`SizeTypeValues` Тип размера экрана по вертикали. По умолчанию: `-`
`viewHeight`	`number` Тип высоты экрана для адаптивного отображения. По умолчанию: `-`
`viewWidth`	`ViewWidthType` Тип ширины экрана для адаптивного отображения. По умолчанию: `-`

Link

AppRoot