Yön

Bileşenleri soldan sağa (LTR) ve sağdan sola (RTL) yön arasında değiştiren bir bağlam sağlayıcı; böylece menüler, kaydırma çubukları ve sekmeler Arapça, İbranice ve Farsça dillerinde doğru şekilde yansıtılır.

DirectionProvider bileşeni, uygulamanızın metin yönünü (ltr veya rtl) ayarlamak için kullanılır. Bu, Arapça, İbranice ve Farsça gibi sağdan sola yazılan dilleri desteklemek için gereklidir.

İşte bileşenin RTL modundaki bir önizlemesi. Dili değiştirmek için dil seçiciyi kullanın. Daha fazla örnek görmek için bileşen sayfalarındaki RTL bölümüne bakın.

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

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

Uygulama ağacınızı bir kez bu bileşenle sarın; yön bilgisine duyarlı her bileşen — açılır menüler, kaydırıcılar, sekmeler, ipuçları — yönü DOM'u yoklamak yerine React context'inden okur. Base UI Direction Provider yardımcı aracı üzerine kuruludur; kendisi hiçbir şey işlemez ve kendine ait bir stille gelmez — neobrütalist kenarlıklar ve gölgeler, yönlendirdiği bileşenlerdedir.

Şu durumlarda tercih edin:

Arapça, İbranice veya Farsça uygulamalar — ok tuşlarıyla gezinme, açılır pencere hizalaması ve kaydırıcı davranışı okuma yönüyle birlikte tersine döner.
Dil değiştirici — kullanıcı dili değiştirdiğinde sağlayıcının direction değerini <html> üzerindeki dir özniteliğiyle birlikte güncelleyin.
Karışık yönlü sayfalar — soldan sağa (LTR) bir uygulamanın içindeki sağdan sola (RTL) bir bloğu (gömülü bir form, alıntılanan içerik) ayrı bir sağlayıcıyla sarın.

Kurulum


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

Aşağıdaki bağımlılıkları yükleyin:


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

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

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 }

İçe aktarma yollarını proje kurulumunuza uyacak şekilde güncelleyin.

Kullanım

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

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

useDirection

useDirection hook'u, uygulamanın geçerli yönünü almak için kullanılır.

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

Erişilebilirlik

DirectionProvider yalnızca bileşen mantığını yönlendirir — dir özniteliğini hiçbir zaman ayarlamaz. dir özniteliğini her zaman <html> (veya sarmalayan öğe) üzerinde de ayarlayın: tarayıcılar, ekran okuyucular ve CSS mantıksal özellikleri yönü React context'inden değil, DOM özniteliğinden çözümler. Bir RTL sayfasının hem doğru görüntülenmesini hem de doğru okunmasını sağlayan şey, bu ikisinin eşzamanlı tutulmasıdır.

Yön

Kurulum#