Hướng

Một trình cung cấp bối cảnh giúp chuyển đổi các thành phần giữa hướng từ trái sang phải (LTR) và từ phải sang trái (RTL), nhờ đó các menu, thanh trượt và tab sẽ hiển thị đúng hướng trong tiếng Ả Rập, tiếng Do Thái và tiếng Ba Tư.

Thành phần DirectionProvider được dùng để thiết lập hướng văn bản (ltr hoặc rtl) cho ứng dụng của bạn. Điều này rất cần thiết để hỗ trợ các ngôn ngữ viết từ phải sang trái như tiếng Ả Rập, tiếng Do Thái và tiếng Ba Tư.

Đây là bản xem trước của thành phần ở chế độ RTL. Dùng bộ chọn ngôn ngữ để chuyển đổi ngôn ngữ. Để xem thêm ví dụ, hãy tìm phần RTL trên các trang thành phần.

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

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

Bọc nó quanh cây component một lần là mọi thành phần biết nhận hướng đọc — dropdown menu, slider, tab, tooltip — sẽ lấy hướng từ React context thay vì dò trong DOM. Được xây dựng trên tiện ích Base UI Direction Provider; nó không render ra gì và cũng không mang kiểu dáng riêng — phần viền dày và bóng đổ neobrutalist nằm ở chính những thành phần mà nó điều phối.

Nên dùng khi:

Ứng dụng tiếng Ả Rập, Hebrew hoặc Ba Tư — cách điều hướng bằng phím mũi tên, cách canh popup và hành vi của slider đều đảo theo hướng đọc.
Bộ chuyển ngôn ngữ — đổi direction của provider cùng lúc với dir trên <html> khi người dùng đổi ngôn ngữ.
Trang có hướng đọc hỗn hợp — lồng một provider quanh một khối RTL (biểu mẫu nhúng, nội dung trích dẫn) bên trong ứng dụng LTR.

Cài đặt


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

Cài đặt các phụ thuộc sau:


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

Sao chép và dán đoạn mã sau vào dự án của bạ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 }

Cập nhật các đường dẫn import cho phù hợp với thiết lập dự án của bạn.

Cách dùng

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

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

useDirection

Hook useDirection được dùng để lấy hướng hiện tại của ứng dụng.

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

Khả năng truy cập

DirectionProvider chỉ điều phối phần logic của các thành phần — nó không bao giờ đặt thuộc tính dir. Hãy luôn đặt cả dir trên <html> (hoặc trên phần tử bọc ngoài): trình duyệt, trình đọc màn hình và các thuộc tính logic của CSS đều xác định hướng đọc từ thuộc tính trong DOM, chứ không phải từ React context. Giữ hai thứ đó đồng bộ chính là điều làm cho một trang RTL vừa hiển thị đúng vừa đọc đúng.

Hướng

Cài đặt#