Направление

Поставщик контекста, который переключает компоненты между направлениями написания «слева направо» (LTR) и «справа налево» (RTL), благодаря чему меню, ползунки и вкладки правильно отображаются в арабском, иврите и персидском языках.

Компонент DirectionProvider используется для задания направления текста (ltr или rtl) в вашем приложении. Это необходимо для поддержки языков с письмом справа налево, таких как арабский, иврит и персидский.

Ниже — предпросмотр компонента в режиме RTL. Используйте переключатель языка, чтобы сменить язык. Чтобы увидеть больше примеров, ищите раздел RTL на страницах компонентов.

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

Оберните дерево приложения один раз — и каждый direction-aware компонент (выпадающие меню, слайдеры, вкладки, тултипы) читает направление из React context, а не вынюхивает его из DOM. Построен на утилите Base UI Direction Provider; сам ничего не рендерит и не несёт собственных стилей — необруталистские рамки и тени живут в компонентах, которыми он управляет.

Когда это пригодится:

Приложения на арабском, иврите или персидском — навигация стрелками, выравнивание попапов и поведение слайдера переворачиваются вместе с направлением чтения.
Переключатель локали — меняйте direction у провайдера вместе с dir на <html>, когда пользователь меняет язык.
Страницы со смешанным направлением — вложите провайдер вокруг RTL-блока (встроенная форма, цитата) внутри в целом LTR-приложения.

Установка


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
npx shadcn@latest add https://neobrutalism.com/r/base/direction.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/direction.json

Установите следующие зависимости:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Скопируйте и вставьте следующий код в свой проект.

components/ui/direction.tsx

"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }

Обновите пути импорта в соответствии с настройками вашего проекта.

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

import { DirectionProvider } from "@/components/ui/direction"

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

Хук useDirection используется для получения текущего направления приложения.

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

Доступность

DirectionProvider управляет только логикой компонентов — атрибут dir он никогда не ставит. Всегда задавайте dir и на <html> (или на оборачивающем элементе): браузеры, программы чтения с экрана и CSS logical properties берут направление из DOM-атрибута, а не из React context. Синхронизация этих двух источников и делает RTL-страницу корректной и визуально, и для ассистивных технологий.

Направление

Установка#