Kierunek

Dostawca kontekstu, który przełącza komponenty między układem LTR a RTL, dzięki czemu menu, suwaki i zakładki są poprawnie odzwierciedlane w języku arabskim, hebrajskim i perskim.

Komponent DirectionProvider służy do ustawiania kierunku tekstu (ltr lub rtl) twojej aplikacji. Jest to niezbędne do obsługi języków pisanych od prawej do lewej, takich jak arabski, hebrajski i perski.

Oto podgląd komponentu w trybie RTL. Użyj selektora języka, aby zmienić język. Aby zobaczyć więcej przykładów, poszukaj sekcji RTL na stronach komponentów.

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

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

Owiń nim drzewo komponentów raz, a każdy komponent świadomy kierunku — menu rozwijane, suwaki, karty, dymki podpowiedzi — odczyta kierunek z kontekstu Reacta, zamiast wykrywać go w DOM. Zbudowany na narzędziu Base UI Direction Provider; sam niczego nie renderuje i nie niesie własnych stylów — neobrutalistyczne obramowania i cienie mieszkają w komponentach, którymi steruje.

Sięgnij po ten komponent, gdy:

Aplikacje po arabsku, hebrajsku lub persku — nawigacja strzałkami, wyrównanie wyskakujących paneli i zachowanie suwaków odwracają się razem z kierunkiem czytania.
Przełącznik języka — zmieniaj direction providera razem z atrybutem dir na <html>, gdy użytkownik zmienia język.
Strony o mieszanym kierunku — zagnieżdżaj provider wokół bloku RTL (osadzony formularz, cytowana treść) wewnątrz aplikacji, która poza tym działa w LTR.

Instalacja


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

Zainstaluj następujące zależności:


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

Skopiuj i wklej poniższy kod do swojego projektu.

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 }

Zaktualizuj ścieżki importu, aby pasowały do konfiguracji twojego projektu.

Użycie

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

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

useDirection

Hook useDirection służy do pobierania bieżącego kierunku aplikacji.

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

Dostępność

DirectionProvider steruje wyłącznie logiką komponentów — nigdy nie ustawia atrybutu dir. Zawsze ustawiaj dir także na <html> (lub elemencie opakowującym): przeglądarki, czytniki ekranu i logiczne właściwości CSS ustalają kierunek na podstawie atrybutu w DOM, a nie kontekstu Reacta. Dopiero synchronizacja obu sprawia, że strona RTL zarówno poprawnie się renderuje, jak i poprawnie się czyta.

Kierunek

Instalacja#