Исходник ↗Песочница ↗

ConfigProvider

Обязательный компонент, в который нужно обернуть всё приложение. В нём инкапсулирована логика управления:

  • платформой,
  • темой,
  • локализацией,
  • и другими глобальными настройками приложения.

Платформа

Влияет на внешний вид компонентов, анимации и поведение интерфейса. Задаётся свойством platform.

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

Если не указывать, то значение определяется автоматически на основе браузерной информации.

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

Оберните в нужном месте в PlatformProvider.

Цветовая схема

Задаётся свойством colorScheme. Если не указывать, то значение определяется автоматически исходя из настроек операционной системы.

  • "light" — светлая схема;
  • "dark" — тёмная схема.

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

Оберните в нужном месте в ColorSchemeProvider.

Локализация

Задаётся свойством locale. Если не указывать, то значение будет равно "ru". В качестве значений принимает строку с языковой меткой BCP 47 ↗.

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

Оберните в нужном месте в LocaleProvider.

Направление контента

Задаётся свойством direction. По умолчанию значение определяется автоматически на основе атрибута dir на body страницы.

  • "ltr" — направление “слева-направо” (для большинства языков);
  • "rtl" — направление “справа-налево” (для арабского, иврита и т.д.).

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

Оберните в нужном месте в DirectionProvider.

Токены тем

Задаётся свойством tokensClassNames. Позволяет настроить CSS-классы для различных тем и платформ.

<ConfigProvider tokensClassNames={{ light: 'custom-light-theme', dark: 'custom-dark-theme' }}>
  <App />
</ConfigProvider>

Анимации переходов

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

  • true — включены анимации переходов между экранами в Root и View;
  • false — анимации отключены.

WebView

Задаётся свойством isWebView. Значение true позволяет приложению определить, что оно запущено в рамках мобильного приложения.

Хук useConfigProvider

Для получения текущих настроек приложения используйте хук useConfigProvider:

import { useConfigProvider } from '@vkontakte/vkui';
const { colorScheme, platform, locale, direction, ...restProps } = useConfigProvider();

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

ConfigProvider

СвойствоОписание
childrenReactNode

Содержимое.

По умолчанию: -
colorSchemeColorSchemeType

Тип цветовой схемы – light или dark.

По умолчанию: -
customPanelHeaderAfterMinWidthstring | number

Задаёт необходимый минимальную ширину слота after в PanelHeader под пользовательский “плавающий” элемент (например, ширина панели управления webview).

Учитывается только при hasCustomPanelHeaderAfter={true} (см документацию hasCustomPanelHeaderAfter).

По умолчанию: 90
directionDirection

Направление контента.

При использовании определенного значения, важно установить атрибут dir с таким же значением либо на дочерний элемент, либо на все страницу в целом.

По умолчанию: Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы
hasCustomPanelHeaderAfterboolean

При true слот after у PanelHeader игнорируется под размещение пользовательского “плавающего” элемента (например, панель управления webview).

По умолчанию: -
isWebViewboolean

Подсказывает приложению, обёрнутому в ConfigProvider, где открыто приложение: внутри webview или в мобильном браузере.

В условиях когда:

  • isWebView={true}
  • platform=“ios”.

Для компонента View включается возможность навигации через смахивание.

По умолчанию: -
localestring

Строка с языковой меткой BCP 47.

По умолчанию: -
platformPlatformType

Платформа.

По умолчанию: -
tokensClassNamesTokensClassNames

CSS классы, определяющие набор токенов.

  • Используйте { light?: '<css_class>', dark?: '<css_class>' }, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.
  • Используйте { [key in 'android' | 'ios' | 'vkcom']?: '<css_class>' }, чтобы задать для одной или нескольких платформ свой набор токенов.
По умолчанию: { android: { light: 'vkui--vkBase--light', dark: 'vkui--vkBase--dark', }, ios: { light: 'vkui--vkIOS--light', dark: 'vkui--vkIOS--dark', }, vkcom: { light: 'vkui--vkCom--light', dark: 'vkui--vkCom--dark', } }
transitionMotionEnabledboolean

Включена ли анимация переходов между экранами в Root и View.

По умолчанию: -

useConfigProvider

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

Предыдущая
ColorSchemeProvider
Следующая
DirectionProvider