AdaptivityProvider

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

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

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

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

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

Говоря о свойствах, по умолчанию они определяются как undefined. Автоматически определение есть только у свойства density при условии, что заданы 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 density="regular">
      <Button size="l">Я действительно большая кнопка</Button>
    </AdaptivityProvider>
  );
}

Хук useAdaptivity

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

example.jsx

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

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

AdaptivityProvider

Свойство	Описание
`density`	`DensityTypeValues` Тип размера экрана. По умолчанию: `-`
`hasHover`	`boolean` Deprecated: Since 7.3.0. Будет удалено в VKUI v9 (см. Https://github.com/VKCOM/VKUI/pull/8490). По умолчанию: `-`
`hasPointer`	`boolean` Флаг наличия указателя (например, мыши) на устройстве. По умолчанию: `-`
`sizeX`	`SizeTypeValues` Deprecated: Since 8.0.0. Будет удалено в VKUI v10 – используйте `sizeX="compact"` → `viewWidth={ViewWidth.MOBILE}` или `sizeX="compact"` → `viewWidth={ViewWidth.SMALL_TABLET}` (см. Https://github.com/VKCOM/VKUI/issues/9015). По умолчанию: `-`
`sizeY`	`SizeTypeValues` Deprecated: Since 8.0.0. Будет удалено в VKUI v10 – используйте `density` (см. Https://github.com/VKCOM/VKUI/issues/9015). По умолчанию: `-`
`viewHeight`	`number` Тип высоты экрана для адаптивного отображения. По умолчанию: `-`
`viewWidth`	`ViewWidthType` Тип ширины экрана для адаптивного отображения. По умолчанию: `-`

useAdaptivity

Не принимает свойств

Link

AppRoot