DirectionProvider

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

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

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

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

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

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

Всегда добавляйте атрибут dir к корневому элементу внутри DirectionProvider. Это необходимо для корректной работы логических CSS-свойств.

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

function MyContent() {
  const direction = useDirection();
 
  return (
    <div dir={direction}>
      <div style={{ marginInlineStart: '16px' }}>Отступ слева для LTR и справа для RTL</div>
    </div>
  );
}
 
function App() {
  return (
    <DirectionProvider value="rtl">
      <MyContent />
    </DirectionProvider>
  );
}

Хук useDirection

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

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

const direction = useDirection();

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

DirectionProvider

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

useDirection

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

ConfigProvider

LocaleProvider