PlatformProvider

Компонент, позволяющий переопределить платформу.

Платформа

Задаётся свойством value.

"android" – используется на настольных и мобильных устройствах под управлением системы Android.
"ios" – используется на мобильных устройствах или планшетах с системой iOS/iPadOS.
"vkcom" – используется командой ВКонтакте. На данный момент она не предназначена для адаптивного интерфейса, используйте её только в том случае, если ваше приложение встроено в vk.com ↗.

<PlatformProvider value="ios">
  {/* часть вашего приложения, требующая переопределения платформы */}
</PlatformProvider>

Обратите внимание

При переопределении темы убедитесь, что компонент, обёрнутый в PlatformProvider, принимает свойство className, иначе визуальные изменения соответствующей платформы не будут применены.

function BadComponent({ children }) {
  return (
    <Div>
      <Button>I'm not ios 😔</Button>
    </Div>
  );
}
function GoodComponent({ className, children }) {
  return (
    <Div className={className}>
      <Button>I'm ios 😎</Button>
    </Div>
  );
}
function InfoBoard({ children }) {
  return (
    <PlatformProvider value="ios">
      <BadComponent /> {/* стили "ios" не применяются */}
      <GoodComponent /> {/* стили "ios" применяются */}
    </PlatformProvider>
  );
}

Хук usePlatform

Для получения текущего значения платформы используйте хук usePlatform:

import { usePlatform } from '@vkontakte/vkui';

const platform = usePlatform();

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

PlatformProvider

Свойство	Описание
`children`	`ReactNode` Содержимое. По умолчанию: `-`
`value`	`PlatformType` Платформа. По умолчанию: `-`

usePlatform

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

LocaleProvider

AspectRatio