> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DirectionProvider

> Согласуйте взаимодействия с клавиатурой и указателем, зависящие от направления, с направлением документа.

## Обзор

`DirectionProvider` передаёт направление `ltr` или `rtl` элементам управления Twenty UI. Он не отображает элемент DOM и не задаёт HTML-атрибут `dir`. Задайте как направление провайдера, так и соответствующее направление документа.

**Light**

[Пример DirectionProvider (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-directionprovider--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример DirectionProvider (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-directionprovider--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-directionprovider--display)

## Использование

```tsx theme={null}
import { SegmentedControl } from 'twenty-ui/components/input';
import { DirectionProvider } from 'twenty-ui/primitives/layout';
import { Text } from 'twenty-ui/primitives/typography';

type DirectionalChoicesProps = { direction: 'ltr' | 'rtl' };

export const DirectionalChoices = ({ direction }: DirectionalChoicesProps) => (
  <DirectionProvider direction={direction}>
    <Text dir={direction}>
      <SegmentedControl
        aria-label="Billing period"
        defaultValue="annual"
        options={[
          { label: 'Annual', value: 'annual' },
          { label: 'Monthly', value: 'monthly' },
        ]}
      />
    </Text>
  </DirectionProvider>
);
```

Основное приложение предоставляет переведённые метки и выбирает направление. Контекст направления влияет на взаимодействия, зависящие от направления; HTML-атрибут управляет текстом и компоновкой. Например, [SegmentedControl](https://docs.twenty.com/ru/ui/components/input/segmented-control.md) меняет направление горизонтальной навигации с помощью стрелок, а [ResizeHandle](https://docs.twenty.com/ru/ui/primitives/layout/resize-handle.md) меняет направление горизонтального изменения размера.

## Область действия и состояние

Разместите один провайдер вокруг элементов управления, использующих общее направление. Вложенные провайдеры могут переопределять направление для поддерева; сопоставьте каждое переопределение с соответствующим атрибутом `dir`. `direction` управляется приложением и по умолчанию имеет значение `ltr`, как и в Base UI. Дочерние элементы необязательны. Импортируйте `DirectionProviderProps` из той же точки входа. У провайдера нет цели DOM, нативных свойств или ref. Провайдер не переводит содержимое и не выбирает направление автоматически на основе локали.

## Порталы и компоновка

Порталы Dropdown, Popover, Tooltip, Select, Dialog и Toast наследуют направление от провайдера, даже если их контейнер находится вне элемента с `dir`. Без провайдера они наследуют направление своего контейнера. Сохраняйте согласованность между направлением провайдера и HTML-направлением триггера. `ThemeProvider` с ограниченной областью действия продолжает управлять контейнером портала по умолчанию.

Подменю открываются в сторону `inline-end`. ArrowRight открывает подменю в LTR; ArrowLeft открывает его в RTL. Противоположная клавиша возвращает к родительскому элементу. Явное размещение всплывающего окна `left` и `right` по-прежнему обозначает физические стороны. Обработка коллизий может переместить всплывающее окно при ограниченном пространстве.

Текст, отступы, углы присоединённых кнопок и направленные значки раскрытия следуют направлению чтения. Предоставленные значки сохраняют свою ориентацию. `AvatarGroup.overlap` по-прежнему обозначает физический край; внешний аватар не выходит за этот край ни в одном из направлений.

**Light**

[Макеты слева направо и справа налево (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-directionprovider--reading-directions\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Макеты слева направо и справа налево (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-directionprovider--reading-directions\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-directionprovider--reading-directions)

## Свойства

**children** `ReactNode`

Controls that receive the direction context.

**direction** `"ltr" | "rtl"` (default: ltr)

Reading direction used by directional interactions. Also set the matching HTML `dir` attribute on the content.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.